CODEWITHSUNDEEP
flutter
ishaan
ishaan

Reputation: 2031

BottomAppBar Floating action button notch/inset is not transparent

I've added a BottomAppBar to scaffold in a materialApp, and to that I've added a fab with a inset at the center. The code looks somewhat like this

Scaffold(
    bottomNavigationBar: BottomAppBar(
        color: Theme.of(context).accentColor,
        shape: CircularNotchedRectangle(),
        child: _buildBottomBar(context),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: Center(
        child: Icon(
            Icons.add,
            size: 32.0,
        ),
        ),
        onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => CreateEvent()),
        );
        },
    ),
)

And this is what I'm getting after rendering:

enter image description here

The notch is not transparent, and the content behind it is getting hidden.

Is there a way to fix this? Something I might have missed?

Upvotes: 13

Views: 8826

Answers (4)

rehman_00001
rehman_00001

Reputation: 1600

Adding to the accepted solution, if you are using SafeArea as an immediate child to Scaffold then make sure you set the bottom property to false.

Scaffold(
  extendBody: true,
  ...
  child: SafeArea(
    bottom: false,   /* important */
    child: Container(
      child: // your app content
    ),
  ),
);

This enables the content to flow behind the BottomNavigationBar

Upvotes: 1

Rebar
Rebar

Reputation: 1115

You just need to be on the flutter channel: master and then add to Scaffold:

Scaffold(
   extendBody: true
);

and it should be transparent :)

Greets

Rebar

UPDATE:

You don't need to be on master channel. It's included everywhere :)

Upvotes: 50

Cliffus
Cliffus

Reputation: 1491

I was able to achieve the desired behavior by also setting the resizeToAvoidBottomInset flag to false.

@override
Widget build(BuildContext context) {

    return Scaffold(
        extendBody: true,
        resizeToAvoidBottomInset: false,
        body: IndexedStack(
            children: <Widget>[],
            index: _selectedTab,
        ),
        bottomNavigationBar: ClipRRect(
            clipBehavior: Clip.antiAlias,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular(16.0)
            ),
            child: BottomNavigationBar(
                backgroundColor: Colors.white,
                elevation: 10,
                type: BottomNavigationBarType.fixed,
                items: <BottomNavigationBarItem>[],
                currentIndex: _selectedTab,
            ),
        ),
    );
}

Edit: keep in mind that you may have to manually set the bottom insets by using MediaQuery.of(context)

Upvotes: 1

diegoveloper
diegoveloper

Reputation: 103421

The problem is if you put your content in the body of Scaffold it won't overlap the size of your AppBar, BottomAppBar.

You can try using Stack, put your body as a first child, then put the Scaffold, change the backgroundColor as Transparent.

        @override
          Widget build(BuildContext context) {
            return Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Image.network(
                      "https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350"),
                ),
                Scaffold(
                  backgroundColor: Colors.transparent,
                  bottomNavigationBar: BottomAppBar(
                    color: Theme.of(context).accentColor,
                    shape: CircularNotchedRectangle(),
                    child: Row(
                      children: <Widget>[
                        IconButton(
                          icon: Icon(Icons.access_alarm),
                          onPressed: () => null,
                        ),
                        IconButton(
                          icon: Icon(Icons.sms_failed),
                          onPressed: () => null,
                        ),
                      ],
                    ),
                  ),
                  floatingActionButtonLocation:
                      FloatingActionButtonLocation.centerDocked,
                  floatingActionButton: FloatingActionButton(
                    backgroundColor: Theme.of(context).primaryColor,
                    child: Center(
                      child: Icon(
                        Icons.add,
                        size: 32.0,
                      ),
                    ),
                    onPressed: () {
                      /*
                    Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => CreateEvent()),
                    );*/
                    },
                  ),
                ),
              ],
            );

Upvotes: 3

Related Questions