使標簽欄在 Flutter 應用程序中始終可見

Question

標簽欄需要在所有屏幕中可見。 但是現在當我推動任何屏幕時，它都會被隱藏。

我創建了一個如下所示的標簽欄。

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

問題

當用戶在編輯個人資料屏幕上時，標簽欄會隱藏並且不可見。

有什么方法可以在所有屏幕中顯示標簽欄嗎？

Answer 1

試試CupertinoTabView 。 這有自己的導航器和狀態歷史記錄，可幫助您推送此類中的路線

https://api.flutter.dev/flutter/cupertino/CupertinoTabView-class.html