Navigation Bar Flutter

Viewed 92

I'm trying to have a navigation bar that can navigate into 3 pages (Home, Profile, and Favorites). I follow a course online, somehow it didn't list the file that normally other people do to navigate (example: List _pages = [Home(),Profile()]).

I try to create the list with all the context inside however I got an error on the 'widget' saying that it can't be access in a initalizer.

Since the code is connected to the Firebase, removing 'user widget.user' will lose all the data of the current user such as the their favorites food.

The Error

Is there a way to change the body in the Home.dart so that it can navigate to multiple pages since the code below is only ideal for 2 pages (ItemList & ProfileScreen) to navigates.

Home.Dart

 class HomeScreen extends StatefulWidget {
  final Function logOut;
  final User user;
  HomeScreen({@required this.logOut, @required this.user});
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int currentItem = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Order Je!',
          style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: MainColors.whiteColor,
        elevation: 0,
      ),
      body: currentItem == 1
          ? ProfileScreen(
              logout: () {
                widget.logOut();
              },
            )
          : ItemList(user: widget.user),
      bottomNavigationBar: CustomNavBar(
        currentSelectedItem: (value) {
          setState(() {
            currentItem = value;
          });
        },
      ),
    );
  }
}

Custom Nav
class CustomNavBar extends StatefulWidget {
  final Function(int) currentSelectedItem;
  CustomNavBar({@required this.currentSelectedItem});
  @override
  _CustomNavBarState createState() => _CustomNavBarState();
}

class _CustomNavBarState extends State<CustomNavBar> {
  int selectedItem = 0;

  @override
  Widget build(BuildContext context) {
    return CurvedNavigationBar(
      color: Colors.white,
      height: 52,
      backgroundColor: MainColors.primaryColor,
      animationCurve: Curves.easeInOut,
      animationDuration: Duration(milliseconds: 350),
      index: selectedItem,
      onTap: (currItem) {
        setState(() {
          selectedItem = currItem;
          widget.currentSelectedItem(currItem);
        });
      },
      items: <Widget>[
        Icon(Icons.home),
        Icon(Icons.account_circle),
        Icon(Icons.favorite)
      ],
    );
  }
}

Sorry for asking such stupid question. I'm new in Flutter and Firebase development. Thank You.

2 Answers

Looking at you problem, I would suggest you to not split the Home and the navigation bar components, Kindly take a look into this, it will help you

Google Flutter Bottom Navigation Bar

We can use widget keyword when we want to refer to the method defined in the stateful class not in the state.

To solve this: You can pass user and logout method to the state of the class.

@override
  _HomeScreenState createState() => _HomeScreenState(logOut,user);

and in the state create a constructor

final Function logOut;
final User user;
_HomeScreenState(this.logOut,this.user);

Hope this will help you and can you please upload the error that it is giving.

Related