Flutterで画面遷移をする際、Navigation利用するのが一般的な画面遷移があり、デフォルトだと右へ右へのページ間移動しているような画面遷移になります。

画面に一覧があって、それを選択したら詳細表示するサンプルを作り、そのコード例に従い、説明していきます。

全体の表示例(Flutter)

以降、コード例です。

// Flutterのコード
// インポートとか省略

// MyAppは、mainで生成されています。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      // debugShowCheckedModeBanner: false, // false:デバッグバナーをつけない
      home: const HomePage(),
      routes: {
        '/details' : (context) => const DetailsPage(),
      },
    );
  }
}

MyApp では、Navigation のルートとなる画面として、HomePage を設定しています。

routes に 「/details」というキーワードを設定しておりに、画面制御でキーワード検知したら、 DetailsPage へ画面遷移することを表しています。

// Flutterのコード
// インポートとか省略

// Personクラス、 mockPersonsデータは、前回と同じ内容です。

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text(
          'Pick a person',  // タイトル
        ),
      ),
      child: Material(
        child: ListView.builder(
          itemCount: mockPersons.length,
          itemBuilder: (context, index) {
       &nbs