BottomAppBar Floating action button notch/inset is not transparent
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()),
);*/
},
),
),
],
);
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)
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 :)