0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Flutterのnamed routesの実装

Posted at

はじめに

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」を選択して、新しいプロジェクトを作成します。
image.png

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

名前を適当につけてfinish。プロジェクト名はスネークケースでつける決まりがあるので注意です。
image.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

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

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

Animation.gif

これで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へ'),
        ),
      ),
    );
  }
}

Animation2.gif

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

まとめ

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

Git

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?