如何在底部导航中使用抽屉,这将在底部从底部展开底部导航栏

时间:2020-08-18 12:42:59

标签: flutter dart

嗨,我想以底部导航栏从下方弹出的方式实现底部导航栏的抽屉。我已经实现了一些功能,但问题是抽屉从左侧打开了

以下是相关代码:

    class _LiveTvHomePageState extends State<LiveTvHomePage> {
      
      GlobalKey<ScaffoldState> _drawerKey = GlobalKey<ScaffoldState>();
      int _selectedIndex = 0;

       void _onItemTapped(int index) {
        index == 4
            ? _drawerKey.currentState.openDrawer()
            : setState((){
          _selectedIndex = index;
    
        });
      }

 @override
  Widget build(BuildContext context) {
    List<Widget> wdgs_option = [
      HomePageForBottomNavigator(),
      MoviesPageForBottomNavigator(),
      TvSHowsPageForBottomNavigator(),
      NewsForBottomNavigator(),];
      return Scaffold(
      key: _drawerKey,
     bottomNavigationBar: BottomNavigationBar(

        backgroundColor: Colors.black,

        showUnselectedLabels: true,

        currentIndex: _selectedIndex,
        fixedColor: Colors.amber[800],


        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[

          BottomNavigationBarItem(
            backgroundColor: Colors.black,
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.video_call),
            title: Text(
              'Movies',

            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.live_tv),
            title: Text(
              'Tv shows',

            ),
          ),

          BottomNavigationBarItem(
            icon: Icon(Icons.music_video),
            title: Text(
              'Music',

            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.dehaze),
            title: Text(
              'More',

            ),
          ),


        ],

      ),

What I am getting

我真正想要的是:you can see the bottom Navigation bar expands from below to show all the menu items

<<<<<< ---------编辑1 ----------- >>>>>>

对于不了解您的人可以观看此视频https://youtu.be/dTaV2HawHk4

0 个答案:

没有答案