Flutter入門5_リスト作成

Flutter関連の投稿です。

備忘録として使用する予定ですが
皆さんの解決策にもなれば幸いです。
じゃんじゃん投稿してます！！笑

今回はFlutterのリスト作成に関して記載します。

目次
-完成イメージ
-1.構成
-2.リスト作成①_first_page.dartの整理
-3.おまけ　リスト作成_Culumnのようなコードでリスト作成
-4.リスト作成②_簡単なListViewを作成する
-5.リスト作成③_フォントサイズ・空白・色付けをする
-6.リスト作成④_リストを線で区切る・文字から数字に変える
-7.全体コード
-参考文献
-最後に

完成イメージ

・前回の記事からファースト画面にリストを作成する
　※下記前回記事
　　今回は前回記事を参考にしなくも可

・リストごとにラインも入れる
・リスト作成時にスクロール機能も付けるようにする

1.構成

・first_page.dartのコードを整理をする
・

2.リスト作成①_first_page.dartの整理

・first_page.dartの不要Widgetを削除する

first_page.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text('リスト'),
      ),
      body: Container(),
    );
  }
}

3.おまけ　リスト作成_Culumnのようなコードリスト作成

完成イメージから少し逸れますが
違う記載方法もあるよということで先におまけを記載します。
※基本はこの後に説明する記載方法が多いようです。
・bodyにListView Widgetを記載する
・ListView Widgetの中にContainerを入れ色や高さなどを設定する

first_page.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text('リスト'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(8),
        children: <Widget>[
          Container(
            height: 50,
            color: Colors.amber[600],
            child: const Center(child: Text('Entry A')),
          ),
          Container(
            height: 50,
            color: Colors.amber[500],
            child: const Center(child: Text('Entry B')),
          ),
          Container(
            height: 50,
            color: Colors.amber[100],
            child: const Center(child: Text('Entry C')),
          ),
        ],
      ),
    );
  }
}

上記のContainerを複数個付け足すことで下記の動画のように表示される
ListViewはCoulmnと違い
リストが増えるとスクロール機能を自動で付けてくれる

4.リスト作成②_簡単なListViewを作成する

・変数を定義する
・bodyにListView.builder Widgetを入れる
　こちらもスクロール機能が自動で付いている
　※itemCount ＝　0から始まる配列の数を表す　
　　　　　　　　　entries.lengthは配列の長さに合わせている
　　　　　　　　　例：itemCount: 0の場合→Aのみリスト表示される
　　　　　　　　　　　 itemCount: 2の場合→A・B・Cがリスト表示される
　　　　　　　　 　　　itemCount: entries.lengthの場合　
　　　　　　　　　　　　　　　　　　→A・B・C・daichi・yamadaがリスト表示される

　　itemBuilder＝　itemCountの数だけ実行される
　　　　　　　　　Text内に変数${entries[index]}を入れてList entriesを順番に
　　　　　　　　　呼び出している

first_page.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  final List<String> entries = <String>['A', 'B', 'C', 'daichi', 'yamada'];

first_page.dart

      body: ListView.builder(
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Center(child: Text('Entry ${entries[index]}'));
          }),

5.リスト作成③_フォントサイズ・空白・色付けをする

・フォントサイズを入れる
・空白を入れる
・色付けをする

first_page.dart

      body: ListView.builder(
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Center(
              child: Container(
                color: Colors.yellow,//←色付け
                padding: const EdgeInsets.all(8.0),//←空白
                child: Text(
                  'Entry ${entries[index]}',
                  style: TextStyle(fontSize: 30),//←フォントサイズ
                ),
              ),
            );
          }),

6.リスト作成④_リストを線で区切る・文字から数字に変える

・リストを区切るためにbody: ListView.separated()に変更する
・separatorBuilder: (BuildContext context, int index) 〜を加える
・リスト内のEntryを削除
・変数をint型にし、リストを数値に変更する

first_page.dart

      body: ListView.separated( //←ListView.separatedへ変更
        itemCount: entries.length,
        itemBuilder: (BuildContext context, int index) {
          return Center(
            child: Container(
              color: Colors.yellow,
              padding: const EdgeInsets.all(8.0),
              child: Text(
                ' ${entries[index]}',//←Entryの削除
                style: TextStyle(fontSize: 30),
              ),
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) => const Divider(
          color: Colors.black,//←separatorBuilder: 〜の追加
        ),
      ),

first_page.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  final List<int> entries = [0, 1, 2, 9, 9];//←int型へ変更し、リストを数値に変更

これで完成！！！

7.全体コード

first_page.dart

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  final List<int> entries = [0, 1, 2, 9, 9];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text('リスト'),
      ),
      body: ListView.separated(
        itemCount: entries.length,
        itemBuilder: (BuildContext context, int index) {
          return Center(
            child: Container(
              color: Colors.yellow,
              padding: const EdgeInsets.all(8.0),
              child: Text(
                ' ${entries[index]}',
                style: TextStyle(fontSize: 30),
              ),
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) => const Divider(
          color: Colors.black,
        ),
      ),
    );
  }
}

参考文献

Flutter大学. 「Flutter超入門2022】⑤リストを作る方法【Flutter3.0】」.　YouTube.　2022/06,https://www.youtube.com/watch?v=BMREPjjgXjE,
（参照 2024-06-22）
Flutter. 「ListView class」. 更新日不明,
https://api.flutter.dev/flutter/widgets/ListView-class.html, (参照 2024-06-22)

最後に

・indexが入ってきたので若干コードらしくなって来たかと思いました。
・自動でスクロール機能もあるので便利！
・おまけと比較しても説明したやり方の方が開発速度も早いし
　リファクタリングに使用できそうです！！
・次は今までの基本の復習に入ろうと思います。