How can i add this foggy effect behind the FAB ? I have tried achieving this using BottomAppBar but the BottomAppBar doesnt accept Transparent Color in LinearGradient I have also tried to reduce the Opacity of BottomAppBar Background but it doesnt work as well
Widget build(BuildContext context) {
return Scaffold(
body: _myListView(context),
bottomNavigationBar: BottomAppBar(
child: Container(
height: MediaQuery.of(context).size.height/10,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.transparent,Colors.white],
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
),
child: MyFloatingActionButton(),
),
),
);
}
I was able to solve the issue with the help of Stack
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
_myListView(context),
Positioned(child:
Container(
padding: EdgeInsets.all(5.0),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.white.withAlpha(0),
Colors.white12,
Colors.white70
],
),
),
child: MyFloatingActionButton(),
),
bottom: 0,
top: MediaQuery.of(context).size.height/1.5,
width: MediaQuery.of(context).size.width,
),
],
),
);
}