持久底部導航欄 flutter

Question

我使用這個小部件在 flutter 中使用了底部導航欄，

如何使底部導航欄顯示在所有頁面上？

當我從抽屜中選擇一個頁面時，我可以讓它出現嗎？

請幫我，

Answer 1

You can actually achieve this with the pageview widget https://api.flutter.dev/flutter/widgets/PageView-class.html With this, you can have all the pages inside one class and build the bottom navigation bar underneath the pageview widget . 默認情況下，頁面是可滑動的，但您可以禁用它

 Scaffold( body: Container( child: Column( children: <Widget> [ PageView( physics:new NeverScrollableScrollPhysics()) controller: _controller, children: [ MyPage1(), MyPage2(), MyPage3(), ], ), googleNavBar() ] ) );

Answer 2

我可以建議您使用 flutter 內置的BottomNavigationBar小部件而不是第三方小部件。

這是我的代碼，您可以根據需要進行修改。 希望這會有所幫助。

class DashboardScreen extends StatefulWidget {
  @override
  _DashboardScreenState createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> with SingleTickerProviderStateMixin {
  final _selectedItemColor = Colors.white;
  final _unselectedItemColor = Color(0xFF828282);
  final _selectedBgColor = Color(0xFF00cde7);
  final _unselectedBgColor = Colors.transparent;
  int _currentIndex = 0;

  GlobalKey<ScaffoldState> _key = GlobalKey();

  // List of body of current screen you import/create from other dart file. 
  final List<Widget> _children = [
    HomeScreen(),
    AppointmentScreen(id: 1),
    PaymentScreen(id: 1),
    ProfileScreen(id: 1)
  ];

  // List of dynamic app bar for different page. You can also import/create app bar easily
  final List<Widget> _childAppBar = [
    HomeAppBar(),
    AppointmentAppBar(),
    PaymentAppBar(),
    ProfileAppBar()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
    debugPrint("Tapped item : $index");
  }

  Color _getBgColor(int index) =>
      _currentIndex == index ? _selectedBgColor : _unselectedBgColor;

  Color _getItemColor(int index) =>
      _currentIndex == index ? _selectedItemColor : _unselectedItemColor;

  Widget _buildIcon(IconData iconData, String text, int index) => Container(
    width: MediaQuery.of(context).size.width,
    height: kBottomNavigationBarHeight,
    child: Material(
      color: _getBgColor(index),
      child: InkWell(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Container(
                child: Column(
                  children: [
                    Icon(iconData, color: _getItemColor(index)),
                    Text(text,
                        style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500, fontFamily: 'Poppins', color: _getItemColor(index))),
                  ],
                ),
            ),
          ],
        ),
        onTap: () => _onItemTapped(index),  // function responsible for navigation on tap
      ),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        key: _key,
        appBar: _childAppBar.elementAt(_currentIndex),  // this is dynamic app bar
        body: _children.elementAt(_currentIndex),       // this is dynamic body of the current screen
        bottomNavigationBar:
        BottomNavigationBar(
          currentIndex: 0,
          type: BottomNavigationBarType.fixed,
          iconSize: 30.0,
          items: [
            BottomNavigationBarItem(
              icon: _buildIcon(Icons.home, "Home", 0), // Check this _buildIcon function above
              title: SizedBox.shrink(),
            ),
            BottomNavigationBarItem(
                icon: _buildIcon(Icons.group, "Appointment", 1),
                title: SizedBox.shrink(),
            ),
            BottomNavigationBarItem(
                icon: _buildIcon(Icons.add_circle_outline, "Make Payment", 2),
                title: SizedBox.shrink(),
            ),
            BottomNavigationBarItem(
                icon: _buildIcon( Icons.person_outline, "My Account", 3),
                title: SizedBox.shrink(),
            ),
          ]
        ),
        drawer: _currentIndex == 0 || _currentIndex == 3 ? Drawer(  // check to show drawer on particular screen
          child: ListView(
            padding: const EdgeInsets.all(0.0),
            children: <Widget>[
              UserAccountsDrawerHeader(
                  accountName: Text("Mohammad Gayasuddin"),
                  accountEmail: Text("ladla8602@gmail.com"),
                  currentAccountPicture: CircleAvatar(
                    backgroundColor: Colors.white70,
                  )),
              ListTile(
                  title: Text('Login'),
                  trailing: Icon(Icons.lock),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => LoginScreen(),
                      ),
                    );
                  }),
              ListTile(
                  title: Text('Sign Up'),
                  trailing: Icon(Icons.add_circle_outline),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => RegisterScreen(),
                      ),
                    );
                  })
            ],
          ),
        ) : PreferredSize(
          child: Container(),
          preferredSize: Size(0.0, 0.0),
        ),
      ),
    );
  }
}