作って学ぶFlutterアプリ開発〜TODOアプリに色をつけよう〜

はじめに

こんにちは。
この記事を読んでくださっている方は、アプリ開発に興味がある方かなと思います。
この記事の内容は前回のこちらの記事の続きものになります。

先にこちらの記事を読んでいただき、アプリ作成してみてください！
今回は前回作ったアプリのデザインを変更してちょっとリッチなUIにしてきたいと思います！

---

flutter

前回作ったTODOアプリのUIはこんな感じですね。
これではちょっと味気ないのでちょっとデザインを変えてみましょう。

---

まずは画面のタイトルを変更してみましょう。

      home: const MyHomePage(title: 'Flutter Demo Home Page'),

19行目付近にこんなコードがあると思います。
ここの文字を変更してみます。
「Flutter Demo Home Page」-> 「TODOリスト」に変更します。

flutter

画面のタイトルが変わりましたね。
次に、このタイトルの横にアイコンを表示してみましょう。
46行目付近にこんなコードがあると思います。

    appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),

このAppBarというのが画面のヘッダのWidgetです。
これをこう変更してみましょう。

    appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        leading: const Icon(Icons.edit),
      ),

すると、タイトルの横に鉛筆のアイコンが表示されたかなと思います。

flutter

Icons.editのところを自由に変えて楽しんでみてください。
Icons.まで打つと候補が色々出てくるかと思います。
もしくは、このページから使いたいアイコンを探してみてください。
IconsにはFlutter標準で使えるアイコンが色々入っています。
この辺をうまく使って素敵なアプリを作ってみてください。

Icons class - material library - Dart API

---

次に、TODOのリストをもう少しいい感じにしてみましょう。
53行目あたりにこんなコードがあるかと思います。

        children: _todoList.map((e) => Text(e)).toList(),

今、リストとして表示されているのはText(e)の部分です。
eには入力した文字列が入っています。
このText(e)の部分を変更してみましょう。

        children: _todoList.map((e) => ListTile(
          title: Text(e),
        )).toList(),

ListTail()というWidgetを使ってみましょう。

flutter

いい感じの隙間ができましたね。
さらにListTail()をこうすると、ほら。

ListTile(
　　　　title: Text(e),
　　　　trailing: Checkbox(
　　　　　value: false,
　　　　　onChanged: (bool? value) {},
　　　　),
)

flutter

TODOアプリっぽくなってきましたね。

---

ここまでできましたでしょうか？
色々なWidgetがあるので、興味がある方は色々いじってみると面白いと思います。
なんとなくWidgetのことがわかってきた感じですかね？
次回はもうちょっとアプリとしていい感じにしていきたいと思います。