How to Show Hide Widget programmatically in Flutter?

Hello Guys How are you all? Hope You all are fine. Some Times we need to show and hide widget in a flutter. So today Here I come with a tutorial on How to Show Hide Widget programmatically in Flutter ?

Without Wasting your Time Lets start this tutorial.

How to Show Hide Widget programmatically in Flutter ?

Solution 1 : Using Opacity

Here is Tutorial How to Hide And Show widget using Opacity widget.

1. Use Opacity Widget. Just wrap widget that to want to hide or show With Opacity Widget. Just Like Below.

             Opacity(
                opacity: 0.0, //0.0 means hidden 1.0 means visible
                child: Container(

                ),
              ),

2. Now Just Give opacity value as 0.0 or 1.0 to show and hide Widget.

          Opacity(
                opacity: _opacityValue,
                child: Container(
                  color: Colors.greenAccent,
                  height: 125,
                  width: 250,
                  margin: EdgeInsets.all(20),
                ),
              ),

My Full Source Code

import 'dart:async';

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Show Hide Widget - FlutterCorner',
      home: FlutterExample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class FlutterExample extends StatefulWidget {
  FlutterExample({Key key}) : super(key: key);

  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  double _opacityValue;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Show Hide Widget - FlutterCorner'),
      ),
      body: Center(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                color: Colors.redAccent,
                height: 125,
                width: 250,
                margin: EdgeInsets.all(20),
              ),
              Opacity(
                opacity: _opacityValue,
                child: Container(
                  color: Colors.greenAccent,
                  height: 125,
                  width: 250,
                  margin: EdgeInsets.all(20),
                ),
              ),
              Container(
                color: Colors.blueAccent,
                height: 125,
                width: 250,
                margin: EdgeInsets.all(20),
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _opacityValue = 0.0;
                  });
                },
                child: Text(
                  "Click Here To Hide Second Widget",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                color: Colors.red,
              ),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _opacityValue = 1.0;
                  });
                },
                child: Text(
                  "Click Here To Show Second Widget",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                color: Colors.green,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Output Of My Opacity Tutorial :

Solution 2 : Using Visibility

Invisible: The widget takes physical space on the screen but not visible to user.

Gone: The widget doesn’t take any physical space and is completely gone.

1. Click in the lamp and choose (Wrap with widget)
2. Rename the widget to Visibility
3. Add the visible property and set it to false
4. The Child of the newly created widget (Visibility Widget) is the Widget that you want it to be invisible

      Visibility(
              visible: false,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    width: 10,
                  ),
                  Text("Search",
                    style: TextStyle(fontSize: 20
                    ),),
                ],
              ),
            ),

Summery

So it’s all About All possible Methods. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

• How to make a blur Background Image effect in Flutter using BackdropFilter.
• Create Rounded Corners Image in Flutter.
• set Background Image to Scaffold in Flutter.
• How To Select multiple images with Flutter
• How to Set Network Image In Circular Avatar In Flutter?