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

} }

Sign up to request clarification or add additional context in comments.

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.