Open In App

OffStage Widget in Flutter

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 08 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads