Add Foggy Effect behind FAB in Flutter

Question

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

expected

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(),
      ),
    ),
  );
}

output

Please add the code of what you've tried – ByteMe Aug 21 '20 at 00:58 — ByteMe, Aug 21 '20 at 00:58
@ByteMe Code Added..Kindly have a look – Muhammad Awab Aug 21 '20 at 03:07 — Muhammad Awab, Aug 21 '20 at 03:07

score 0 · Accepted Answer · answered Aug 21 '20 at 16:58

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,
          ),

        ],
      ),
    );
  }

Add Foggy Effect behind FAB in Flutter

1 Answers1