0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

【Flutter】pushNamedをちょっとだけ便利に使う方法

通常の使い方

通常は、遷移する先のルート名をStringで指定します↓
ですが画面が増えて、ルーティングがもっと複雑になってくるとtypo(タイプミス)が発生しかねません。
typoがあったとしてもStringでの指定ですので、IDEは検知してくれないですね。
ビルドしたときにエラーが起きるだけです。

main.dart
import 'package:flutter/material.dart';
import 'package:qiita/first_screen.dart';
import 'package:qiita/second_screen.dart';
import 'package:qiita/third_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      initialRoute: 'first_screen', //ここはStringで指定する
      routes: {
        'first_screen': (context) => FirstScreen(), //ここも
        'second_screen': (context) => SecondScreen(), //ここも
        'third_screen': (context) => ThirdScreen(), //ここも
      },
    );
  }
}

ちょっとだけ便利な方法

↓のように、各画面でルート名を指定しておき、それを渡すようにすればtypoを防ぐことができます。

first_screen.dart
import 'package:flutter/material.dart';
import 'third_screen.dart';
import 'second_screen.dart';

class FirstScreen extends StatelessWidget {
  static const String id = 'first_screen'; //ここでルート名を指定しておく

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          child: Text('FirstScreen'),
        ),
        Container(
          child: TextButton(
            onPressed: () {
              Navigator.pushNamed(context, SecondScreen.id);
            },
            child: Text('SecondScreenに移動'),
          ),
        ),
        Container(
          child: TextButton(
            onPressed: () {
              Navigator.pushNamed(context, ThirdScreen.id);
            },
            child: Text('ThirdScreenに移動'),
          ),
        ),
      ],
    );
  }
}

main.dart
import 'package:flutter/material.dart';
import 'package:qiita/first_screen.dart';
import 'package:qiita/second_screen.dart';
import 'package:qiita/third_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      initialRoute: FirstScreen.id, //ここで打ち間違えても、IDEがミスを教えてくれる
      routes: {
        FirstScreen.id: (context) => FirstScreen(),
        SecondScreen.id: (context) => SecondScreen(),
        ThirdScreen.id: (context) => ThirdScreen(),
      },
    );
  }
}

2画面しかない場合はあんまりメリット感じないですが、画面が増えれば恩恵が大きいかも。
参考までに他の画面↓

second_screen.dart
import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {

  static const String id = 'second_screen';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text('SecondScreen'),
      ),
    );
  }
}

補足

static const はつけなくてもいいですが、その場合FirstScreen().id、SecondScreen().id、というように()が必要です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?