使标签栏在 Flutter 应用程序中始终可见

Question

The tab bar need to be visible in all the screen. But right now when I'm pushing any screen it is get hidden.

I have created a tab bar like below.

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;

 }
}

from main.dart file setting tab bar like below.

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

So user will be redirected to the HomeScreen.dart once logged in.

So on HomeMenuScreen.dart file there are some options using that user can redirect to another screen.

So when user click on edit profile screen button. User will be redirected tot he edit profile screen like below.

Navigator.of(context).push(MaterialPageRoute(builder: (context) => EditProfileScreen()));

Issue

When user is on edit profile screen, the tab bar is hidden and not getting visible.

is there any way to make visible tab bar in all the screen?

Answer 1

Try CupertinoTabView . This has a its own navigator and state history which will help you to push the routes within this class

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