How to create a Notched Shape in flutter

Question

Trying to figure out how to build something similar to the images but with no result. I tried to use CircularNotchedRectangle code and put it inside a CustomPainter but couldn't figure out how to adjust it.

any suggestions will be appreciated!!

Answer 1

Instead of manually implementing a CircularNotchedRectangle inside a CustomPainter, you can simply use my package, which provides an easy way to create notched cards.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final guestKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          fit: StackFit.loose,
          alignment: Alignment.topCenter,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 0.0, left: 0),
              child: CircleAvatar(
                key: guestKey,
                child: Icon(Icons.arrow_back),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: NotchedCard(
                guestKey: guestKey,
                notchMargin: 5,
                shapeNotch: CircularDirectionalNotchedRectangle(
                    position: NotchCardPosition.top),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15.0)),
                clipBehavior: Clip.antiAlias,
                elevation: 20,
                color: Colors.green,
                margin: EdgeInsets.all(10),
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: IntrinsicHeight(
                    child: Column(
                      spacing: 30,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('Notched Card',
                            style: Theme.of(context).textTheme.displaySmall),
                        Text('This is a notched card and it is awesome',
                            style: Theme.of(context).textTheme.bodyMedium),
                        Text(';)',
                            style: Theme.of(context).textTheme.labelMedium),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Best wishes.

Answer 2

You can have it on the bottomNavitationBar property of the Scaffold and use the BottomAppBar widget with a notchMargin and a shape to put your CircularNotchedRectangle:

Scaffold(
  ...
  bottomNavigationBar: BottomAppBar(
    notchMargin: 6.0,
    shape: CircularNotchedRectangle(),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        ...
      ],
    ),
  ),
);