リスト表示を作成

ListViewというコンストラクタを使用するとリスト表示を作成できる。

ListView( // ul
  children: const <Widget>[
    ListTile( // li
      title: Text('タイトル文字のみ'),
    ),
    ListTile(
      leading: Icon(Icons.map), // 先頭に来るアイコン
      title: Text('タイトル文字'),
      subtitle: Text('サブタイトル文字'),
      trailing: Icon(Icons.more_vert), // 末尾に来るアイコン wrap(spacing: 【アイコン同士の余白】,children: [Icon(),Icon()] /) で複数使うことも可能
    ),
  ],
),

chatGPTが作ったサンプルソース

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic List Example'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

Flutterのルーティングシステム

ルーティングシステムとは

画面遷移のこと

導入方法

遷移先の.dartファイルを作成する。例ではdetail_page.dartとした。

 // detail_page.dart
 import 'package:flutter/material.dart';
 class DetailPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('Detail Page'),
       ),
       body: Center(
         child: ElevatedButton(
           onPressed: () {
             Navigator.pop(context); // 前の画面に戻る
           },
           child: Text('戻る'),
         ),
       ),
     );
   }
 }

Navigatorで遷移先を指定
例はボタンを押して遷移

 child: ElevatedButton(
   onPressed: () {
     Navigator.push(
       context,
       MaterialPageRoute(builder: (context) => DetailPage()),
     );
   },
   child: Text('Go to Detail Page'),
 ),

ルートを設定
```
import 'detail_page.dart';
```

参考

公式

list

例が多くておすすめ

ルーティング

Zenn

list