Search code examples
fluttertemplatesbottombar

How to integrate a bottom navigation bar on the new flutter template of version 2.5?


How to integrate a bottom navigation bar on the new flutter template of version 2.5?

I understood the principle but I cannot insert this line: child: _widgetOptions.elementAt (_selectedIndex), (This line of code comes from the flutter doc) in the Body of the template because the Body returns a ListTitle

Thank you for your help !

` Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Sample Items'), actions: [ IconButton( icon: const Icon(Icons.settings), onPressed: () { Navigator.restorablePushNamed(context, SettingsView.routeName); }, ), ], ), body: ListView.builder( restorationId: 'sampleItemListView', itemCount: items.length,

    itemBuilder: (BuildContext context, int index) {
      final item = items[index];

      return ListTile(
        title: Text('SampleItem ${item.id}'),
        leading: const CircleAvatar(
          // Display the Flutter Logo image asset.
          foregroundImage: AssetImage('assets/images/flutter_logo.png'),
        ),
        onTap: () {
          Navigator.restorablePushNamed(
            context,
            SampleItemDetailsView.routeName,
          );
        }
      );
    },
  ), bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        label: 'Business',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        label: 'School',
      ),
    ],
    currentIndex: _selectedIndex, // =(
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),
);

} }`


Solution

  • Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Items'),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {
              // Navigate to the settings page. If the user leaves and returns
              // to the app after it has been killed while running in the
              // background, the navigation stack is restored.
              Navigator.restorablePushNamed(context, SettingsView.routeName);
            },
          ),
        ],
      ),
    
      // To work with lists that may contain a large number of items, it’s best
      // to use the ListView.builder constructor.
      //
      // In contrast to the default ListView constructor, which requires
      // building all Widgets up front, the ListView.builder constructor lazily
      // builds Widgets as they’re scrolled into view.
      body: ListView.builder(
        // Providing a restorationId allows the ListView to restore the
        // scroll position when a user leaves and returns to the app after it
        // has been killed while running in the background.
        restorationId: 'sampleItemListView',
        itemCount: items.length,
    
        itemBuilder: (BuildContext context, int index) {
          final item = items[index];
    
          return ListTile(
            title: Text('SampleItem ${item.id}'),
            leading: const CircleAvatar(
              // Display the Flutter Logo image asset.
              foregroundImage: AssetImage('assets/images/flutter_logo.png'),
            ),
            onTap: () {
              // Navigate to the details page. If the user leaves and returns to
              // the app after it has been killed while running in the
              // background, the navigation stack is restored.
              Navigator.restorablePushNamed(
                context,
                SampleItemDetailsView.routeName,
              );
            }
          );
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex, // =(
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
    

    } }