OffStage Widget in Flutter

Offstage is a widget of Flutter . It's used to Hide or show any widget programmatically depending on user action. An offstage widget is a widget that lays the child available for hit testing without taking any room in the parent of Mobile application. In this article, we will learn about the Offstage widget and how to implement it.

Constructor:

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

 Properties:

  • OffStage Properties: The child widget is hidden when the offstage property is set to true.
  • Key: The widget key is used to control .
  • Child: The widget below this widget in the tree.

Step-by-Step Implementation


Step 1: Create a New Project in Android Studio (File >new flutter project). 


Step 2: Adding material package 

Import method the runApp method in the main function call first while run the application.  

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget 

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Below code write a OffStage in a Flutter.
 Offstage(
   offstage: isHidden,
   child: Container(
     width: 200,
     height: 200,
     child: Image.asset(
         "asset Path",
         width: 300
     ),
   ),
 ),
Step 5: Final code of Offstage widget.
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';

 void main() {
   runApp(Offstagewidget());
 }

 class Offstagewidget extends StatefulWidget {
   const Offstagewidget({Key? key}) : super(key: key);
   @override
   State<Offstagewidget> createState() => _MyHomePageState();
 }

 class _MyHomePageState extends State<Offstagewidget> {
   bool isHidden = false;
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('Candidroot Solutions'),
         centerTitle: true,
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Offstage(
               offstage: isHidden,
               child: Container(
                width: 200,
                height: 200,
                child: Image.asset(
                    "assets/images/company_logo.png",
                    width: 300
                ),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  isHidden = !isHidden;
                });
               },
               child: Text(isHidden ? 'Show' : 'Hide'),
             )
           ],
         ),
       ),
     );
   } 
 }

 

Step 6: Output of above example.


Happy coding!

365Bloggy June 17, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1215
Zoom In and Out to TextView in Android
0 415
How to underline text in textview
0 344
Shine Effect in Android
0 294
How to Create Marquee Text in Android?
0 265
Our blogs
Archive