新しい画面を開く

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 18/33。

アプリには複数の画面があります。リスト、次に項目の詳細、そして設定ページです。Flutterでは画面はウィジェットで、通常は独自のクラスにあるScaffoldです。

Navigatorは、カードの山のように画面をスタックに保持します。一番上にある画面が表示されます。Navigator.pushは新しい画面を一番上に追加します。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRouteは、スマートフォンと同じように新しい画面をスライドさせて表示します。そのbuilderは、表示する画面を返す関数です。

contextは、ウィジェットツリー内のどこにいるかをNavigatorに伝えます。そのため、HomeScreenは独立したクラスとしてMaterialAppの内側にあります。そのcontextから、MaterialAppが作成するナビゲーターを見つけられるからです。

チャレンジ

簡単

About this app ボタンはまだ何もしません。Navigator.push を使って AboutScreen を開くようにしてください。

自分で試してみよう

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}