flutter - BottomAppBar中的Notch用于自定义FAB

我正在使用unicorndial包中的UnicornDialer在我的应用程序主页上创建材料快速拨号体验，但如果我将shape属性设置为定义槽口，则槽口未正确绘制：

我注意到另一个包（flutter_speed_dial）中明确提到这不起作用：
快速拨号小部件内置在浮动操作按钮中。
脚手架小部件的参数。无法设置
使用scaffold.floatingActionButtonLocation参数定位
尽管如此。可以使用scaffold.bottomNavigationBar，但
浮动按钮将放置在条上方，不带
可能放置在缺口处。
在UnicornDialer的情况下，build方法返回的小部件是一个标准的FloatingActionButton并且已经拖拽了Scaffold和BottomAppBar的代码，我无法找出缺口为什么会那样损坏。
我试过用一个标准的fab（但是透明的）来创建缺口，然后将Scaffold和UnicornDialer包装在一个Stack中来定位所有的东西，这很好，但是当你显示一个SnackBar时，UnicornDialer不会移动，所以我回到需要BottomAppBar来正确地处理自定义fab进行缺口计算。有什么想法吗？

最佳答案

你需要用一个容器包装独角拨号器并控制槽口边缘，
请注意，notchmargin可以取负值，
似乎BottomAppBar缺口的渲染器无法从原始的独角兽拨号器正确计算贝塞尔曲线。
您可以使用以下代码作为指南。它工作得很好

import 'package:flutter/material.dart';
import 'package:unicorndial/unicorndial.dart';

void main() =>
    runApp(new MaterialApp(debugShowCheckedModeBanner: false, home: Example()));

class Example extends StatefulWidget {
  _Example createState() => _Example();
}

class _Example extends State<Example> {
  @override
  Widget build(BuildContext context) {
    var childButtons = List<UnicornButton>();

    childButtons.add(UnicornButton(
        hasLabel: true,
        labelText: "Choo choo",
        currentButton: FloatingActionButton(

          heroTag: "train",
          backgroundColor: Colors.redAccent,
          mini: true,
          child: Icon(Icons.train),
          onPressed: () {},
        )));

    childButtons.add(UnicornButton(
        currentButton: FloatingActionButton(
            heroTag: "airplane",
            backgroundColor: Colors.greenAccent,
            mini: true,
            child: Icon(Icons.airplanemode_active))));

    childButtons.add(UnicornButton(
        currentButton: FloatingActionButton(
            heroTag: "directions",
            backgroundColor: Colors.blueAccent,
            mini: true,
            child: Icon(Icons.directions_car))));

    return Scaffold(

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


        notchMargin: -10.0,

        color: Colors.blue,
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
      ),
      //floatingActionButton: FloatingActionButton(onPressed: (){}),
      floatingActionButton: Container(
        width: 100.0,
        height: 100.0,
        child: UnicornDialer(
            hasNotch: true,
            //hasBackground: false,
            backgroundColor: Color.fromRGBO(255, 255, 255, 0.0),
            parentButtonBackground: Colors.redAccent,
            orientation: UnicornOrientation.VERTICAL,
            parentButton: Icon(Icons.add),
            childButtons: childButtons),
      ),
      appBar: AppBar(),
      body: Container(

        child: Center(
          child: RaisedButton(
            onPressed: () {
              setState(() {});
            },
          ),
        ),
      ),
    );
  }
}

bottomAppBar

flutter - BottomAppBar中的Notch用于自定义FAB