Show Hide Text Container View Widget on Button Click in Flutter

In flutter there is a specific widget named as Visibility which is used hide any given child widget using Boolean true false values. We can easily maintain Boolean value using State. Sometimes app developer wants to hide ListView or any other components like Text, Container, TextField etc on button click event. So in this tutorial we would Show Hide Text Container View Widget programmatically on Button Click in Flutter Android iOS app.

Contents in this project Show Hide Text Container View Widget Programmatically on Button Click in Flutter:

1. Import material.dart package in your app’s main.dart file.

2. Call our main MyApp class using void main runApp() method.

3. Create our main class named as MyApp extends with State less widget. In this class we would call our ViewWidget() class directly.

4. Create a class named as ViewWidget extends StatefulWidget. In this class we would define our main ViewWidgetState class using createState() method to enable mutable state in given class.

5. Create a class named as ViewWidgetState extends with State. This is our main class where we would perform show and hide functionality.

6. Create a Boolean variable named as viewVisible and set its default value to true, So the component will be visible to screen on app start time.

7. Create 2 functions named as showWidget() and hideWidget() in your ViewWidgetState class. In this class we would change the viewVisible variable value using State. We would call these functions on button click.

8. Create Visibility widget in widget build area. We would define a Center view with Text widget as child in Visibility widget.

  • maintainSize : To maintain the Size of widget after hiding.
  • maintainAnimation : To maintain the animation of child tree.
  • maintainState : Whether to maintain the [State] objects of the [child] subtree when it is not.
  • visible : Used to show and hide the Widget and given child using Boolean value.

9. Creating 2 Raised Button and call both functions on button onPress event.

10. Complete source code for main.dart file:

Screenshots:

Show Hide Text Container View Widget on Button Click in Flutter

2 Comments

  1. if i write my 10 digit phone and i want when 10 digit string fill in textbox then visible the button otherwise button invisible

Leave a Reply

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