OffStage Widget in Flutter

Flutter provides an inbuilt widget called “Offstage”, which is been used to hide or show any widget programmatically depending on user action/event. Offstage Widget is a widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit-testing, and without taking any room in the parent. In this article, we will learn about the OffStage widget & how to implement it.

Constructor:

Offstage({ 
    Key? key, 
    this.offstage = true, 
    Widget? child 
})

Properties:

OffStage Property: Accepts Boolean value. The child widget is hidden when the offstage property is set to true. Likewise, if the property is set to ‘false’, the child widget is shown.

Key: The widget key, is used to control if it should be replaced.

Child: The widget below this widget in the tree.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Create an Appbar inside Scaffold Widget

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      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(
      //Creating appbar
      appBar: AppBar(title: Text('GeeksforGeeks')),
    );
  }
}

Step 3: Create a Container and Wrap it with Offstage Widget

• Create a container and give it height, width, and color properties.
• Inside the child, of a  Container give it a Flutter Dash Icon.
• Wrap Container with OffStage Widget and give offStage property.

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      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(
      //Creating appbar
      appBar: AppBar(title: Text('GeeksforGeeks')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Using Offstage Widget by Wrapping it with Container
            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,
            ),
          ],
        ),
      ),
    );
  }
}

Step 4: Creating an Elevated Button

• Inside the Elevated Button, we have put logic in setState that if the value of isHidden is false make it true and show the Dash Image on the Screen. 
• if the value of isHidden is true then hide the Dash Image on the Screen.
• Add Sized Box property for spacing between Dash Icon and Elevated Button.

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      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(
      //Creating appbar
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Using Offstage Widget by Wrapping it with Container
            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,
            ),
            // creating elevated button and giving it the logic
                    ElevatedButton(
              onPressed: () {
                setState(() {
                  isHidden = !isHidden;
                });
              },
              child: Text(isHidden ? 'Show' : 'Hide'),
            )
          ],
        ),
      ),
    );
  }
}

Output: