Flutter, Multiple Floataing Action Button (notched)

Question

Can I add second float action button as notched? I make an image to show what I want excatly.

PS: I tried some methods(wrapping stack or row widget etc but result is;

And I need my bottombar button too, with the methods I found float buttons always cover it.

My current code is:

import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),

      bottomNavigationBar: Container(
        height: 50,
        child: BottomAppBar(
          color: Colors.black,
          shape: CircularNotchedRectangle(),
          clipBehavior: Clip.antiAlias,
          child: RaisedButton(onPressed: () {},
            child: new Text('Details',
              style: TextStyle(fontSize: 16.0),
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      floatingActionButton: new FloatingActionButton(
        child: Icon(Icons.home,
          ),
        onPressed: () {},
      ),
      )
    );
  }
}

Answer 1

Here is one way of doing it. I have taped into CircularNotchedRectangle() class, copied it and pasted it into a new class. I called it DoubleCircularNotchedButton(). I have modified it for 2 cutouts and hard-coded position of it so those cutouts will always stay in one place. Here is the code (just copy-paste it)

import 'dart:math' as math;
import 'package:flutter/material.dart';

class DoubleCircularNotchedButton extends NotchedShape {
  const DoubleCircularNotchedButton();
  @override
  Path getOuterPath(Rect host, Rect guest) {
    if (guest == null || !host.overlaps(guest)) return Path()..addRect(host);

    final double notchRadius = guest.height / 2.0;

    const double s1 = 15.0;
    const double s2 = 1.0;

    final double r = notchRadius;
    final double a = -1.0 * r - s2;
    final double b = host.top - 0;

    final double n2 = math.sqrt(b * b * r * r * (a * a + b * b - r * r));
    final double p2xA = ((a * r * r) - n2) / (a * a + b * b);
    final double p2xB = ((a * r * r) + n2) / (a * a + b * b);
    final double p2yA = math.sqrt(r * r - p2xA * p2xA);
    final double p2yB = math.sqrt(r * r - p2xB * p2xB);

    ///Cut-out 1
    final List<Offset> px = List<Offset>(6);

    px[0] = Offset(a - s1, b);
    px[1] = Offset(a, b);
    final double cmpx = b < 0 ? -1.0 : 1.0;
    px[2] = cmpx * p2yA > cmpx * p2yB ? Offset(p2xA, p2yA) : Offset(p2xB, p2yB);

    px[3] = Offset(-1.0 * px[2].dx, px[2].dy);
    px[4] = Offset(-1.0 * px[1].dx, px[1].dy);
    px[5] = Offset(-1.0 * px[0].dx, px[0].dy);

    for (int i = 0; i < px.length; i += 1)
      px[i] += Offset(0 + (notchRadius + 12), 0); //Cut-out 1 positions

    ///Cut-out 2
    final List<Offset> py = List<Offset>(6);

    py[0] = Offset(a - s1, b);
    py[1] = Offset(a, b);
    final double cmpy = b < 0 ? -1.0 : 1.0;
    py[2] = cmpy * p2yA > cmpy * p2yB ? Offset(p2xA, p2yA) : Offset(p2xB, p2yB);

    py[3] = Offset(-1.0 * py[2].dx, py[2].dy);
    py[4] = Offset(-1.0 * py[1].dx, py[1].dy);
    py[5] = Offset(-1.0 * py[0].dx, py[0].dy);

    for (int i = 0; i < py.length; i += 1)
      py[i] += Offset(host.width - (notchRadius + 12), 0); //Cut-out 2 positions

    return Path()
      ..moveTo(host.left, host.top)
      ..lineTo(px[0].dx, px[0].dy)
      ..quadraticBezierTo(px[1].dx, px[1].dy, px[2].dx, px[2].dy)
      ..arcToPoint(
        px[3],
        radius: Radius.circular(notchRadius),
        clockwise: false,
      )
      ..quadraticBezierTo(px[4].dx, px[4].dy, px[5].dx, px[5].dy)
      ..lineTo(py[0].dx, py[0].dy)
      ..quadraticBezierTo(py[1].dx, py[1].dy, py[2].dx, py[2].dy)
      ..arcToPoint(
        py[3],
        radius: Radius.circular(notchRadius),
        clockwise: false,
      )
      ..quadraticBezierTo(py[4].dx, py[4].dy, py[5].dx, py[5].dy)
      ..lineTo(host.right, host.top)
      ..lineTo(host.right, host.bottom)
      ..lineTo(host.left, host.bottom)
      ..close();
  }
}

After that you can simply call it in your bottom app bar the same way as you call CircularNotchedRectangle(). Add 2 FloatingActionButtons in a row and you are done

Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Flutter'),
      ),
      body: Container(),
      bottomNavigationBar: Container(
        height: 50,
        child: BottomAppBar(
          color: Colors.black,
          shape: DoubleCircularNotchedButton(), //changed to new class
          clipBehavior: Clip.antiAlias,
          child: RaisedButton(
            onPressed: () {},
            child: Text(
              'Details',
              style: TextStyle(fontSize: 16.0),
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
// Added row with 2 buttons
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 32),
            child: FloatingActionButton(
              child: Icon(
                Icons.android,
              ),
              onPressed: () {},
            ),
          ),
          FloatingActionButton(
            child: Icon(
              Icons.home,
            ),
            onPressed: () {},
          ),
        ],
      ),
    );

OUTPUT