How to add a bottom navigation item to a page in flutter

Question

I am new to flutter and I am having difficulties to handle the following scenario. I created a page with different widgets and I also created the bottom navigation in its own file but I can't add the created page to the specific bottom navigation item. In the above code, I want to add the page to the discover bottom navigation.

The code for my bottom navigation is:

MyBottomNavigation extends StatefulWidget {
  @override
  _MyBottomNavigationState createState() => _MyBottomNavigationState();
}

class _MyBottomNavigationState extends State<MyBottomNavigation> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      selectedLabelStyle:
          TextStyle(fontFamily: 'Circular', fontSize: kBottomNavFontSize),
      unselectedLabelStyle: TextStyle(
        fontFamily: 'Circular',
        fontSize: kBottomNavFontSize,
      ),
      type: BottomNavigationBarType.fixed,
      backgroundColor: kPrimaryColor,
      iconSize: kBottomNavIconSize,
      currentIndex: _currentIndex,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(FontAwesomeIcons.home),
          label: 'Sermons',
        ),
        BottomNavigationBarItem(
          icon: Icon(FontAwesomeIcons.binoculars),
          label: 'Discover',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.heart_solid),
          label: 'Giving',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.calendar_today),
          label: 'Events',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.person_fill),
          label: 'Profile',
        ),
      ],
      selectedItemColor: Color(0xFFc06014),
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
    );
  }
}

and the code for my page is:

class Discover extends StatefulWidget {
  @override
  _DiscoverState createState() => _DiscoverState();
}

class _DiscoverState extends State<Discover> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Discover',
                  style: TextStyle(
                      fontFamily: 'Circular',
                      fontSize: 55,
                      color: kPrimaryColor,
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  'Discover more from New Life Bible Church',
                  style: TextStyle(
                    fontFamily: 'Circular',
                    fontSize: 22,
                    color: kPrimaryColor.withOpacity(0.7),
                    fontWeight: FontWeight.w200,
                  ),
                ),
              ],
            ),
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/newhere.jpg',
            textTop: 'New Here?',
            textMiddle:
                'Learn more about our church and how you can get involved',
            textBottom: 'Get Started',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/outreach.jpg',
            textTop: 'NLBC Outreach',
            textMiddle:
                'New Life Bible Church Outreach is about compassion, unity, selflessness and service. We serve with more than 300 organizations. We believe in connecting with the community and would be honored if you would join us.',
            textBottom: 'Find events',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/eteams.jpg',
            textTop: 'eTeams',
            textMiddle:
                'See what God can do through you by serving on a volunteer team at New Life Bible Church.',
            textBottom: 'Join A Team',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/ekids.jpg',
            textTop: 'eKidz',
            colour: kPrimaryColor,
            textMiddle:
                'The Family ministry of New Life Bible Church. Focused on helping kids build their faith by using Bible stories, songs and group activities designed for kids 6 weeks old through 5th grade.',
            textBottom: 'Find Out More',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/egroups.jpg',
            textTop: 'eGroups',
            textMiddle:
                'No matter where you come from, there is a group for you. Join an eGroup and experience real relationship that will grow your faith.',
            textBottom: 'Join A Group',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/worship.jpg',
            textTop: 'NLBC Worship',
            textMiddle:
                'Open your heart and see the evidence of the presence of God and all around you as you listen to original music written, produced and performed by the New Life Bible Church Worship Team.',
            textBottom: 'Learn More',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/youth2.jpg',
            textTop: 'NLBC Youth',
            colour: kAlternativeColor,
            textMiddle:
                'New Life Bible Church Youth is for middle and high school students to grow their faith, their character and their relationships. It is about creating an atmosphere where their can belong.  ',
            textBottom: 'Learn More',
            onTap: () {},
          ),
          DiscoverCardTemplate(
            coverImage: 'assets/images/contactus.jpg',
            textTop: 'Need more info?',
            textMiddle:
                'Do not see what you are looking for? Have a question? We are happy to help.',
            textBottom: 'Contact Us',
            onTap: () {},
          ),
          Padding(
            padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  'Social Media',
                  softWrap: true,
                  style: TextStyle(
                      fontFamily: 'Circular',
                      fontSize: 55,
                      color: kPrimaryColor,
                      fontWeight: FontWeight.bold),
                ),
                SocialMediaCard(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

you can add it to your scaffold like

 return Scaffold(
      bottomNavigationBar:MyBottomNavigation(),