如何在导航时使用提供程序来保持页面状态(Flutter)

时间:2020-01-06 05:54:35

标签: flutter dart

对于状态管理方面的动静和超级菜鸟我还是很陌生。

我正在尝试制作一个在BottomBar中具有5个选项卡的应用程序,每个选项卡中都有多个导航页面。当前,如果我尝试从主页之一导航到其子页面,则AppBar和Bottombar消失。以下是我当前主页的代码。该代码表示​​我想在应用程序的每个页面中显示的内容。

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

int currentTab = 0; // to keep track of active tab index
final List<Widget> screens = [
  Feed(key: PageStorageKey('Feed'),),
  Insights(key: PageStorageKey('Insights'),),
  Data(key: PageStorageKey('Data'),),
  Profile(key: PageStorageKey('Profile'),),
  ZPart(key: PageStorageKey('Zpart'),),
];
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = Feed();

@override
Widget build(BuildContext context) {
  return Scaffold(

    appBar: AppBar(
      centerTitle: true,
      iconTheme: IconThemeData(color: Colors.black),
      backgroundColor: Colors.white,
      title: Text(
        'Zecide',
        style: TextStyle(
          fontFamily: "Raleway-Black.ttf",
          fontSize: 23.0,
          color: Color(0xFF3F5EFB),
          letterSpacing: 2.0,
          fontWeight: FontWeight.w800,
        ),
      ),
      actions: <Widget>[
        Padding(
          padding: const EdgeInsets.all(2.0),
          child: IconButton(
            icon: Icon(Icons.search),
          onPressed: (){

          },),
        ),
        Padding(
          padding: const EdgeInsets.all(2.0),
          child: IconButton(icon: Icon(Icons.notifications, color: Colors.blueAccent),
          onPressed: (){

          },),
        )
      ],
    ),

    ////// Drawer ///////

    drawer: Drawer(
      elevation: 5,
      child: ListView(
        children: <Widget>[
          DrawerHeader(
            child: Text('Siddharth Singh', style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700, color: Colors.white),),
            decoration: BoxDecoration(color: Colors.blueAccent,),
          ),
          ListTile(title: Text('Settings'),),
          ListTile(title: Text('Account Details'),),
          ListTile(title: Text('Logout'),),
          ListTile(title: Text('Version'), subtitle: Text('Version 1.0 Beta'),),
        ],
      ),
    ),
    body: PageStorage(
      child: currentScreen,
      bucket: bucket,
    ),
///// Below is bottombar ( Kinda lengthy, you can skip if you want from here) //

floatingActionButton: FloatingActionButton(
      backgroundColor: Colors.white,
      child: Container(
        height: 50.0,
        width: 50.0,
        child: Image.asset("assets/logo.png"),
      ),
      onPressed: () {
        setState(() {
          currentScreen = ZPart();
          currentTab = 69;
        });
      },
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 10,
      child: Container(
        height: 60,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                MaterialButton(
                  minWidth: 40,
                  onPressed: () {
                    setState(() {
                      currentScreen =
                          Feed(); // if user taps on this dashboard tab will be active
                      currentTab = 0;
                    });
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        FontAwesomeIcons.newspaper,
                        color: currentTab == 0 ? Colors.blueAccent : Colors.grey,
                      ),
                      Text(
                        'Feed',
                        style: TextStyle(
                          color: currentTab == 0 ? Colors.black87 : Colors.grey,
                          fontFamily: "Quicksand-Light",
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 10.0,),
                MaterialButton(
                  minWidth: 40,
                  onPressed: () {
                    setState(() {
                      currentScreen =
                          Insights(); // if user taps on this dashboard tab will be active
                      currentTab = 1;
                    });
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        FontAwesomeIcons.chartBar,
                        color: currentTab == 1 ? Colors.blueAccent : Colors.grey,
                      ),
                      Text(
                        'Insights',
                        style: TextStyle(
                          color: currentTab == 1 ? Colors.black87 : Colors.grey,
                          fontFamily: "Quicksand-Light",
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),

            // Right Tab bar icons

            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                MaterialButton(
                  minWidth: 40,
                  onPressed: () {
                    setState(() {
                      currentScreen =
                          Data(); // if user taps on this dashboard tab will be active
                      currentTab = 2;
                    });
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.pie_chart_outlined,
                        color: currentTab == 2 ? Colors.blueAccent : Colors.grey,
                      ),
                      Text(
                        'Data',
                        style: TextStyle(
                          color: currentTab == 2 ? Colors.black87 : Colors.grey,
                          fontFamily: "Quicksand-Light",
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 10.0,),
                MaterialButton(
                  minWidth: 40,
                  onPressed: () {
                    setState(() {
                      currentScreen =
                          Profile(); // if user taps on this dashboard tab will be active
                      currentTab = 3;
                    });
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        FontAwesomeIcons.user,
                        color: currentTab == 3 ? Colors.blueAccent : Colors.grey,
                      ),
                      Text(
                        'Profile',
                        style: TextStyle(
                          color: currentTab == 3 ? Colors.black87 : Colors.grey,
                          fontFamily: "Quicksand-Light",
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                )
              ],
            )

          ],
        ),
      ),
    ),
  );
}
}

尽管我在代码中使用了PageStorage,但是我对此并不满意。在保持状态的同时导航到子页面似乎令人困惑。根据我目前的理解,我认为提供者可以解决所有这些问题。我已经看过提供程序的教程,但是仍然缺乏解决此特定问题的清晰性。

请就我如何改善和解决此问题发表评论,谢谢您的宝贵时间!

我要附加应用Home screen的图片

0 个答案:

没有答案