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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with State less widget. In this class we would call our ViewWidget() class directly.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Show Hide View on Button Click"), ), body: SafeArea( child : Center( child:ViewWidget(), ) ) ), ); } } |
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.
|
1 2 3 4 |
class ViewWidget extends StatefulWidget { @override ViewWidgetState createState() => ViewWidgetState(); } |
5. Create a class named as ViewWidgetState extends with State. This is our main class where we would perform show and hide functionality.
|
1 2 3 4 |
class ViewWidgetState extends State { } |
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.
|
1 |
bool viewVisible = true ; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
void showWidget(){ setState(() { viewVisible = true ; }); } void hideWidget(){ setState(() { viewVisible = false ; }); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Visibility( maintainSize: true, maintainAnimation: true, maintainState: true, visible: viewVisible, child: Container( height: 200, width: 200, color: Colors.green, margin: EdgeInsets.only(top: 50, bottom: 30), child: Center(child: Text('Show Hide Text View Widget in Flutter', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 23))) ) ), |
9. Creating 2 Raised Button and call both functions on button onPress event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
RaisedButton( child: Text('Hide Widget on Button Click'), onPressed: hideWidget, color: Colors.pink, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text('Show Widget on Button Click'), onPressed: showWidget, color: Colors.pink, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), |
10. 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 View on Button Click"), ), body: SafeArea( child : Center( child:ViewWidget(), ) ) ), ); } } class ViewWidget extends StatefulWidget { @override ViewWidgetState createState() => ViewWidgetState(); } class ViewWidgetState extends State { bool viewVisible = true ; void showWidget(){ setState(() { viewVisible = true ; }); } void hideWidget(){ setState(() { viewVisible = false ; }); } Widget build(BuildContext context) { return Column( children: <Widget>[ Visibility( maintainSize: true, maintainAnimation: true, maintainState: true, visible: viewVisible, child: Container( height: 200, width: 200, color: Colors.green, margin: EdgeInsets.only(top: 50, bottom: 30), child: Center(child: Text('Show Hide Text View Widget in Flutter', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 23))) ) ), RaisedButton( child: Text('Hide Widget on Button Click'), onPressed: hideWidget, color: Colors.pink, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), RaisedButton( child: Text('Show Widget on Button Click'), onPressed: showWidget, color: Colors.pink, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ), ], ); } } |
Screenshots:
if i write my 10 digit phone and i want when 10 digit string fill in textbox then visible the button otherwise button invisible
Yes Aditya you can do this. I will post a tutorial regarding to your query soon 🙂 .