flutter - 如何将底部导航项与停靠的晶圆厂完美对齐？

Question

我是 flutter 的新手。我正在尝试创建一个主屏幕，其中有带有 float 操作按钮(FAB)的底部栏。晶圆厂停靠在底部应用栏的中心。同时，底部应用栏有 4 个底部导航项。目前所有的项目都没有完美地相互对齐。搜索和通知图标离中心太近。有没有办法可以安排它以使其更好并完美对齐？请帮忙。谢谢

当前用户界面:



编码:

import 'package:flutter/material.dart';

class Dashboard extends StatefulWidget {
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  int _selectedPage = 0;
  final _pageOptions = [
    Home(),
    Discover(),
    Notifications(),
    Messages(),
  ];

  Widget build(BuildContext context) {
    final _drawerNav = Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('Drawer Header'),
            decoration: BoxDecoration(color: colorPrimary),
          ),
          ListTile(
            title: Text('Item 1'),
            onTap: () {},
          ),
          Divider(),
          ListTile(
            title: Text('Item 2'),
            onTap: () {},
          ),
          Divider(),
        ],
      ),
    );

    final _bottomNav = BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 6,
      clipBehavior: Clip.antiAlias,
      child: BottomNavigationBar(
        selectedItemColor: colorPrimary,
        unselectedItemColor: Colors.grey,
        currentIndex: _selectedPage,
        onTap: (int index) {
          setState(() {
            _selectedPage = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.notifications), title: Container(height: 8.0)),
          BottomNavigationBarItem(
              icon: Icon(Icons.message), title: Container(height: 8.0)),
        ],
      ),
    );

    final _fab = FloatingActionButton(
      child: Icon(Icons.add),
      backgroundColor: colorPrimary,
      onPressed: () {},
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
        backgroundColor: colorPrimary,
      ),
      drawer: _drawerNav,
      body: _pageOptions[_selectedPage],
      floatingActionButton: _fab,
      bottomNavigationBar: _bottomNav,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

Answer 1

我做了一个快速而肮脏的修复

我使用行制作了底部导航栏。我没有使用 4 个 child ，而是使用 5 个。其中一个是虚拟 child

https://gist.github.com/hariangr/2739c25dda72edcbc18073b907ef057a