【Flutter×Firebase】【個人開発】旅行中のお金やレシートの管理ができるスマホアプリを開発・リリースしました。

こんにちは。今回は個人開発アプリの紹介記事となります。ぜひダウンロードして使ってみてください！

開発したアプリ

アプリ名：【旅行中のお金計算管理「トラマネ」】

AppStoreとGooglePlayにリリースしました。感想いただけるととても嬉しいです！

AppStore

旅行中のお金計算管理「トラマネ」

• Iori Kirihara
• 旅行
• 無料
• 

apps.apple.com

GooglePlay

play.google.com

開発環境

・Windows11
・Android Studio
・Xcode（iOSリリースのため）
・Flutter
・Firebase

開発期間

１か月ほど

開発の経緯

友人と旅行に行った際に、誰がいつどこに何にお金を使ったかを今まではメモ帳に随時記載して事後清算をやってました。それをもっとやりやすく、かつ後から見返しやすい、加えて友人と共同で編集や参照がリアルタイムにできるアプリがあればいいなと思ったのがきっかけです。

アプリの紹介

概要

旅行中のお金やレシートの管理がシンプルにできるアプリです。

機能

・旅行中のメンバーごとの支払い履歴の登録、削除
・支払いに紐づいたレシートの保存
・メンバーごとの合計金額の表示
・メンバーとイベント共有で共同参照および編集

などなど

苦労したこと

今回は、freezedやriverpod、go_routerなどのライブラリを積極的に取り入れて開発してみました。今まで使用したことないものも多く取り入れたため、その学習に時間を費やしました。多少悩んだことはありましたが、しっかり開発を終えられてよかったです＾＾

おわりに

FlutterとFirebaseの組み合わせはとても便利ですね。一つのコードでiOSにもAndroidにも対応できるのはもちろん、サーバーレスで認証やDB周りの実装が容易にできるのがとてもいいです。ちなみに、アプリのアイコンはAIに作ってもらいました。AIの進化すごい・・・！

以下よりダウンロードできますのでぜひ。

AppStore

旅行中のお金計算管理「トラマネ」

• Iori Kirihara
• 旅行
• 無料
• 

apps.apple.com

GooglePlay

play.google.com

今回は以上となります、最後までお読みいただきありがとうございます！

【Flutter初心者向け】Dart・Flutter入門！

今回は、DartとFlutterの入門ということで、基礎の基礎を解説していきます。それでは、一緒に学んでいきましょう！

この記事で分かること

✅Dartの基礎
✅Flutterの基礎

目次

これらの知識を身につけることで、あなたもきっとスマホアプリ開発ができるようになります。

はじめに

DartとFlutterの概要

まずは、DartとFlutterの基本的な概要から見ていきましょう。DartはGoogleが開発したオープンソースのプログラミング言語で、その特徴はシンプルさとパワフルさを兼ね備えていることです。また、FlutterはDart上で動作するモバイルアプリケーション開発フレームワークで、一つのコードベースでiOSとAndroidの両方に対応したアプリケーションを効率的に開発することを可能にします。これらの技術はGoogleによって積極的に開発・サポートされており、その人気と需要は日々高まっています。

Dart言語入門

それでは、Flutterで使われているDart言語についてここで解説します。

Dart言語の特徴

Dartの文法はC言語やJavaに似ているため、これらの言語に慣れている方にとっては学びやすいでしょう。また、Dartはオブジェクト指向言語であり、クラスとミックスインを用いたリッチな継承機構を持っています。さらに、Dartは静的型付けをサポートしており、大規模なプロジェクトでも型安全性を保つことができます。

Dartの基本的な文法

ここでは、Dartの基本的な文法について見ていきましょう。

変数とデータ型

Dartでは、var・const・finalキーワードを使って変数を宣言します。また、Dartは静的型付け言語であるため、データ型を明示的に指定することも可能です。例えば、以下のコードでは、整数型の変数numと文字列型の変数strを宣言しています：

int num = 10;
String str = 'Hello, Dart!';

制御構造（if文、for文、while文など）

Dartでは、他の多くのプログラミング言語と同様に、if文、for文、while文などの制御構造を使用できます。以下に、それぞれの制御構造の使用例を示します：

// if文
int num = 10;
if (num > 5) {
  print('num is greater than 5');
}

// for文
for (int i = 0; i < 5; i++) {
  print('Hello, Dart!');
}

// while文
int num = 5;
while (num > 0) {
  print(num);
  num--;
}

関数とクラス

Dartはオブジェクト指向プログラミングをサポートしており、関数とクラスを用いてコードを構造化することができます。以下に、関数とクラスの定義の例を示します：

// 関数の定義
void greet(String name) {
  print('Hello, $name!');
}

// クラスの定義
class Person {
  String name;

  Person(this.name);

  void greet() {
    print('Hello, $name!');
  }
}

コレクション（リスト、マップなど）

Dartには、リスト（配列）、マップ（連想配列）、セットなどのコレクション型があります。以下に、それぞれのコレクションの使用例を示します：

// リスト
List numbers = [1, 2, 3, 4, 5];

// マップ
Map<String, int> scores = {
  'Alice': 100,
  'Bob': 200,
};

// セット
Set names = {'Alice', 'Bob', 'Charlie'};

Dartのパッケージ管理（pub）

Dartでは、pubというパッケージマネージャを使用して、ライブラリのインストールやバージョン管理を行います。pubspec.yamlというファイルに依存関係を記述し、pub getコマンドを実行することで、必要なライブラリをプロジェクトに追加することができます。

Flutter入門

Flutterの特徴

Flutterの最大の特徴は、ホットリロード機能により、コードの変更を即座に反映できる点です。これにより、開発者はアプリケーションの挙動を素早く確認し、迅速に開発を進めることができます。

以下にFlutterの概要についてまとめた記事がありますのでこちらもぜひ。

Flutterのウィジェットとレイアウト

Flutterでは、ウィジェットを組み合わせてアプリケーションのUIを構築します。ウィジェットは、テキスト、イメージ、アイコンなどの基本的な要素から、ボタン、メニュー、スクロールバーなどの複雑な要素まで、さまざまな種類があります。また、Flutterでは、レイアウトウィジェットを使用して、これらのウィジェットを配置します。

Flutter入門としては以下の書籍がおすすめです。

概要はいいから実際のコードがもっと見たい！という方は筆者のブログ記事をあさってみてください。コピペで動くサンプルコードを色々と紹介しています。ぜひあなたの手で実際に手を動かしてFlutterでアプリ開発をしてみてください。ちなみに、そもそも環境構築がまだできていないよ！！という方については以下記事が参考になります。

まとめ

今回は、簡単ではありますがDartとFlutterについてざっくりとまとめてみました。Flutterの世界はまだまだ奥が深いですので、この機会にぜひ皆さんも学びを深めてみてください！

今回は以上となります。最後までお読みいただきありがとうございました！

【Flutter初心者向け】これを読めばFlutterの概要が分かります【所要時間2分】

今回は、「Flutterを最近始めたよ！」という方や「Flutterとはそもそも何？」という方に向けて概要を簡潔にまとめてみました。これを読めば明日からFlutterについて語れます。笑

この記事で分かること

✅Flutterの概要

目次

はじめに：Flutterとは

FlutterはGoogleが開発したオープンソースかつクロスプラットフォーム対応のフレームワークです。iOSとAndroidの両方のプラットフォームはもちろん、Webとデスクトップ向けのアプリ開発もほぼ一つのソースコードで実装できてしまいます。

Flutterの歴史と開発

Flutterは2015年にGoogleで初めて公開され、その後数年間で急速に成長しました。現在では、世界中の開発者によって広く使用されています。Flutterの開発は活発に行われていて、新しい機能や改善が頻繁にリリースされています。今後もさらに持続的に発展し続けるだろうと筆者は考えています。

Flutterの主な特徴

Flutterの主な特徴は、高性能なネイティブアプリを一つのコードベースで開発できることです。これにより、開発時間を大幅に短縮することができます。また、Flutterはホットリロード機能を提供しており、コードの変更を即座にアプリに反映することができます。これにより、開発者は迅速にアプリをイテレーションすることができます。

Dart言語との関連性

FlutterはDartという言語を使用しています。DartはGoogleが開発した言語で、シンプルさとパフォーマンスを兼ね備えています。Dartはオブジェクト指向の言語であり、C++やJavaに似た文法を持っていますが、より簡潔で理解しやすいです。また、DartはFlutterが提供するホットリロード機能を可能にする重要な要素でもあります。

Flutterの基本的な概念

Widgetsとは

Flutterでは、すべてのUI要素をWidget（部品のようなもの）として扱います。これにより、UIの再利用と組み合わせが容易になります。アプリ開発者は部品であるWidgetを様々に組み合わせて見た目を構築していきます。

以下にここよりも詳しく解説していますのでぜひ読んでみてください。

Stateとは

Stateはアプリの状態（変数の中身や画面上での見た目のこと）を管理するためのもので、Flutterでは多くのWidgetがStateを持つことができます。Stateの管理はFlutterアプリの中心的な部分であり、適切なState管理はアプリのパフォーマンスとメンテナンス性に大きく影響します。

Flutterの利点

クロスプラットフォーム開発の利点

Flutterを使用すると、一つのコードベースでiOSとAndroidの両方のアプリを開発することができるため、開発時間とコストを大幅に削減することができます。

高性能なUIの構築

Flutterは高性能なUIを構築するための多くのツールとライブラリを提供しています。これにより、スムーズで応答性の高いユーザー体験を提供するアプリを作成することができます。

豊富なパッケージエコシステム

Flutterは豊富なパッケージエコシステムを持っており、開発者はこれらのパッケージを利用して開発を効率化することができます。これらのパッケージは、さまざまな機能を提供し、開発者がゼロからすべてを作成する必要を減らします。

Flutterの成功事例

Flutterは多くの大規模なプロジェクトで使用されており、その中にはあのAlibabaやGoogle Adsなどの有名なアプリも含まれています。これらの事例は、Flutterが大規模な商用アプリにも十分対応できることを示しています。

Flutterを学ぶための方法

Flutterを学ぶための方法は多数存在します。公式ドキュメンテーション、チュートリアル、コミュニティが多く存在します。また、書籍での学習もおすすめです。

以下は筆者が読んだ本の紹介です。全体像が分かりやすくまとまっているので最初に読む１冊目としておすすめです！

他にも以下のようなサービスもとてもおすすめです！

まとめ：Flutterの可能性

Flutterはその特性と利点により、モバイルアプリ開発の未来を大きく変える可能性を秘めています。筆者はこれからもFlutterの進化に注目していきます。Flutterはまだ若いフレームワークですが、その可能性と成長は非常に大きいと思いますので皆さんもぜひFlutterでアプリ開発をしてみてください！

以上です、最後までお読みいただきありがとうございます！

【Flutter】「go_router」を用いた画面遷移の説明とサンプル（コピペOK！）

今回は、Flutterで「go_router」というライブラリを用いた画面遷移を実装するサンプルです。

Flutterでの画面遷移については以前も記事にしたことがありますが、その時はFlutter標準の「Navigator」を用いた方法について解説しました。

今回の記事では、Navigatorを使いやすく簡潔に実装できるようにしたライブラリである「go_router」についての説明となります。

この記事で分かること

✅「go_router」の使い方

目次

サンプル画面

以下画面のようにボタン押下で画面遷移するサンプルです。

サンプルコード

全文（main.dart）

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    //ルーティング設定
    return MaterialApp.router(
      routeInformationProvider: router.routeInformationProvider,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );
  }
}

//go_routerを用いたルート定義
final GoRouter router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) => Top(),
    ),
    GoRoute(
      path: '/home',
      builder: (BuildContext context, GoRouterState state) => Home(),
    ),
  ],
);

//トップ画面
class Top extends StatelessWidget {
  const Top({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            router.push('/home');
          },
          child: Text('ログイン'),
        ),
      ),
    );
  }
}

//ホーム画面
class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            router.pop();
          },
          child: Text('ログアウト'),
        ),
      ),
    );
  }
}

実装手順の説明

①「pubspec.yaml」に「go_router」を追加する

dependencies:
  flutter:
    sdk: flutter

  go_router: ^13.2.4

まずは以下の「go_router」ライブラリを追加してpub getします。

go_router | Flutter package

②importする

以下をファイルの最初に記述します。

import 'package:go_router/go_router.dart';

③ルーティング設定をする

アプリケーションのエントリーポイント（サンプルではMyAppの中）で以下設定を記述します。

//ルーティング設定
    return MaterialApp.router(
      routeInformationProvider: router.routeInformationProvider,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );

以下に詳細を書いておきますが半分おまじない程度の認識でも特に問題ないです。笑

routeInformationProvider	ルーティング情報を提供します。通常、現在のURLを提供します。この情報は、アプリケーションがナビゲートするために使用されます。
routeInformationParser	routeInformationProviderから提供される情報を解析します。この解析により、アプリケーションが理解できる形式に情報が変換されます。
routerDelegate	アプリケーションのナビゲーションスタックを管理します。具体的には、どのページが表示されるべきかを決定します。

④ルート（画面遷移先）の定義をする

//go_routerを用いたルート定義
final GoRouter router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) => Top(),
    ),
    GoRoute(
      path: '/home',
      builder: (BuildContext context, GoRouterState state) => Home(),
    ),
  ],
);

このように画面遷移先の分だけGoRouteで定義をしていきます。

⑤画面遷移をする

router.push('/home');

④で定義したルートの「path」プロパティの値を引数に設定することで画面遷移ができます。Navigatorでの画面遷移よりかなりシンプルになりましたね！

まとめ

今回はFlutterでgo_routerを用いて画面遷移を実装するサンプルでした。この機会にぜひ理解を深めていきましょう！

最後までお読みいただきありがとうございました！

Cloud Firestoreの作成手順とFlutterアプリからのデータ操作方法サンプル【コピペOK！】

今回はFirestoreの作成手順とFlutterアプリからのデータ操作方法を見ていきます。

はじめに

以下を前提にしています。

・Windows環境
・Flutterプロジェクト作成済み
・FlutterプロジェクトとFirebaseプロジェクトの連携済み

FlutterプロジェクトとFirebaseプロジェクトのどちらか、もしくはそのどちらも未作成・未連携の場合は以下記事を参考にしてください。

Cloud Firestoreの作成手順

まずはFirebaseのプロジェクトを開き、左側メニューの「Firestore Database」をクリックします。

次に「データベースの作成」をクリックします。

ロケーションを設定し、「次へ」をクリックします。ここでは「asia-northeast1(Tokyo)」を選択しています。

本番モードかテストモードで作成するか聞かれます。これは後ほど変更可能なのでどちらでも構いません。最後に「有効にする」をクリックします。

これで以下の画面に遷移すればFirestoreの作成完了です。

Flutterアプリからのデータ操作方法

それではここから、実際にFirestoreデータベースのデータをサンプルプログラムを用いて操作していきましょう。

まず、pubspec.yamlに以下を追記します。

    cloud_firestore: ^4.14.0

データ操作用に作成したUserクラス

次に以下のようなクラスを作成し、クラス内にFirestoreのデータを操作（登録、更新、削除）するメソッドを定義します。コピペで問題ないです。

class User {
  final String id;
  final String name;

  User({required this.id, required this.name});

  CollectionReference users = FirebaseFirestore.instance.collection('users');

　//登録
  Future<void> addUser() {
    return users
      .doc(id)
      .set({'userid': id, 'username': name})
      .then((value) => print("User Added"))
      .catchError((error) => print("Failed to add user: $error"));
  }

　//更新
  Future<void> updateUser(String newName) {
    return users
      .doc(id)
      .update({'username': newName})
      .then((value) => print("User Updated"))
      .catchError((error) => print("Failed to update user: $error"));
  }

　//削除
  Future<void> deleteUser() {
    return users
      .doc(id)
      .delete()
      .then((value) => print("User Deleted"))
      .catchError((error) => print("Failed to delete user: $error"));
  }
}

このクラスは、Firestoreにusersという名前のコレクションを作成し、その中にユーザー情報を追加、更新、削除する機能を持っています。addUser、updateUser、deleteUserの各メソッドは、それぞれデータの追加、更新、削除を行います。各メソッドは非同期であり、操作が完了すると結果をコンソールに出力します。

ちなみに、Firestoreはコレクションやドキュメントの追加は暗黙的に行われますので、事前にFirestoreコンソール画面からデータを作成しておく必要は特段の理由がない限りありません。

メソッド使用例（サンプル）

以下のようにして、上記Userクラスのメソッドを呼び出すことができます。

void main() async {
  User user = User(id: '123', name: 'John Doe');

  // ユーザーを追加
  await user.addUser();

  // ユーザー名を更新
  await user.updateUser('Jane Doe');

  // ユーザーを削除
  await user.deleteUser();
}

おわりに

今回は、Firestoreの作成手順とFlutterアプリからのデータ操作方法のサンプル紹介でした。この記事があなたのアプリ開発に役立って居たら幸いです。

以上となります、最後までお読みいただきありがとうございました！

【Flutter×Firestore×Algolia】全文検索を実装します（コピペOKのサンプルコード付き）

今回はタイトルの通り、Flutter×Firestore×Algoliaで全文検索を実装するサンプルです。

個人開発中のアプリで「全文検索（ここではSQLでいうLike句とほぼ同義）」を実装する必要があったため、今回はその備忘録も兼ねて実装手順を紹介しようと思います。

はじめに

まずはじめにですが、以下の通りFirestoreは「全文検索」をサポートしていません！！

そのため、「全文検索」を実装するためには「N-gram」等のアルゴリズムを用いて独自実装するか、サードパーティ製サービスを利用するかの主に二択があるかと思います。

今回の開発では、実装の容易性を考えて「Algolia」というサービスを利用しました。

全文検索とは

いったん、全文検索について軽く復習。

一言でいうと、ある文書内から特定の文字列が含まれるものを検索することです。

実装手順

①Algoliaに登録し、プロジェクトの設定をする

以下URLにアクセスして登録する。

https://dashboard.algolia.com/users/sign_in

Algoliaの設定に関してはFlutterとAlgoliaを使って全文検索をしてみた | 可茂IT塾を参考にしました！

②Firebase ExtensionsでSearch Firestore with Algoliaをインストールする

※Firebaseのextension機能は、Firebaseを従量制にしないと利用できません。
※以前は「Serach with Algolia」という名前でした。

③Flutterで「algolia_helper_flutter」パッケージを導入する

1.「pubspec.yaml」に追加

algolia_helper_flutter: ^0.5.0

※「algolia」パッケージではないです。

2.以降は実装コードの説明です。詳細は以下を参考にしてください。

https://www.algolia.com/doc/guides/building-search-ui/getting-started/flutter/

英語ばかりでしんどいという方はとりあえず2.以降に進んでみてください。重要な個所だけはしょった感じなので検索の実行はとりあえずできるようになります＾＾笑

2.HitsSearcherオブジェクトを作成

HitsSearcherとはAlgoliaの検索エンジンに接続するためのアクセス先情報の定義（オブジェクト）です。

final hitsSearcher = HitsSearcher(
    applicationID: 'YourApplicationID',
    apiKey: 'YourAPIKey',
    indexName: 'YourIndexName',
 );
  

3.クエリの実行

hitsSearcher.query(searchString);
  

4.検索結果の受け取り

await for (var response in hitsSearcher.responses.timeout(Duration(seconds: 1))) {
      final hits = response.hits.toList() ?? [];
      for (var hit in hits) {
        // 検索結果から特定のフィールドを取得し、結果リストに追加します。
        results.add(hit['YourFieldName']);
      }
    }
  

5.HitsSearcherリソースの解放

hitsSearcher.dispose();
  

サンプルコード全文（コピペOK）

以下にAlgolia検索用の関数サンプルを載せてるので参考にしてみてください。

// 概要：一般的な検索関数
// この関数は引数で受け取った文字列をAlgolia検索し、該当項目をリストで返します。
// 引数：入力した項目の文字
// 戻り値：Algoliaで検索した、引数の文字列に部分一致する項目のリスト
Future<List> searchWithAlgolia(String searchString) async {
  // ①. Create a Hits Searcher
  // HitsSearcherオブジェクトを作成します。これはAlgoliaの検索エンジンに接続するためのオブジェクトです。
  final hitsSearcher = HitsSearcher(
    applicationID: 'YourApplicationID',
    apiKey: 'YourAPIKey',
    indexName: 'YourIndexName',
  );

  List results = [];

  // ②. クエリを実行
  // searchStringを引数にして、Algoliaの検索エンジンにクエリを送信します。
  hitsSearcher.query(searchString);

  try {
    // ③. Listen to search responses
    // Algoliaからの検索結果を受け取ります。結果は非同期的に返されるため、await for構文を使用します。
    await for (var response in hitsSearcher.responses.timeout(Duration(seconds: 1))) {
      final hits = response.hits.toList() ?? [];
      for (var hit in hits) {
        // 検索結果から特定のフィールドを取得し、結果リストに追加します。
        results.add(hit['YourFieldName']);
      }
    }
  } on TimeoutException catch (e) {
    // ④. 検索が指定した時間内に完了しない場合、タイムアウト例外をキャッチします。
    print('The operation has timed out: $e');
  } catch (e) {
    // その他のエラーをキャッチします。
    print('An error occurred: $e');
  }

  // ⑤. Release underling resources
  // HitsSearcherオブジェクトがもはや必要ない場合、リソースを解放します。
  hitsSearcher.dispose();

  // ⑥. 検索結果のリストを返します。
  return results;
}
  

おわりに

今回は「Flutter×Firestore×Algolia」で全文検索を実装する手順とサンプル紹介でした。この記事があなたのアプリ開発に役立っていればうれしいです！

以上となります、最後までお読みいただきありがとうございました！

【Flutter×Firebase】【個人開発】レシートと収支の管理ができるスマホアプリを開発・リリースしました。

こんにちは。今回は個人開発アプリの紹介記事となります。ぜひダウンロードして使ってみてください！

開発したアプリ

アプリ名：【レシート保存＆収支管理「レシマネ」】

AppStoreとGooglePlayにリリースしました。感想いただけるととても嬉しいです！

AppStore

レシート保存＆収支管理「レシマネ」

• Iori Kirihara
• ライフスタイル
• 無料
• 

apps.apple.com

GooglePlay

play.google.com

開発環境

・Windows11
・Android Studio
・Xcode（iOSリリースのため）
・Flutter
・Firebase

開発期間

１か月ほど

開発の経緯

世の中に「家計簿アプリ」はたくさんありますが、どれも機能豊富すぎて結局使わない機能もあり、シンプルなアプリを使いたいと思ったのが開発のきっかけです。また、どんどん溜まっていくレシートを後から見返すことができるように簡単に管理したかったというのもあります！

アプリの紹介

概要

日々の収支、レシートをシンプルに管理できるアプリです。

機能

・カレンダーで収入、支出の登録および修正、削除
・レシートの保存、一覧表示
・月ごとにレシートの一覧表示
・残高の表示、修正
・年、月、日ごとに収入と支出の一覧表示

などなど

苦労したこと

機能はシンプルなのでそこまで実装に悩むことはなかったです。どちらかというと、AppStoreへのリリースが初めてだったのでそこが一番時間かかった気がします。。笑

おわりに

FlutterとFirebaseの組み合わせはとても便利ですね。一つのコードでiOSにもAndroidにも対応できるのはもちろん、サーバーレスで認証やDB周りの実装が容易にできるのがとてもいいです。

以下よりダウンロードできますのでぜひ。

AppStore

レシート保存＆収支管理「レシマネ」

• Iori Kirihara
• ライフスタイル
• 無料
• 

apps.apple.com

GooglePlay

play.google.com

今回は以上となります、最後までお読みいただきありがとうございます！

【Flutter】ローディングのぐるぐるサンプル【コピペOK！】

今回は、アプリで処理を待つ間に表示されるローディングのあのぐるぐるを実装するサンプルです。関数を作ってあるのでメソッドをコピペして呼び出してもらえればすぐに実装できます！

この記事で分かること

✅ローディングのぐるぐるの実装方法

目次

サンプル画面

以下画面のようにボタン押下で一定時間ローディング画面が表示されるサンプルです。

サンプルコード

全文（main.dart）

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'ローディングサンプル'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<myhomepage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            showLoading(context);//ローディング画面呼び出し

            await Future.delayed(Duration(seconds: 3));//今回は例で3秒待機する処理を入れてます（つまり3秒ローディング画面が表示される）

            Navigator.of(context).pop();//ローディング画面を閉じる
          },
          child: const Text("ローディング"),
        ),
      ),
    );
  }
}

//ローディング用関数
void showLoading(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return Dialog(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: const [
            CircularProgressIndicator(),
            Text("ローディング"),
          ],
        ),
      );
    },
  );
}

実装手順の説明

①ローディング関数作成

//ローディング用関数
void showLoading(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return Dialog(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: const [
            CircularProgressIndicator(),
            Text("ローディング"),
          ],
        ),
      );
    },
  );
}

自作したshowLoading()関数の中で使用しているshowDialog()は任意のダイアログを表示するためのFlutter関数です。barrierDismissibleをfalseとすることでローディング中にユーザがタップをして画面が戻ることがなくなります。

CircularProgressIndicator()は回転する円形の進行状況インジケーターです。要はぐるぐるです。笑

showDialog function - material library - Dart API
CircularProgressIndicator class - material library - Dart API

②①を呼び出す

showLoading(context);//ローディング画面呼び出し

③時間のかかる処理を記述する

await Future.delayed(Duration(seconds: 3));//今回は例で3秒待機する処理を入れてます（つまり3秒ローディング画面が表示される）

④ローディング画面を閉じる

Navigator.of(context).pop();//ローディング画面を閉じる

これは、ローディング画面から元画面に戻るために記述した処理です。ローディング画面というのは今の画面（ローディングをする画面）の上に画面が重なっている状態となります。そのため、もしローディング後に元画面に戻る必要があるならこれを記述しないとずっとぐるぐると回り続けてしまいます。

ここら辺の画面スタックや遷移の話については以下記事を参考にしてみてください。

まとめ

今回はFlutterで画面のローディングを実装するサンプルでした。非同期処理や時間のかかる処理を行う際にはお世話になると思うのでこの機会にぜひ理解を深めていきましょう！

最後までお読みいただきありがとうございました！

【Flutter】画面の下部によくあるナビゲーションバー（BottomNavigationBar）を実装するサンプル

今回は画面の下部にあるナビゲーションバーの実装方法サンプルです。

この記事で分かること

✅BottomNavigationBarの実装方法
✅BottomNavigationBarの主なプロパティについて

目次

サンプル画面

このように、スマホアプリの画面下によくあるバーを実装します。

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Test_BottomNavigationBar(),
    );
  }
}

class Test_BottomNavigationBar extends StatefulWidget {
  const Test_BottomNavigationBar({super.key});

  @override
  State<Test_BottomNavigationBar> createState() => _Test_BottomNavigationBar();
}

class _Test_BottomNavigationBar extends State<Test_BottomNavigationBar> {

  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      print("タップされた場所は" + _selectedIndex.toString());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test"),
      ),
      body: const Center(
        child: Text("Test"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'ホーム',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '検索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'プロフィール',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

解説＆実装手順

①ナビゲーションバーがタップされた場所を格納する変数を定義

int _selectedIndex = 0;

ナビゲーションバーは左のアイテムからインデックス数字が0、1、2となります。つまりインデックスが0だと、ナビゲーションバーの一番左の場所を指定してることになりますね。

②ナビゲーションバーがタップされたときの挙動を記述した関数を定義

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
    print("タップされた場所は" + _selectedIndex.toString());
  });
}    

ナビゲーションバーのアイテムタップ時にタップした場所のインデックスを引数として受け取り、①で定義した変数にそのインデックスを格納しています。加えてタップ時に本当にインデックスが変わっているのかを、print()関数でデバッグ確認できるようにしています。

③ナビゲーションバーのアイコンと文字をそれぞれ設定し②を呼び出す

bottomNavigationBar: BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'ホーム',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: '検索',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'プロフィール',
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
),    

BottomNavigationBarItemを3つ設置しているので、サンプル画面のように3つのアイテムが表示されています。「currentIndex」プロパティはアクティブなアイテムのインデックスが入ります。「onTap」プロパティにはタップ時の挙動を記述します。ここでは、②で定義した「_onItemTapped」関数を呼び出しています。

BottomNavigationBarの主なプロパティについて

backgroundColor

背景色。

currentIndex

アクティブにするインデックスを指定できる。

elevation

ナビゲーションバーのZ軸方向の高さ。

fixedColor

アイテムがタップされたときの色。

iconSize

ナビゲーションバーすべてのアイコンのサイズ。

onTap

タップ時の挙動を定義できる。

selectedItemColor

選択されたアイテムの色。

おわりに

今回はBottomNavigationBarの実装方法サンプルの紹介でした。画面下のバーはスマホアプリでよく見かけると思います。この機会に実装できるようになりましょう！

最後までお読みいただきありがとうございました！

参考

BottomNavigationBar class - material library - Dart API

【Flutter初心者用】【コピペOK！】TextFieldに入力した値を取得しボタン押下で画面に表示するサンプルコード

今回はTextFieldに入力した値を取得しボタン押下で画面に表示する、という動きのサンプルとなっています。ユーザーの入力値の受け取りやボタン押下で動きを持たせるなど、Flutterアプリ開発の基本のきの部分についての記事です。

この記事で分かること

✅TextFieldの入力値を受け取る方法
✅ボタン押下で入力値などのデータを画面表示する方法

目次

サンプル画面

サンプルコード

class _Sample_textfield extends State<Sample_textfield>{
  String text = "";
  String hyoji_text = "";

  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: const Text('サンプル')),
      body: Center(
        child: Column(
          children: <Widget>[
            TextField(
              onChanged: (value){
                text = value;
              },
            ),
            ElevatedButton(
              onPressed: (){
                setState(() {
                  hyoji_text = text;
                });
              },
              child: const Text('入力した内容の表示'),
            ),
            Text(hyoji_text)
          ]
        ),
      ),
    );
  }
}

実装手順と解説

①入力値および表示内容を格納する変数を定義

String text = "";//入力値受け取り用
String hyoji_text = "";//画面表示用

②「TextField」の「onChanged」プロパティでユーザーの入力値を格納

TextField(
    onChanged: (value){
        text = value;//入力があるたびにセット
    },
),

ここで、ユーザーからの入力値を「数字のみ」や「英数字と記号のみ」などのように指定する方法については以下を参照してください。

③ボタン押下時の「onPressed」プロパティで「setState()」を用いて表示用変数に値を格納

onPressed: (){
    setState(() {
        hyoji_text = text;//ボタン押下時にtextfieldの内容をセット
    });
},

「setState()」については以下を参照してみてください。

④「Text()」に表示用変数の値をセット

Text(hyoji_text)//画面に表示

おわりに

今回はFlutterのTextFieldで、入力値を取得し、画面に表示する方法についてまとめました。Flutterアプリ開発の基本なのでこの機会にぜひ覚えておきましょう！

最後までお読みいただきありがとうございました！