作って学ぶ、Flutterアプリ開発〜TODOアプリをもっと便利に〜

2024年1月22日 14:50

はじめに

この記事は下記２件の続きです。
先にこちらの記事を読んでアプリを作っていただけるとスムーズかと思います。
ざくっと今回はListViewについて書きたいのでListViewについてだけ知りたい方は下記２件すっとばしてみていただいても大丈夫です！
では、さっそくアプリ作っていきましょう。

前回の続き

さて、みなさんのアプリはおそらくこうなっているんじゃないでしょうか？
前回から何かいじってみましたでしょうか？
私は何もいじってないのでこの状態です。

これでは１つ問題があります。
なんだと思いますか？
もうお気づきの方もいらっしゃるかもしれません。
ここに沢山TODOを追加していった時に問題は起こります。

このように黄色と黒の斜線が出ていますね。
これは画面が溢れてしまっているという状況です。
キーボードが出た時にもこの斜線が見えていますね。
キーボードの出現によって画面が上に押し上げられ、UIの溢れが起こってしまいました。
それではこれを簡単に直してみましょう。

      body: SingleChildScrollView( //TODO: これを追加
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: _todoList
              .map((e) => ListTile(
                    title: Text(e),
                    trailing: Checkbox(
                      value: false,
                      onChanged: (bool? value) {},
                    ),
                  ))
              .toList(),
        ),
      ),

Columnという縦に要素を並べていくWidgetの外側にSingleChildScrollViewを追加しました。
SingleChildScrollViewというのはお察しの通り、スクロールする事のできるWidgetです。
簡単なViewであればこれでスクロールさせてあげる事ができます。

しかし、もう一押しいい感じにしてみましょう。
このTODOリストのように、どれくらいリストが続くかわからない場合にはListViewを使うといい感じになります！

      body: ListView.builder(
        itemCount: _todoList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_todoList[index]),
            trailing: Checkbox(
              value: false,
              onChanged: (bool? value) {},
            ),
          );
        },
      ),

こうです！
見た目はかわらないのですが、ListView.builder()を使うと見えているところだけViewを作ってくれるのでエコなんですよ。
それにSingleChildScrollViewとColumunの組み合わせよりコードが完結でわかりやすいと思いませんか？
これは好みや慣れですかね。
時と場合によって使い分けていけると一番いいのですけどね。

次回予告

さて、お気づきかと思いますが、私が貼ったアプリの画像の上から２番目のTODOが空になっていますね。
こういう空のデータは表示させたくないですよね。
次回は空のTODOを登録できなくしてみたいと思います！
ここまで読んでくださってありがとうございます。
では、また次回宜しくお願い致します。