【Flutter】リスト表示とルーティング

chatGPT に立ててもらったスケジュールに準じてFlutterの状態管理を勉強。

Day 6: リスト表示とルーティング

• リスト表示を作成する方法を学ぶ
• Flutterのルーティングシステムを理解する

リスト表示を作成

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のルーティングシステム

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

画面遷移のこと

導入方法

1. 遷移先の.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('戻る'),
            ),
          ),
        );
      }
    }
   

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

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

3. ルートを設定

   import 'detail_page.dart';
   

参考

公式

list

例が多くておすすめ

ルーティング

Zenn

list