Flutter Offstage widget to hide/show any widget

Hi Guy’s Welcome to Proto Coders Point. In this Flutter tutorial will check how to programmatically hide show widget in flutter app.

Flutter provides a inbuilt widget called “Offstage”, which is been used to hide or show any widget programmatically depending on user action/event.

Video Tutorial

Syntax of Flutter Offstage widget

 Offstage(
          offstage: true or false,
          child: <Any Child Widget>
      ),

Flutter Offstage widget has a property ‘offstage’, which accept Boolean value.

The child widget is hidden when the offstage property is set to true.

Likewise if property is set to ‘false’, the child widget is shown.

How to use OffStage Widget in flutter

Here’s an example of how to use the Offstage widget to conditionally hide or show a container with icon widget(or any widget):

 Offstage(
              offstage:isHidden ,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Icon(Icons.flutter_dash,size: 70,color: Colors.black,),
              ),
       ),

In above snippet code example, The Container widget is been wrapped with Offstage widget, and will be hidden if 'isHidden' is set to true, and will be shown if the 'isHidden' value is set to false.

How to Programmatically hide/show widget in flutter using OffStage

You can also hide/show any widget depending on the state of another widget.

Complete source code on how to use Offstage widget in flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Favicon',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
bool isHidden = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Offstage(
              offstage:isHidden ,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Icon(Icons.flutter_dash,size: 70,color: Colors.black,),
              ),
            ),
            SizedBox(height: 20,),
            ElevatedButton(onPressed: (){
                setState(() {
                  isHidden = !isHidden;
                });
            }, child: Text(isHidden? "Show":"Hide"))
          ],
        ),
      )
    );
  }
}

Here In above example, I have used a button to toggle and show/hide widget in flutter.