Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Hide/Show Widget Programmatically in Flutter

In this example, we are going to show you the way to hide or show any widget programmatically in Flutter. To achieve this functionality on Flutter, you must have a knowledge of State management and using conditional statements in widgets.  Follow the steps below:

See the example below, where we have implemented Hiding and showing of Widget programmatically:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( home: MyApp(),)
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  bool show = true; //bool value to track show and hide for widget.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Hide/Show Widget"),
              backgroundColor: Colors.deepPurpleAccent
          ),
          body: Container(
            padding: EdgeInsets.all(15),
             child: Column(
               children:[
                  
                  show?Container( //check if show == true, if true, then show container
                     height: 150,
                     color: Colors.lightBlue,
                  ):Container(), //if show == false, show empty container.

                  Divider(),

                  ElevatedButton(
                    onPressed:(){
                        setState(() { //refresh UI and make show = false
                            show = false;
                        });
                    },
                    child: Text("Hide Box")
                  ),

                  ElevatedButton(
                    onPressed:(){
                        setState(() { //refresh UI and make show = true;
                            show = true;
                        });
                    },
                    child: Text("Show Box")
                  )

               ]
             )
          )
      );
  }
}

Output Screenshot:

When Box is not hided Box hid when clicked on "Hide Box" button

In this way, you can hide or show any widget programmatically in Flutter.

No any Comments on this Article


Please Wait...