LoginSignup
1
0

More than 3 years have passed since last update.

Flutterにおけるルーティングの定義方法

Posted at

Flutterにおける、ルーティングを定義する方法を備忘録として残しておこうと思います。
また、Flutterにてルーティングを定義・管理するのは、比較的に明示的でわかりやすいと思っております。

MaterialAppの引数であるroutesにルーティングを定義する

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

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => MyApp(),
      },
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(

      ...

      )
    )
  }
}

上記コードでは、'/'にコード下側に記述しているWidgetのMyAppクラスを指定しております。

ちなみに、MaterialAppの引数であるinitialRouteで指定した値は、
アプリを開いた際に初期表示する画面を設定できます。

新たにページを作成し、ルーティングを定義する場合

下記では、pages/about_page.dartファイルを新規作成して、
ルーティングには、'/about'を指定してAboutPageクラスを登録しております。

pages/about_page.dart
import 'package:flutter/material.dart';

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(

      ...

      )
    )
  }
}
main.dart
import 'package:flutter/material.dart';
import 'package:sample/pages/about_page.dart';

void main() {
  runApp(
    MaterialApp(
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => MyApp(),
        '/about': (BuildContext context) => AboutPage(),
      },
    ),
  );
}

...

新規でページを作成してルーティングを定義したい場合は、
main.dartファイルにて、新規作成したファイルをインポートし、
ルーティングを定義している箇所に、同じように追記していくだけになります。

1
0
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
1
0