title: Flutter: Navigation Architecture with BottomBar Menu
body: <p>I still don't have full grasp of the build and navigation process in Flutter and was wondering on how to design the main navigation architecture of a more complex app with many pages.</p>
  <p>In my case, I have a HomePage with a Scaffold, a Bottom Bar for Navigation and 5 items in it.</p>
  <pre><code>class _HomePageState extends State&lt;HomePage&gt; {
    int _selectedIndex = 0;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(...),
        body: [Page1(), Page2(), Page3(), Page4(), Page5()].elementAt(_selectedIndex),
        bottomNavigationBar: BottomAppBar(
            child: Row(
              children: [
                IconButton(
                  icon: Icon(
                    FeatherIcons.home,
                    size: 27,
                    color: (_selectedIndex == 0)
                        ? Colors.yellow[600]
                        : Colors.grey[800],
                  ),
                  onPressed: () {
                      setState(() {
                        _selectedIndex = 0;
                      });
                  },
                ),
              // four more Icon Buttons ....
             ]
            ),
           ),
     );
  </code></pre>
  <p>and on Page2() for example I have two tabs on the page, and I used the pattern:</p>
  <pre><code>Scaffold(
     ...
     body: (_index = 0) ? TabPage1() : TabPage2(),
  )
  </code></pre>
  <p>where I have two IconButtons in the <code>AppBar.title</code> to change the index.</p>
  <p>Are these bad practices for Navigation? Should I use a PageView for the 5 main pages in the HomePage or what is the best way to handle the Navigation?</p>