In Flutter, the Visibility Widget is used to show or hide a child/widget. By default, the visible property controls whether the child is included in the subtree or not; when it is not visible, the replacement child (typically a zero-sized box) is included instead. So, In this tutorial, we will see a simple example Let's start Step 1: Create a new Flutter Application. Step 2: Declare a bool variable that will be used to change the visibility in your stateful widget. for example bool isVisible = false; Step 3: Now we can use Visibility widget in our app, simply use this widget where you want to hide/show other widget also it has different properties such as visible: property will have our bool variable child: property will have the widget that is visible if the value is true replacement: property will be the widget that is displayed when the child widget is hidden for example: Visibility( visible: isVisible, child: SizedBox( height: 200, width: 200, child: Image.asset('assets/splashscreen.png'), ), replacement: Container( height: 200, width: 300, color: Colors.red, ), ) Full Source Code to implement Widget visibility invisibility import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: MyApp(), )); } class MyApp extends StatefulWidget { @override _State createState() => _State(); } class _State extends State { bool isVisible = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Switch'), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Text( isVisible ? 'Visible widget One' : 'Visible widget Two', style: TextStyle(fontSize: 40, color: Colors.blueGrey.shade900), ), ), const SizedBox( height: 20, ), Center( child: Visibility( visible: isVisible, child: SizedBox( height: 200, width: 200, child: Image.asset('assets/splashscreen.png'), ), replacement: Container( height: 200, width: 300, color: Colors.red, ), )), const SizedBox( height: 20, ), ElevatedButton( onPressed: () { setState(() { isVisible = !isVisible; }); }, child: const Text('Change Visibility')) ], )); } } Output: Conclusion: In this tutorial, we learned how you can use the visibility widget to show/hide any widget in Flutter.
|
Article Contributed By :
|
|
|
|
|
1010 Views |
|