Outputting Widgets Conditionally in Flutter

UI is able to create a beautiful app with Flutter. Flutter provides a conditional widget. We can hide and show a widget using conditions on flutter application. 

Let’s talk about an example of a hide and show widget in a mobile application.

Method 1 : Using if condition

This is flutter way to display a widget if the condition is true.

Syntax
 if (condition) 
   Widget()
 import 'package:flutter/material.dart';

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

 class HomeScreen extends StatefulWidget {
   @override
   _MyDemoState createState() => _MyDemoState();
 }

 class _MyDemoState extends State<HomeScreen> {
   bool checked = true;
   @override
   Widget build(BuildContext context) {
     return Container(
        child: Container(
       padding: const EdgeInsets.only(top: 100),
       color: Colors.white,
       child: Column(
         children: <Widget>[
           if (checked) Image.asset('assets/images/company_logo.png'),
           Container(
             padding: const EdgeInsets.all(10),
             child: OutlinedButton(
                 onPressed: () {
                   setState(() {
                     if (checked) {
                       checked = false;
                     } else {
                       checked = true;
                     }
                   });
                 },
                 child: Container(
                   padding: const EdgeInsets.all(10),
                   child: Text("Click to Visible"),
                 )),
           ),
         ],
       ),
     ));
   }
 }
Output


Method 2 : Using ternary operator(?:)

This operator work like if and else condition.

Syntax
 condition ? Widget() : OtherWidget()
 import 'package:flutter/material.dart';

 void main() {
   runApp(HomeScreen());
 }
 
 class HomeScreen extends StatefulWidget {
   @override
   _MyDemoState createState() => _MyDemoState();
 }
 
 class _MyDemoState extends State<HomeScreen> {
   bool checked = true;

   @override
   Widget build(BuildContext context) {
     return Container(
         child: Container(
       padding: const EdgeInsets.only(top: 100),
       color: Colors.white,
       child: Column(
         children: <Widget>[
           checked ? Image.asset('assets/images/company_logo.png') : Container(),
           Container(
             padding: const EdgeInsets.all(10),
             child: OutlinedButton(
                 onPressed: () {
                   setState(() {
                     checked ? checked = false : checked = true;
                   });
                 },
                 child: Container(
                   padding: const EdgeInsets.all(10),
                   child: Text("Click to Visible"),
                 )),
           ),
         ],
       ),
     ));
   }
 }
Output


Method 3: Custom function

This operator work like if and else condition.

Syntax
   Widget condition() {
  Widget widget;
     switch (checked) {
     case true:
         widget = Image.asset('assets/images/company_logo.png');
     break;
    case false:
       widget = Container(child: Text("How are you ?"),); 
     break;
    default:
    widget = Container();
   }
     return widget;
 }


 import 'package:flutter/material.dart';
 
 void main() {
   runApp(HomeScreen());
 }

 class HomeScreen extends StatefulWidget {
   @override
   _MyDemoState createState() => _MyDemoState();
 }

 class _MyDemoState extends State<HomeScreen> {
   bool checked = true;

   @override
   Widget build(BuildContext context) {
    return Container(
        child: Container(
          padding: const EdgeInsets.only(top: 100),
          color: Colors.white,
          child: Column(
            children: <Widget>[
              condition(),
              Container(
                padding: const EdgeInsets.all(10),
                child: OutlinedButton(
                    onPressed: () {
                      setState(() {
                        checked? checked = false: checked = true;
                      });
                    },
                    child: Container(
                      padding: const EdgeInsets.all(10),
                      child: Text("Click to Visible"),
                    )),
              ),
            ],
          ),
        ));
   }

   Widget condition() {

    Widget widget;
    switch (checked) {
      case true:
        widget = Image.asset('assets/images/company_logo.png');
        break;
      case false:
        widget = Container(child: Text("How are you ?"),);
        break;
      default:
        widget = Container();
     }
     return widget;
   }
 }

 

Output


Happy coding!

365Bloggy May 30, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1218
Zoom In and Out to TextView in Android
0 418
How to underline text in textview
0 347
Shine Effect in Android
0 298
How to Create Marquee Text in Android?
0 268
Our blogs
Archive