Widgets are the base of every application in Flutter and you can say that they are Skeleton of flutter. Without widgets development is not possible in flutter. Every styling property or Prop works around Widgets. In today’s tutorial we would learn about a new widget called as Visibility Widget which comes with great modification options. Using the Visibility widget we can hide every widget in Flutter and make them disappear from the screen. Visibility widget controls their Visible and Hide functionality using True and False Boolean value. If the value we pass is True then it will not hide the Children Widget and If we pass the False value then it will Hide the children widget from mobile screen. This type of functionality is used when developer wants to show some widgets on certain conditions in mobile application. So in this tutorial we would Show Hide Widgets in Flutter Programmatically on Button Click Android iOS Example Tutorial.
Contents in this project Show Hide Widgets in Flutter Programmatically on Button Click Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class extends with State.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extend with StatelessWidget. This is our main Parent class.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build Area in MyApp class, Now we would call here ChildWidget() class as Child in body area.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Show Hide Widgets on Button Click"), ), body: SafeArea( child : Center( child:ChildWidget(), ) ) ), ); } |
5. Creating a class named as ChildWidget extends with StatefulWidget. In this class we would make createState() method of State and pass StateChildWidget class along with it. The createState() method will of State will enable mutable state management in given class tree.
|
1 2 3 4 |
class ChildWidget extends StatefulWidget { @override StateChildWidget createState() => StateChildWidget(); } |
6. Creating another class named as StateChildWidget extends State<ChildWidget>. This is our main Child class.
|
1 2 3 4 |
class StateChildWidget extends State<ChildWidget> { } |
7. Creating a Boolean type variable named as widgetVisible with default True value. We would use this State to Show Hide Widgets in Flutter Programmatically.
|
1 |
bool widgetVisible = true ; |
8. Creating a function named as showWidget(). Inside this function we would call the setState() method and change the widgetVisible value to True.
|
1 2 3 4 5 |
void showWidget(){ setState(() { widgetVisible = true ; }); } |
9. Creating another function named as hideWidget(). Inside this function we would again call the setState() method and change the widgetVisible value to False.
|
1 2 3 4 5 |
void hideWidget(){ setState(() { widgetVisible = false ; }); } |
10. Creating Widget Build area -> Column widget -> Visibility widget and 2 Raised Button widgets.
Visibility : Used to Show Hide Widgets in Flutter Programmatically.
maintainSize : If true then after hiding widget will occupy the space on application screen. If false then app will leave the space on screen after hiding.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
Widget build(BuildContext context) { return Column( children: <Widget>[ Visibility( maintainSize: true, maintainAnimation: true, maintainState: true, visible: widgetVisible, child: Container( height: 200, width: 200, color: Colors.redAccent, margin: EdgeInsets.only(top: 20, bottom: 20), child: Center(child: Text('Show Hide View Container Widget in Flutter', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 24))) ) ), RaisedButton( child: Text('Hide Widget on Button Click'), onPressed: hideWidget, color: Colors.blue, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text('Show Widget on Button Click'), onPressed: showWidget, color: Colors.blue, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ], ); } |
11. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Show Hide Widgets on Button Click"), ), body: SafeArea( child : Center( child:ChildWidget(), ) ) ), ); } } class ChildWidget extends StatefulWidget { @override StateChildWidget createState() => StateChildWidget(); } class StateChildWidget extends State<ChildWidget> { bool widgetVisible = true ; void showWidget(){ setState(() { widgetVisible = true ; }); } void hideWidget(){ setState(() { widgetVisible = false ; }); } Widget build(BuildContext context) { return Column( children: <Widget>[ Visibility( maintainSize: true, maintainAnimation: true, maintainState: true, visible: widgetVisible, child: Container( height: 200, width: 200, color: Colors.redAccent, margin: EdgeInsets.only(top: 20, bottom: 20), child: Center(child: Text('Show Hide View Container Widget in Flutter', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 24))) ) ), RaisedButton( child: Text('Hide Widget on Button Click'), onPressed: hideWidget, color: Colors.blue, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text('Show Widget on Button Click'), onPressed: showWidget, color: Colors.blue, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ], ); } } |
Screenshots in Android device:
Screenshots in iOS device:
