Learningift

Flutterを使ってみよう その５（画面遷移等の制御）

前回の記事の続きです。

今回は、画面遷移等の制御周りの知識を深めていきましょう。

※ 用例で比較説明したほうがわかりよいため、SwiftUIの用例で比較したいため、SwiftUIで開発したことがあることが前提の記事です

環境

　・MacOS Ventura 13.6.3
　・Xcode 15.1
　・VSCode 1.85.1
　・Flutter 3.16.5
　・Dart 3.2.3

1. ページ間移動での画面遷移

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

2. モーダルでの画面遷移

Flutterでは、Navigationを利用して、モーダルでの画面遷移があります。

 画面の下から上に画面が被さる感じの遷移です。

前段と同じく、画面に一覧があって、それを選択したら詳細表示するサンプルを作ります。

その画面遷移をモーダルに変更します。


コード例に従い、説明していきます。

全体の表示例(Flutter)


以降、コード例です。

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

// MyAppは、前回と同じ。
// また、変更箇所辺りの抜粋

class HomePage extends StatelessWidget {
  ...

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      ...
      child: Material(
        child: ListView.builder(
            ...
            return ListTile(
              ...
              onTap: () {
                // ここ修正
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailsDialogPage(
                        person: person,
                      ),
    &nbs

3. 画面での状態監視

Flutterは、 StatefulWidget ウィジェット、 State クラス を使うことで、値の状態監視ができるようになり、画面と値がリアクティブ連動し、画面更新されます。

SwiftUIも同様に画面と値がリアクティブ連動し、画面更新されます。

説明のため、カウントアップする簡単なサンプルを用意します。

FlutterとSwiftUIのコード例を下記に記載します。

Flutterのコード例

// Flutterのコード
// インポートとか省略
class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _counter = 0;
  
  @override
  Widget build(BuildContext context) {
     return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$_counter'),
            CupertinoButton(
              onPressed: () {
                setState(() {
                  _counter++;
                });
              },
              child: const Text('+'),
            ),
          ],
        ),
      ),
    );
  }
}

SwiftUIのコード例

4. まとめ

今回は、画面遷移等の制御周りを中心に、SwiftUIのコード例と見比べて理解を深めるのを目的に記事を書きました。

次回も、同様にFlutter開発観点の詳細に触れてみたいと思います。

人気のタグ一覧

関連記事

カテゴリー