Flutter – Many times developers want to hide/show widgets depending upon conditions in the flutter applications. Using the Visibility Widget, we can easily archive the functionality. The Visibility widget is the best widget for hiding and showing widgets rather than the opacity widgets.
In this tutorial, you will learn How to show/hide widgets programmatically.
Show/Hide Widgets Programatically
Wrap the widget with the Visibility widget, if you want to hide it.
For example,
bool _isVisible = true; Visibility(
visible: _isVisible,
child: Image.asset("assets/icon/icon.png"),
),In the visible property, you can give your own condition that must return a boolean value.
Full source code of this example,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isVisible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Show/hide Widget"),
),
body: Center(
child: Visibility(
visible: _isVisible,
child: Image.asset("assets/icon/icon.png"),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_isVisible = !_isVisible;
});
},
child: Text(_isVisible ? "Hide" : "Show"),
),
);
}
}
