Show Page with Specific List maintaining Bottom AppBar - Flutter

Question

I am building an app with a bottom appbar with classic indexed pages to navigate the main menu:



class OverAllScreen extends StatefulWidget {
final int initialPage;
OverAllScreen(this.initialPage);
@override
_OverAllScreenState createState() => _OverAllScreenState();
}

class _OverAllScreenState extends State<OverAllScreen> {
List _pageOptions = [
  Shop(),
  Home(),
  Discover(),
  Account(),
];

int _page;

@override
void initState() {
  super.initState();
  setState(() {
    _page = widget.initialPage;
  });
}

@override
Widget build(BuildContext context) {
  final _theme = Theme.of(context);
  final _mediaSize = MediaQuery.of(context).size;

  return Scaffold(
    body: _pageOptions[_page],
    bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      backgroundColor: _theme.primaryColor,
      selectedItemColor: _theme.accentColor,
      unselectedItemColor: Colors.white,
      currentIndex: _page,
      onTap: (index) {
        setState(() {
          _page = index;
        });
      },
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Shop'),
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Discover'),
        BottomNavigationBarItem(
            icon: Icon(Icons.person_outline), label: 'Account'),
      ],
    ),
  );
}
}

In the account page, further down the widget tree I have a widget that shows a list of detailed products. I want this page to open up when I click on an item of a simple (non-detailed) grid of products. This I can easily do with Navigator.of(context).push(MaterialPageR0ute(...))). However I would like to keep the bottomAppBAr visible (like instagram when you look at the products of a user). The problem is that I have the specific list of products in down in the widget tree, so I can't pass them as an argument at the occount page level, without passing them back each step of the way by passing a function as an argument of the widget.


class ProductList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _products = Provider.of<List<ProductModel>>(context);

    return ListView.builder(
      itemExtent: 150,
      scrollDirection: Axis.horizontal,
      itemCount: _products.length,
      itemBuilder: (context, index) => Card(
        margin: const EdgeInsets.all(5),
        child: InkWell(
          child: ProductTile(_products[index]),
          onTap: () => Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => ProductDetailList(
                productIndex: index,
                products: _products,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Here I use MaterialPageRoute, but would like to keep BottomAppBar visible.

Thank you.

score 1 · Accepted Answer · answered Nov 25 '20 at 11:50

To achieve the functionality you are looking for, you would have to write several switch and break case which can be cumbersome as your use is going to be very basic.

What I would suggest is go for this package

This package provide a persistent bottom navigaton bar which is highly customisable and you could even use salmon like bottom bar without writing a single line of extra code.

Show Page with Specific List maintaining Bottom AppBar - Flutter

1 Answers1