A FloatingActionButton Widget represents the primary action of a screen. Generally, it is located at the right bottom of the screen. Users can also make changes in Elevation, Background Color. So in this article, We will learn about How to Hide FloatingActionButton in Flutter?
What is FloatingActionButton in Flutter?
A FloatingActionButton Widget represents the primary action of a screen. Generally, it is located at the right bottom of the screen.
How to Hide FloatingActionButton In Flutter?
There are multiple ways to achieve the same.
- You can use Visibility to Hide/Show FAB.
floatingActionButton: Visibility( child: FloatingActionButton(...), visible: false, // set it to false )
- With Dart 2.2, you can use if a condition like this:
floatingActionButton: Column( children: <Widget>[ if (shouldShow) FloatingActionButton(...), // visible if showShould is true ], )
- You can use Opacity Widget.
floatingActionButton: Opacity( opacity: shouldShow ? 1 : 0, // visible if showShould is true child: FloatingActionButton(...), )
- Another very good way is AnimatedOpacity
AnimatedOpacity( opacity: isEnabled ? 0.0 : 1.0, duration: Duration(milliseconds: 1000), child: FloatingActionButton( onPressed: your_method, tooltip: 'Increment', child: new Icon(Icons.add), ), )
In this article, We have been through How to Hide FloatingActionButton In Flutter?
Keep Learning !!! Keep Fluttering !!!
Still, need a Support for Flutter Development? Do let us know.
FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.