close

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 ?

  1. How to Show Hide Widget programmatically in Flutter ?

    to Show Hide Widget programmatically in Flutter There Are Two Main Method to Show Hide widget. Just wrap your widget with Opacity widget and use its Opacity property and give opacity 0 to hide and set opacity 1 to show Widget.

  2. Show Hide Widget programmatically in Flutter

    to Show Hide Widget programmatically in Flutter There Are Two Main Method to Show Hide widget. Just wrap your widget with Opacity widget and use its Opacity property and give opacity 0 to hide and set opacity 1 to show Widget.

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 :

How to Show Hide Widget programmatically in Flutter ?, Show Hide Widget programmatically in Flutter, Flutter Show Hide Widget programmatically, show hide widget programmatically, hide widget programmatically in flutter

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

Leave a Comment

%d bloggers like this: