ブラウザでFlutter！- 7 リストをカスタム。

【Flutter】リストの作り方まとめ - Qiita

いい感じのリストにする方法をまとめたいと思います。

基本のリスト

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) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutterでいこう'),
        ),
        body: const MyCustomApp(),
      ),
    );
  }
}

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

  @override
  State<MyCustomApp> createState() => _MyCustomAppState();
}

class _MyCustomAppState extends State<MyCustomApp> {
  @override
   Widget build(BuildContext context) {
    final _data = ['data1', 'data2', 'data3', 'data4', 'data5'];
    return ListView.builder(
        itemCount: _data.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(_data[index]),
          );
        });
  }
}

"@override"以降をカスタマイズしていきます。

線付きリスト

"Divider()"を使います。これで上下分けることができるのでその間に線を引く感じです。

 @override
  Widget build(BuildContext context) {
    final _data = ['data1', 'data2', 'data3', 'data4', 'data5'];
    return ListView.separated(
        itemCount: _data.length,
        separatorBuilder: (BuildContext context, int index) {
          return const Divider(
            height: 20,
            thickness: 2,
            color: Color.fromARGB(126, 21, 36, 16),
            indent: 0,
            endIndent: 0,
          );
        },
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(_data[index]),
          );
        });
  }

Divider(
　　height: 20,　　　・・・　高さ
　　thickness: 2,　　・・・線の太さ
　　color: Color.fromARGB(126, 21, 36, 16),　・・色
　　indent: 0,　　・・・　左側の書き始め
　　endIndent: 0,　・・・　右側の終了地点
);

これで線が引けます。

スワイプ削除

【Flutter】Dismissibleの使い方（リストをスライドして削除する） - Qiita

"Dismissible()"を使ってスワイプ削除できるようにします。

 @override
  Widget build(BuildContext context) {
    final _data = ['data1', 'data2', 'data3', 'data4', 'data5'];
    return ListView.builder(
        itemCount: _data.length,
        itemBuilder: (BuildContext context, int index) {
          return Dismissible(
            key: Key(_data[index]),
            background: Container(
              color: Colors.red,
            ),
            confirmDismiss: (direction) async {
              return true;
            },
            onDismissed: (direction) {
            },
            child: ListTile(
              title: Text(_data[index]),
            ),
          );
        });
  }

リストを右側からスワイプするとデータが消えます。

"Dismissible()"の主な引数は

key　　配列データのインデックスを渡しています
background　　アイテムをスワイプした時の背景を指定することができます。 "color: Colors.red" 赤い背景に設定しています。
direction　　スワイプできる方向を指定します。今回指定なし。
confirmDismiss　スワイプのアニメーションが終わったタイミングで呼ばれます。
まだWidgetが破棄されていないため、本当に処理を実行して良いか等の確認処理を入れたい時に便利です。
onDismissed　スワイプでWidgetが破棄され、アニメーションが終わったタイミングで呼ばれます。
実際のデータの削除処理などはここで行うことになります。

Flutter Dismissible Widjet スワイプでのリスト項目の削除方法