如何在底部导航栏颤动中制作矩形凹口曲线

Question

我想制作一个如下图所示的底部导航栏：

但是当我实现代码时，我得到如下结果：

我的代码：

bottomNavigationBar: BottomAppBar(
          //elevation: 0.2,
          notchMargin: 7,
          clipBehavior: Clip.antiAlias,
          color: Color(0xff1c1f26),
          shape: AutomaticNotchedShape(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15),
                      topRight: Radius.circular(15))),
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)))),
          child: SizedBox(
            width: double.infinity,
            height: 60,
          )),
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(17))),
        onPressed: () {},
        child: Icon(Icons.favorite),
      )

现在建议我需要做什么更改或添加以获得与第一张图像类似的结果。

Answer 1

代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(),
        bottomNavigationBar: const BottomAppBar(
          notchMargin: 7,
          color: Color(0xff1c1f26),
          shape: AutomaticNotchedShape(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(15),
              ),
            ),
            RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
          ),
          child: SizedBox(
            width: double.infinity,
            height: 60,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(17))),
          onPressed: () {},
          child: const Icon(Icons.favorite),
        ),
      ),
    );
  }
}

输出：

Flutter 2.5.3 Dart SDK 2.14.4