Flutterのnamed routesの実装

# はじめに
version 
参考文献　[公式Document](https://docs.flutter.dev/cookbook/navigation/named-routes)
エディタ 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);
```


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

<details><summary>新規作成手順</summary>



androidstudio画面上部のfileより「New Flutter Project」を選択して、新しいプロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541882/29263957-4f60-c087-0f4c-9d640ea9cd7d.png)

SDKのパスを指定してNext押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541882/14dad085-b2ff-c2ba-fcfa-07d5b74760a3.png)

名前を適当につけてfinish。プロジェクト名は[スネークケース](https://e-words.jp/w/%E3%82%B9%E3%83%8D%E3%83%BC%E3%82%AF%E3%82%B1%E3%83%BC%E3%82%B9.html#:~:text=%E3%82%B9%E3%83%8D%E3%83%BC%E3%82%AF%E3%82%B1%E3%83%BC%E3%82%B9%E3%81%A8%E3%81%AF%E3%80%81%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0,%E3%81%AA%E8%A1%A8%E8%A8%98%E3%81%8C%E3%81%93%E3%82%8C%E3%81%AB%E5%BD%93%E3%81%9F%E3%82%8B%E3%80%82)でつける決まりがあるので注意です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541882/bbc4d55c-2cbb-5f10-fb91-ac3329e63419.png)

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

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の勉強用です',
            ),
          ],
        ),
      ),
    );
  }
}

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541882/b4a63c7f-ca07-0de9-3d48-3d57de0a76d6.png)

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

</details>


## 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を実装
ドキュメントに記載している実装をそれっぽく実装します。

```diff_dart
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へ画面遷移できるようにします。

```diff_dart
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へ'))
          ],
        ),
      ),
    );
  }
}

```
![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541882/8ace1d23-335b-a075-d88c-83cd84a6a2c2.gif)

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

```diff_dart
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へ'),
        ),
      ),
    );
  }
}

```
![Animation2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541882/bcf5b32e-979a-e1c8-f8d0-4314abafc884.gif)

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

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

# Git
https://github.com/yoshi-0628/named_routes_study

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

https://github.com/yoshi-0628/named_routes_study/tree/develop