[Flutter] push Named로 밑에 고정된 내비게이션 표시줄 만들기

개요

이루어지다

import 'package:flutter/material.dart';

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

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

routes

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

아래쪽 탐색 모음

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);

  @override
  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),

import 'package:flutter/material.dart';

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

  static const path = '/top';

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