How to show or hide widget in Flutter

Last updated Aug 21, 2020


How to show or hide (visible/Invisible) widget in Flutter using Visibility Widget

There is a scenario we may get, make a widget only shown in certain conditions and hidden otherwise the condition fails. To make a widget show or hide in flutter by using  Visibility widget.

If we want to show or hide a widget  should be the child of Visibility widget. With in the constructor, we need to pass visibility option whose value is a boolean and is stored as state. Then, change the value in order to show or hide the child.

In this post , we are using three Card widgets. The Card Two  is wrapped inside Visibility widget. On  button event we are switching the value of the state between true and false

 

Visibility Widget

Visibility({
  Key key,
  @required this.child,
  this.replacement = const SizedBox.shrink(),
  this.visible = true,
  this.maintainState = false,
  this.maintainAnimation = false,
  this.maintainSize = false,
  this.maintainSemantics = false,
  this.maintainInteractivity = false,
})

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(WidgetHideShowExample());
}



class WidgetHideShowExample extends StatefulWidget {
  @override
  _WidgetHideShowExampleState createState() {
    return _WidgetHideShowExampleState();
  }
}

class _WidgetHideShowExampleState extends State {
  bool _isVisible = true;

  void showToast() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Visibility Widget',
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green,
            title: Text('Visibility Widget'),
          ),
          body: Padding(
            padding: EdgeInsets.all(15.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                RaisedButton(
                  child: Text('Show/Hide Image Card'),
                  onPressed: showToast,
                ),
                Card(
                  child: new ListTile(
                    title: Center(
                      child: new Text('Card One'),
                    ),
                  ),
                ),
                Visibility (
                  visible: _isVisible,
                  child: Card(
                    child: new ListTile(
                      title: Center(
                        child: Image.network("https://images.squarespace-cdn.com/content/v1/570459e701dbae8f24d0adf4/1485252322996-298AKOT1F6PSUM0PEMV3/ke17ZwdGBToddI8pDm48kJcninMfh5YbUqtSt15etf1Zw-zPPgdn4jUwVcJE1ZvWEtT5uBSRWt4vQZAgTJucoTqqXjS3CfNDSuuf31e0tVHL5HAQmxiMirwGMFDg56p-Tw1ZzCaJSatlMnbBgc-V5FtO8nJtk629tZGIWiyY3XQ/image-asset.png",width: double.infinity,height: 220,fit: BoxFit.fill,),
                      ),
                    ),
                  ),
                ),
                Card(
                  child: new ListTile(
                    title: Center(
                      child: new Text('Card Three'),
                    ),
                  ),
                ),
              ],
            ),
          )
      ),
    );
  }
}

 

Flutter Widgets, Flutter Examples


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1701 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions