Есть ли встроенная альтернатива BottomNavigationBar, кроме нижнего меню?

Question

Я новичок в flutter и создаю свое первое приложение. У меня есть небольшое приложение с 4 страницами, есть нижняя панель с иконками. Некоторые значки вызывают функции, такие как копирование текста (для которого не требуется отдельная страница, но это функция, которая должна быть вызвана), в то время как другие являются сложными и вызывают новую страницу, используя Navigator.push().

Я пытался добиться этого, используя пользовательский виджет Row() на каждой странице, но он стал очень странным, и я переписывал множество функций. Я чувствовал, что должна быть нижняя строка меню, но не смог ее найти. Но я не думаю, что он предназначен для использования в качестве меню, а скорее, как следует из названия, панели навигации.

Я также хочу, чтобы панель навигации меняла значки меню при переходе на новую страницу. В учебнике, за которым я следую, он используется следующим образом:

class _HomeState extends State<Home> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    PlaceholderWidget(Colors.white),
    PlaceholderWidget(Colors.deepOrange),
    PlaceholderWidget(Colors.green)
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bottem Navi '),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.person),
              title: Text('Profile')
          )
        ],
      ),
    );
  }

body: изменяется в зависимости от выбранного индекса. Можно ли его использовать в качестве меню? использовать Navigator.push или мой предыдущий метод размещения виджета Row() на каждой странице - лучший вариант?

Answer 1

Вы можете скопировать и вставить полный код ниже
Вы можете использовать BottomAppBar
фрагмент кода

bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => SecondRoute()));
              },
            ),
            Builder(
                builder: (context) => IconButton(
                      icon: Icon(Icons.title),
                      onPressed: () {
                        Scaffold.of(context).showSnackBar(SnackBar(
                          content: Text('Show Snackbar'),
                          duration: Duration(seconds: 3),
                        ));
                      },
                    )),

рабочая демонстрация

введите описание изображения здесь

полный код

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tasks - Bottom App Bar')),
      body: ListView(
        padding: const EdgeInsets.all(8),
        children: <Widget>[
          Container(
            height: 50,
            color: Colors.amber[600],
            child: const Center(child: Text('Entry A')),
          ),
          Container(
            height: 50,
            color: Colors.amber[500],
            child: const Center(child: Text('Entry B')),
          ),
          Container(
            height: 50,
            color: Colors.amber[100],
            child: const Center(child: Text('Entry C')),
          ),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => SecondRoute()));
              },
            ),
            Builder(
                builder: (context) => IconButton(
                      icon: Icon(Icons.title),
                      onPressed: () {
                        Scaffold.of(context).showSnackBar(SnackBar(
                          content: Text('Show Snackbar'),
                          duration: Duration(seconds: 3),
                        ));
                      },
                    )),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.sync),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}