Flutterのnamed routesの実装

はじめに

version
参考文献　公式Document
エディタ androidstudio

結論

routing設定はこんな感じ

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const MyHomePage(),
        '/second': (context) => const SecondScreen(),
      },
    );

実際に遷移したいときは以下のようにnameを指定してください

// MyHomePageに遷移する場合
Navigator.pushNamed(context, '/');

// SecondScreenに遷移する場合、
Navigator.pushNamed(context, '/second');

前の画面に戻るとき

Navigator.pop(context);

実装しながらやってみる

アプリの新規作成

この記事のためにアプリを新規作成します。
せっかくなので手順も記載します。
※いらないようであればスキップしてください

新規作成手順

androidstudio画面上部のfileより「New Flutter Project」を選択して、新しいプロジェクトを作成します。

SDKのパスを指定してNext押下

名前を適当につけてfinish。プロジェクト名はスネークケースでつける決まりがあるので注意です。

無事なにも怒られず作れたら成功です。

main.dartの不要なコメントアウトも消しておきましょう

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

不要な処理も削除し、シンプルなアプリにします。

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('named routes'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'named routesの勉強用です',
            ),
          ],
        ),
      ),
    );
  }
}

まあこんなとこでしょう。

2つ目の画面を作成

class SecondScreen extends StatelessWidget {
  const SecondScreen ({Key? key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // TODO画面遷移を処理を記載
          },
          child: const Text('MyHomePageへ'),
        ),
      ),
    );
  }
}

routingを実装

ドキュメントに記載している実装をそれっぽく実装します。

class MyApp extends StatelessWidget {
  const MyApp({Key? key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
-     home: const MyHomePage(),
+     initialRoute: '/',
+     routes: {
+       '/': (context) => const MyHomePage(),
+       '/second': (context) => const SecondScreen(),
      },
    );
  }
}

MyHomePage→SecondScreenへ

MyHomePageにボタンを設置してSecondScreenへ画面遷移できるようにします。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('named routes'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'named routesの勉強用です',
            ),
+           ElevatedButton(onPressed: () {
+             Navigator.pushNamed(context, '/second');
+           },
+               child: Text('SecondScreenへ'))
          ],
        ),
      ),
    );
  }
}

これでOKです。
secondScreenからMyHomePageへ戻る処理も書いてみましょう。

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
+           Navigator.pop(context);
          },
          child: const Text('MyHomePageへ'),
        ),
      ),
    );
  }
}

これでOKです。
とりあえずこれさえ覚えておけば問題なさそうです。

まとめ

routingを設定することでソースコードがすっきりするのはいいですね。
入門級の内容ですが、画面遷移できてからアプリを作るのが楽しくなるので記事作りました。
ソースコードは汚いので少しきれいにしてみます。
見ていただきありがとうございました。

Git

developブランチに少しきれいにしたものを上げているので参考になれば