0

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,
  ),
);

} }`

1 Answer 1

0
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,
  ),
);

} }

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Sep 24, 2021 at 3:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.