如何将中间一半的图像设置到底部导航栏？

Question

如何将图像设置在底部导航栏的中间，使其看起来带有底部视图。

Answer 1

您可以在下面复制粘贴运行完整代码您可以使用

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
...
bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),

有关详细信息，您可以参考https://proandroiddev.com/flutter-how-to-using-bottomappbar-75d53426f5af

工作演示

代码段

完整代码

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,
      ),
      home: BottomAppBarPage(),
    );
  }
}

class BottomAppBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: const Text('Bottom App Bar')),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 4.0,
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }
}