Flutterラボ リリース3周年記念! プロコースが1ヶ月の料金で2ヶ月間受けられる、実質半額セール (2024年3月17日まで・先着)

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