Показать страницу с определенным списком с сохранением нижней панели приложений - Flutter

Question

Я создаю приложение с нижней панелью приложений с классическими проиндексированными страницами для навигации по главному меню:

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'),
      ],
    ),
  );
}
} 

На странице учетной записи, ниже по дереву виджетов, у меня есть виджет, который показывает список подробных продуктов. Я хочу, чтобы эта страница открывалась, когда я нажимаю на элемент простой (не детализированной) сетки продуктов. Это легко сделать с помощью Navigator.of(context).push(MaterialPageR0ute(...))). Однако я хотел бы, чтобы нижний AppBAr оставался видимым (например, Instagram, когда вы смотрите на продукты пользователя). Проблема в том, что у меня есть конкретный список продуктов внизу в дереве виджетов, поэтому я не могу передать их в качестве аргумента на уровне страницы событий, не передавая их обратно на каждом этапе пути, передав функцию в качестве аргумента. виджета.

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

Здесь я использую MaterialPageRoute, но хочу, чтобы BottomAppBar оставался видимым.

Спасибо.

Answer 1

Для достижения той функциональности, которую вы ищете, вам нужно будет написать несколько случаев переключения и прерывания, что может быть громоздким, поскольку ваше использование будет очень простым.

Я бы посоветовал пойти на этот пакет

Этот пакет предоставляет постоянную нижнюю панель навигации, которая легко настраивается, и вы даже можете использовать лосося, например, нижнюю панель, без написания ни одной строки дополнительного кода.