FlutterのListViewを使ってリストビューを表示してみた

環境
実装
最後に

環境

macOS Big Sur Version 11.5.2

Flutter 2.2.3

XCode 12.5.1

実装

ListViewを使用することで配列などの複数の値を持つのもを綺麗に並べて表示させることができます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Brightness _brightness = Brightness.values[1];
    return MaterialApp(
      title: 'TODO VER2',
      theme: ThemeData(
        brightness: _brightness,
        primaryColor: Colors.blue,
      ),
      home: TodoList(),
    );
  }
}

class TodoList extends StatefulWidget {
  const TodoList({Key? key}) : super(key: key);

  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  List<String> todoList = ["hoge1", "hoge2"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello TODO VER2'),
      ),
      body: ListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              leading: IconButton(
                icon: Icon(Icons.account_circle),
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        content: Text("Hello leading ICON!"),
                      );
                    },
                  );
                },
              ),
              title: Text(todoList[index]),
              subtitle:
                  Text("subtitle is too longer!!! but no problem!!!!! ^ 0 ^"),
              isThreeLine: true,
              // dense: true,
              trailing: IconButton(
                icon: Icon(Icons.align_horizontal_right_rounded),
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        content: Text("Hello trailing ICON!"),
                      );
                    },
                  );
                },
              ),
              tileColor: Colors.redAccent,
            ),
          );
        },
      ),
    );
  }
}

ListViewウィジェットでは必須のプロパティ値としてitemCount, itemBuilderを持ちます。

一つは表示したいリストビューの長さ、二つはリストビューを描画するものです。

二つ目の方は引数におなじみのcontextと配列のインデックス値を扱うindexを持ち、返り値としてウィジェットを返してあげます。

この二つだけで最小実装することでリストビューはできますが、まあ味気ないです笑

ということで、今回定義されたリストビュー内のウィジェットであるListTileウィジェットのプロパティ値を変更してさまざまなカスタマイズをしていきます。

次はそれらを見ていきます。

leadingプロパティ

まずはleadingプロパティです。

下図の黄色枠の部分です。

leading: IconButton(
  icon: Icon(Icons.account_circle),
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          content: Text("Hello leading ICON!"),
        );
      },
    );
  },
),

ListTileの左側にIconやButtonをつけることができます。

こちらのソースではIconButtonを設定しており、クリックした時の動作をonPressedにかいてダイアログを出力させるようにしています。

title, subtitleプロパティ

次にタイトル系に関してで、黄色枠で示している箇所です。

title: Text(todoList[index]),
subtitle:
    Text("subtitle is too longer!!! but no problem!!!!! ^ 0 ^"),
isThreeLine: true,

タイトル、サブタイトルにてListTileに文字を入力することができます。

また、isThreeLineをTrueにすることでサブタイトルが長くなってしまったときに、三行目に自動で改行してくれます。

trailingプロパティ

最後にListTileの右側にあるボタンtrailingです。

              trailing: IconButton(
                icon: Icon(Icons.align_horizontal_right_rounded),
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        content: Text("Hello trailing ICON!"),
                      );
                    },
                  );
                },
              ),

こちらも押下時にダイアログを出力します。