CODEWITHSUNDEEP
flutterfloating-action-buttonflutter-bottomnavigationflutter-opacity
Muhammad Awab
Muhammad Awab

Reputation: 11

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

Upvotes: 0

Views: 426

Answers (1)

Muhammad Awab
Muhammad Awab

Reputation: 11

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

        ],
      ),
    );
  }

Upvotes: 0

Related Questions