ここの記事で、下部のナビゲーション バーのアウトラインを使用して複数のスタックを作成する方法を使用しています。
それはすべてうまくいきますが、方法に気付いていないテクニックがいくつかあるため、アプリでナビゲートする方法を見つけるのに苦労しています.
フィードに戻るボタンがあるプロファイル用の画面を作成しようとしています。tab_navigator でいくつかの凝った処理が行われているため、これを行う方法がわかりません。誰でも助けることができますか?
タブ ナビゲーターのコードは次のとおりです。
import 'package:flutter/material.dart';
import 'package:highline_app/bottom_navigation.dart';
import 'package:highline_app/color_detail_page.dart';
import 'package:highline_app/colors_list_page.dart';
import 'package:highline_app/pages/feed.dart';
class TabNavigatorRoutes {
static const String root = '/';
static const String detail = '/detail';
static const String feed = '/feed';
static const String profile = '/profile';
}
class TabNavigator extends StatelessWidget {
TabNavigator({this.navigatorKey, this.tabItem});
final GlobalKey<NavigatorState> navigatorKey;
final TabItem tabItem;
void _push(BuildContext context, {int materialIndex: 500}) {
var routeBuilders = _routeBuilders(context, materialIndex: materialIndex);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => routeBuilders[TabNavigatorRoutes.detail](context),
),
);
}
Map<String, WidgetBuilder> _routeBuilders(BuildContext context,
{int materialIndex: 500}) {
return {
TabNavigatorRoutes.feed: (context) => NewsFeed(),
TabNavigatorRoutes.root: (context) => ColorsListPage(
color: activeTabColor[tabItem],
title: tabName[tabItem],
onPush: (materialIndex) =>
_push(context, materialIndex: materialIndex),
),
TabNavigatorRoutes.detail: (context) => ColorDetailPage(
color: activeTabColor[tabItem],
title: tabName[tabItem],
materialIndex: materialIndex,
),
};
}
@override
Widget build(BuildContext context) {
final routeBuilders = _routeBuilders(context);
return Navigator(
key: navigatorKey,
initialRoute: TabNavigatorRoutes.root,
onGenerateRoute: (routeSettings) {
return MaterialPageRoute(
builder: (context) => routeBuilders[routeSettings.name](context),
);
},
);
}
}