本日はDartでのListViewの書き方を勉強していきます。
こちらはSwiftでいうTableViewの機能を扱うことができます。

1つ前の記事でListViewについて少し触ったのですが、プロパティでTitleとSubTitleにメッセージを含ませたのですが、もしもCustomしたいとなった時、どのように書いたらいいのか？わからなかったので、作成してみました。


main.dart

import 'package:flutter/material.dart';



void main() {

  runApp(MyApp());

}



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'CustomListViewのテスト',

      home: Scaffold(

        appBar: AppBar(

          title: Text('Flutter Custom ListView Example'),

        ),

        body: CustomListView(),

      ),

    );

  }

}



class CustomListView extends StatelessWidget {

  // サンプルデータのリストを生成

  final List<String> items = List<String>.generate(20, (i) => "$i");



  @override

  Widget build(BuildContext context) {

    return ListView.builder(

      // リストアイテムの数を指定

      itemCount: items.length,

      // 各リストアイテムのビルド方法を定義

      itemBuilder: (context, index) {

        return CustomListItem(item: items[index]);

      },

    );

  }

}



class CustomListItem extends StatefulWidget {

  final String item;



  CustomListItem({required this.item});



  @override

  _CustomListItemState createState() => _CustomListItemState();

}



class _CustomListItemState extends State<CustomListItem> {

  // いいねボタンの状態を保持する変数

  bool isLiked = false;

  // よくないねボタンの状態を保持する変数

  bool isDisliked = false;

  // スイッチの状態を保持する変数

  bool isSwitched = false;



  @override

  Widget build(BuildContext context) {

    return Card(

      child: Padding(

        padding: const EdgeInsets.all(16.0),

        // カード内に要素を縦に並べる

        child: Column(

          crossAxisAlignment: CrossAxisAlignment.start,

          children: [ //←■並べたい要素を括るchildren -----------------------

            // アイテムのタイトル

            Text(

              'TextでTitle ${widget.item}(Titleじゃないよ)',

              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),

            ),

            SizedBox(height: 8), // スペースを追加

            // アイテムの説明文

            Text('Textで本文 ${widget.item}.(SubTitleじゃないよ)'),

            SizedBox(height: 8), // スペースを追加

            // ■■■いいねボタンとスイッチを横に並べる

            Row(

              mainAxisAlignment: MainAxisAlignment.spaceBetween,

              children: [

                // ■いいねボタンとよくないねボタンを含む行

                Row(

                  children: [ //←■並べたい要素を括るchildren --------------

                    // いいねボタン

                    ElevatedButton(

                      onPressed: () {

                        setState(() {

                          // いいねボタンが押されたときに状態を変更

                          isLiked = !isLiked;

                          // よくないねボタンの状態をリセット

                          if (isLiked) isDisliked = false;

                        });

                      },

                      // 状態に応じてボタンのテキストを変更

                      child: Text(isLiked ? 'Liked!' : 'Like'),

                    ),

                    SizedBox(width: 8), // ボタン間のスペースを追加

                    // よくないねボタン

                    ElevatedButton(

                      onPressed: () {

                        setState(() {

                          // よくないねボタンが押されたときに状態を変更

                          isDisliked = !isDisliked;

                          // いいねボタンの状態をリセット

                          if (isDisliked) isLiked = false;

                        });

                      },

                      // 状態に応じてボタンのテキストを変更

                      child: Text(isDisliked ? 'Disliked!' : 'Dislike'),

                    ),

                  ], // Row childlen ここまで-----------------------------

                ),

                // ■ラベルとスイッチを含む行

                Row(

                  children: [ //←■並べたい要素を括るchildren ---------------

                    Text('ラベルです:'),

                    Switch(

                      // スイッチの状態を設定

                      value: isSwitched,

                      onChanged: (value) {

                        setState(() {

                          // スイッチが切り替えられたときに状態を変更

                          isSwitched = value;

                        });

                      },

                    ),

                  ], // Row childlen ここまで-----------------------------

                ),

              ],

            ),

          ], // Column childlen ここまで----------------------------------

        ),

      ),

    );

  }

}

実行結果


RowもColumnも並べたい要素を括る時はchildlen[]で括る！！！
また1つ勉強になった！！！