広告

Flutterラボの

プレミアム会員になる

【Flutter WEB】ルート(routes)を設定して、アクセスしたときのURLを変更する

2021.09.29

ルートを設定することで、アプリ内で画面遷移した際に表示されるURLを変更することができます。

MaterialApp内にルートの設定を追記します。

return MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/sub': (context) => SubPage(),
  },
...

アプリを開いたときに表示するページをHomePage、切り替え先のページをSubPageとしておきます。

これに合わせて実際に表示するページを用意します。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          child: Text('subへ移動', style: TextStyle(fontSize: 50),),
          onTap: () {
            Navigator.pushNamed(context, '/sub');
          },
        ),
      )
    );
  }
}

class SubPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          child: Text('HomePageへ移動', style: TextStyle(fontSize: 50),),
          onTap: () {
            Navigator.pushNamed(context, '/');
          },
        ),
      )
    );
  }
}

文字をタップしたとき(onTap)にNavigator.pushNamedでルートを指定して画面遷移します。

これで画面遷移するとURLが切り替わります。

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)