flutterfloating-action-buttonflutter-bottomnavigationflutter-opacity

Add Foggy Effect behind FAB in Flutter


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


Solution

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