Material 3 BottomAppBar Support Flutter

Question

I am using material3: true in ThemeData

Scaffold(
        appBar: AppBar(title: const Text('Bottom App Bar')),
        floatingActionButtonLocation:
        FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add), onPressed: () {},),
        bottomNavigationBar: BottomAppBar(
          shape: const CircularNotchedRectangle(),
          notchMargin: 8.0,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.menu), onPressed: () {},),
              IconButton(icon: Icon(Icons.search), onPressed: () {},),
            ],
          ),
        ),
      )

I have this code, and I don't see the notch margin and the curve in the BottomAppBar

Doctor

Flutter 3.7.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b06b8b2710 (3 months ago) • 2023-01-23 16:55:55 -0800
Engine • revision b24591ed32
Tools • Dart 2.19.0 • DevTools 2.20.1

But the expected design is something like this

Is there any way to migrate to material3 ?

For that you will need to use the CustomPaint class and draw whatever you want accordingly. — Karan Mehta, Apr 17 '23 at 09:55
if I set `material3:false` it works. but how do I migrate to `material3` ? — Balaji, Apr 17 '23 at 09:56
@Balaji please refer my answer [here](https://stackoverflow.com/a/71346768/13997210) hope its help to you. — Ravindra S. Patil, Apr 17 '23 at 09:58
@Balaji I have test your code its working well like your expected image — Ravindra S. Patil, Apr 17 '23 at 10:02

score -1 · Answer 1 · answered Aug 16 '23 at 07:44

Wrap that widget with Theme with useMaterial3:false

 bottomNavigationBar: Theme(
    data: ThemeData(useMaterial3: false),
    child: BottomAppBar(
      shape: const CircularNotchedRectangle(),
      child: Row(
        children: [
          IconButton(
            tooltip: 'Open navigation menu',
            icon: const Icon(Icons.home),
            onPressed: () {},
          ),
          const Spacer(),
          IconButton(
            tooltip: 'Search',
            icon: const Icon(Icons.chat_bubble),
            onPressed: () {},
          ),
          const Spacer(
            flex: 3,
          ),
          IconButton(
            tooltip: 'Favorite',
            icon: const Icon(Icons.assignment_ind),
            onPressed: () {},
          ),
          const Spacer(),
          IconButton(
            tooltip: 'Favorite',
            icon: const Icon(Icons.account_circle),
            onPressed: () {},
          ),
        ],
      ),
    ),
  ),

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 18 '23 at 00:43

Material 3 BottomAppBar Support Flutter

1 Answers1