🕌

【Flutter】pushNamedで行う固定ボトムナビゲーションバーを作る

3 min read

概要

固定ボトムナビゲーションバー作成の記事は色々と探したらあるんですが、複雑で簡単に実装したいけど、なんかよくわからん。。みたいなことがあったので、色々と試行錯誤した結果 CupertinoTabBar で結構簡単に思った通りの実装ができた記事を書いていこうかなと思います。

実装

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: routes,
      home: const BottomNavigation(),
    );
  }
}

routes

route.dart
final Map<String, WidgetBuilder> routes = {
  TopPage.path: (context) => const TopPage(),
  DammyPage.path: (context) => const DammyPage(),
  LoginPage.path: (contex) => const LoginPage(),
};

ボトムナビゲーションバー

bottom_navigation.dart

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

import '/pages/top_page.dart';
import '/pages/login_page.dart';

import 'util/routes.dart';

class BottomNavigation extends StatelessWidget {
  const BottomNavigation({
    Key? key,
  }) : super(key: key);

  
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.login),
          ),
        ],
      ),
      tabBuilder: (BuildContext context, int index) {
        switch (index) {
          case 0:
            return CupertinoTabView(
              routes: routes,
              builder: (context) {
                return const CupertinoPageScaffold(
                  child: TopPage(),
                );
              },
            );
          case 1:
            return CupertinoTabView(
              routes: routes,
              builder: (context) {
                return const CupertinoPageScaffold(
                  child: LoginPage(),
                );
              },
            );
          default:
            return CupertinoTabView(
              routes: routes,
              builder: (context) {
                return const CupertinoPageScaffold(
                  child: TopPage(),
                );
              },
            );
        }
      },
    );
  }
}

遷移方法

// ナビゲーションバーを残したまま遷移
onPressed: () => Navigator.of(context).pushName(DammyPage.path),

// ナビゲーションバーを残さない遷移
onPressed: () => Navigator.of(context, rootNavigator: true,).pushNamed(DammyPage.path),
top_page.dart
import 'package:flutter/material.dart';

class TopPage extends StatelessWidget {
  const TopPage({Key? key}) : super(key: key);

  static const path = '/top';

  
  Widget build(BuildContext context) {
    return SizedBox(
      child: Center(
        child: TextButton(
          child: const Text('ナビゲーションバーを残したまま遷移'),
          onPressed: () => Navigator.of(context).pushNamed(DammyPage.path),
        ),
      ),
    );
  }
}
GitHubで編集を提案

Discussion

ログインするとコメントできます