[英]Make Tab bar always visible in flutter app
标签栏需要在所有屏幕中可见。 但是现在当我推动任何屏幕时,它都会被隐藏。
我创建了一个如下所示的标签栏。
CustomTabbar.dart
import 'package:cfbp/Constant.dart';
import 'package:cfbp/DrawerScreen.dart';
import 'package:cfbp/EditProfileScreen.dart';
import 'package:cfbp/HomeMenuScreen.dart';
import 'package:cfbp/NotificationScreen.dart';
import 'package:cfbp/Utility/AppUtilities.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class CustomTabBar extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _CustomTabBarState();
}
}
class _CustomTabBarState extends State<CustomTabBar> with SingleTickerProviderStateMixin {
TabController _tabController;
int _currentIndex = 0;
final _scaffoldState = GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: _tabs.length);
_tabController.addListener(handleTap);
}
handleTap() {
setState(() {
_currentIndex = _tabController.index;
print("Current Index = $_currentIndex");
});
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
final _tabs = [
Tab(child: Image.asset('assets/images/home.png', fit: BoxFit.fitHeight, width: 25,),),
Tab(child: Image.asset('assets/images/profile.png', fit: BoxFit.fitWidth, width: 25),),
Tab(child: Image.asset('assets/images/notification.png', fit: BoxFit.fitWidth, width: 25,),),
];
Widget _tabBar() {
final container = Container(
color: Color(purple),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.transparent,
controller: _tabController,
tabs: _tabs,
),
);
return SafeArea(
child: container,
);
}
@override
Widget build(BuildContext context) {
TabBarView _tabBarView = TabBarView(
controller: _tabController,
physics: NeverScrollableScrollPhysics(),
children: _tabs.map((Tab tab) {
if (_currentIndex == 0) {
return HomeMenuScreen();
} else if (_currentIndex == 1) {
return EditProfileScreen(showAppBar: false);
} else {
return NotificationScreen(showAppBar: false,);
}
}).toList(),
);
final _drawer = DrawerScreen();
final _defaultTabController = DefaultTabController(
length: _tabs.length,
child: Scaffold(
key: _scaffoldState,
appBar: AppBar(
backgroundColor: Color(purple),
title: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Image.asset(
'assets/images/cfbpLogo.png',
fit: BoxFit.contain,
height: 35,
),
],
),
),
bottomNavigationBar: _tabBar(),
body: _tabBarView,
drawer: _drawer,
backgroundColor: Color(purple),
//drawerScrimColor: Color(purple),
),
);
return _defaultTabController;
}
}
来自main.dart文件设置标签栏,如下所示。
void main() {
//change status bar color
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Color(purple),
));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MaterialColor createMaterialColor(Color color) {
List strengths = <double>[.05];
Map swatch = <int, Color>{};
final int r = color.red, g = color.green, b = color.blue;
for (int i = 1; i < 10; i++) {
strengths.add(0.1 * i);
}
strengths.forEach((strength) {
final double ds = 0.5 - strength;
swatch[(strength * 1000).round()] = Color.fromRGBO(
r + ((ds < 0 ? r : (255 - r)) * ds).round(),
g + ((ds < 0 ? g : (255 - g)) * ds).round(),
b + ((ds < 0 ? b : (255 - b)) * ds).round(),
1,
);
});
return MaterialColor(color.value, swatch);
}
@override
Widget build(BuildContext context) {
final result = UserManager.getIsUserLoggedIn();
final _routes = {
'/EditProfile': (context) => EditProfileScreen(showAppBar: true),
'/Notification': (context) => NotificationScreen(showAppBar: true,),
'/Events': (context) => EventsScreen(),
'/Login': (context) => LoginScreen(),
'/ForgotPassword': (context) => ForgotPasswordScreen(),
'/CodeOfConduct': (context) => CustomWebViewScreen(codeOfConduct),
'/TrackStatus': (context) => ComplaintStatusScreen(),
'/Settings': (context) => SettingsScreen(),
};
return FutureBuilder(
future: result,
builder: (context, snapshot) {
if (snapshot.hasData) {
bool isLoggedIn = snapshot.data;
print('user loging = $isLoggedIn');
if (isLoggedIn) {
return MaterialApp(
title: 'CFBP',
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'Roboto',
primarySwatch: createMaterialColor( Color(purple)),
),
home: CustomTabBar(),
routes: _routes,
);
}
}
return MaterialApp(
title: 'CFBP',
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'Roboto',
primarySwatch: createMaterialColor(Color(purple)),
),
home: LoginScreen(),
routes: _routes,
);
},
);
}
}
因此,用户登录后将被重定向到 HomeScreen.dart。
所以在 HomeMenuScreen.dart 文件中有一些选项可以使用该用户可以重定向到另一个屏幕。
所以当用户点击编辑个人资料屏幕按钮时。 用户将被重定向到如下所示的编辑个人资料屏幕。
Navigator.of(context).push(MaterialPageRoute(builder: (context) => EditProfileScreen()));
问题
当用户在编辑个人资料屏幕上时,标签栏会隐藏并且不可见。
有什么方法可以在所有屏幕中显示标签栏吗?
试试CupertinoTabView
。 这有自己的导航器和状态历史记录,可帮助您推送此类中的路线
https://api.flutter.dev/flutter/cupertino/CupertinoTabView-class.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.