Zenn
ぽちぽちのつどいPublicationへの投稿
🐕

【Flutter】初心者に戻ってFlutter再挑戦~単語帳アプリを作る~

tolto
に公開
Flutter
初心者
Dart
tech

ぽちぽちのつどいGW Advent(?) Calendar１２日目の記事です！

アドベントカレンダーも最終日ということで今日は前からやりたかった再入門します。
Flutterを初めて１年が経過しこの１年いろいろありましたFlutterを通して素敵な出会いもあったわけですがこのぽちぽちにも今年度は多くの方が入ってくださったということで私も初心に帰って再入門したいと思います。
今回作るアプリは単語帳アプリです。
難しいことは考えず初心者らしい簡単なアプリしたいと思います。

単語帳アプリを作ろう！

準備

画面設計

まずは画面ですが最小で作りたいので英語の単語リストのみの１画面で単語をおすとダイアログで日本語が見れるという画面設計にします。

データ設計

データは日本語と英語の二つが必要なのですがMapでもいいですがGPTに相談したところ補助クラスを作ると良いことがわかったので補助クラスを作成します。

data.dart
class Word {
  final String english;
  final String japanese;
  Word(this.english, this.japanese);
}

プロジェクトの作成

プロジェクトの作成はflutterコマンドのcreateを使用するかAndroid StudioでGUIで作成することもできる。

flutter create words_list

プロジェクトの作成が完了したらエディタで確認をします。
カウンターアプリが起動すればプロジェクトは完成です。

実装

UI作成

まずは画面を作成します。ListView.bulderを使って実装します。
まずはAppleを10個表示してタップできる状態にしておきます。

main.dart
return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Column(
            children: [
              ListTile(
                title: Text('Apple'),
                onTap: () {},
              ),
              const Divider(),
            ],
          );
        },
      ),
    );

次にタップした時にダイアログを表示します。

ダイアログを表示するためのクラスをdialog.dartを作成して書いていきます。
引数として日本語を渡します。

dialog.dart
class ShowWordDialog extends StatelessWidget {
  final String japanese;
  const ShowWordDialog({
    super.key,
    required this.japanese,
  });

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: Text(
        japanese,
        style: const TextStyle(fontSize: 24),
      ),
      actions: [
        GestureDetector(
          child: const Text('完了'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ],
    );
  }
}

onTapの中にshowDialogを書いてShowWordDialogを呼び出すことでダイアログが表示されます。

main.dart
onTap: () {
  showDialog<void>(
    context: context,
    builder: (_) {
      return const ShowWordDialog(japanese: 'りんご');
    },
  );
},

これでUIの構築は完了しました。次に単語リストを作成します。

データ作成と画面の変更

設計段階で作成した補助クラスのWordクラスをdata.dartを作成してその中に貼り付けてList<Word>を作成します。
今回は手間を省くためにAIにA~Zまでの単語リストを生成しました。

data.dart
final List<Word> wordList = [
  Word('Apple', 'りんご'),
  Word('Book', '本'),
  Word('Cat', '猫'),
//-----------
  Word('Zoo', '動物園'),
];

ここまできたら9割完成といってもいいでしょう。
最後に ListView.builderを書き換えます。

main.dart
itemCount: wordList.length,
// -----------
onTap: () {
  showDialog<void>(
    context: context,
    builder: (_) {
      return ShowWordDialog(
        japanese: wordList[index].japanese,
      );
    },
  );
},



以上で単語帳アプリは完成です。

最後に

このアプリは最小構成で完結するシンプルな単語帳アプリですが拡張性も十分にあります。
たとえば自分の好きな単語を登録できるようにしたり、日本語と英語を入力して sqflite や Firestore に保存することで自分だけの単語帳にすることもできます。
また、単語に対して「品詞」や「例文」などの情報を追加すれば学習支援アプリとしての完成度も高めることができます。
今回は状態を持たない構成にしていますが将来的に「お気に入り」などの機能を追加したい場合は、Provider などの状態管理の導入を検討してみると良いでしょう。
さらに、今後アプリを本格的にリリースしたりユーザーに使ってもらうことを想定する場合は次のような点にも配慮が必要になります。

今回作成したアプリはGitHubレポジトリとして共有しておきます。
GitHubレポジトリ：
https://github.com/pochipochi-tudoi/beginner_app

というわけで、ぽちぽちのつどいGW Advent(?) Calendar １２日目はFlutter再入門でした！

ぽちぽちのつどい
ぽちぽちのつどいPublication

大阪大学非公認アプリ開発サークル「ぽちぽちのつどい」です！

Discussion