Home > Mobile >  Is it possible to use BottomNavigatorBar without to use Scaffold`s Body
Is it possible to use BottomNavigatorBar without to use Scaffold`s Body

Time:10-23

There are plenty Bottom Navigator Bar tutorial in internet but almost all of them suggesting to put the Navigate method into Scaffold's body.

Here is my final Navigate and it works if I put into Scaffold's body: showPage(_selectedIndex)

but the problem is I am using on same page Tabbar and BottomNavigatorBar together. Here is the current situation (Scaffold's body)

body: TabBarView(
                children: [
                  for (final tab in filteredList)
                    NewsView(
                      id: tab.id!,
                    ),
                ],
              ),

unfortunately I could not find a way to put or integrate showPage(_selectedIndex)

P.S. the tabs generating dynamically from JSON.

CodePudding user response:

The Scaffold Widget has a ButtonNavigationBar property besides de body. If it’s about navigation you can definitely add a button and pass the reference to the Class or Page you want to navigate to in its ‘onPressed () {}’ property. This is an example from the official documentation:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button $_count times.'),
    ),
    bottomNavigationBar: BottomAppBar(
      shape: const CircularNotchedRectangle(),
      child: Container(height: 50.0),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => setState(() {
        _count  ;
      }),
      tooltip: 'Increment Counter',
      child: const Icon(Icons.add),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );
} 

Here’s the link https://api.flutter.dev/flutter/material/Scaffold-class.html

CodePudding user response:

the final solution:

body: Center(
    child: _selectedIndex != 0
        ? showPage(_selectedIndex)
        : TabBarView(
            children: [
              for (final tab in filteredList)
                NewsView(
                  id: tab.id!,
                ),
            ],
          ),
  ),

  • Related