Show Hide Widgets in Flutter Programmatically on Button Click Android iOS Example

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.

2. Creating void main runApp() method and here we would call our main MyApp class extends with State.

3. Creating our main MyApp class extend with StatelessWidget. This is our main Parent class.

4. Creating Widget Build Area in MyApp class, Now we would call here ChildWidget() class as Child in body area.

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.

6. Creating another class named as StateChildWidget extends State<ChildWidget>. This is our main Child class.

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.

8. Creating a function named as showWidget(). Inside this function we would call the setState() method and change the widgetVisible value to 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.

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.

11. Complete source code for main.dart file:

Screenshots in Android device:

Show Hide Widgets in Flutter Programmatically on Button Click Android iOS Example

Screenshots in iOS device:

Leave a Reply

Your email address will not be published. Required fields are marked *