Overview:

In this guide I'll discuss what is Flutter Conditional Show Widget and how to use Flutter conditional Widget in Flutter Android and IOS Apps. This is a very important and very Great Concept in Flutter Programming. In Flutter App Development or dart programming we use Ternary Operators and some time we use If and Else conditions.

Why we use Conditions in Flutter Apps?

What do you understand by the word conditions? If we take our daily life example so in one day we deals with different conditions and than we take different decisions according to our conditions. Now Assume the same conditions in your Flutter Application or Dart Programming and take decisions programatically. So in simple words these are the conditions that we use in our Flutter Apps now I give a examples to you like:

Example of Condition:

If i said to you make a Dart Program and take one input from user which is the User Age and your condition is you have to check Is user Age is greater than 18 or not. If user age is Greater than 18 than take decision and Print Welcome to my Shop otherwise print Sorry you have no permission. 

Solution: 

Now how you can do this there are two different ways are provided by flutter. So first of All we will talk about IF & Else Conditions and than we will discuss about Ternary Operators. Solution of the above example is given below check this and try to understand how we use conditions.

void main() {
 
 
  int age = 18;
 
  if(age >=18){
    print("Hi! Welcome to my Shop");
  }else{
        print("Sorry you have no permission");

  }
 
}

Explanation of Conditions in Flutter:

As you can see I set the condition in my program which is if Age of the customer is greater than 18 than say Welcome otherwise Say sorry to the customer. Now in this case condition is true because by default age is 18 so anytime when we will run this program the output will be Hi! Welcome to my shop. Make this program more interesting by using Dynamic age. Get Age from User and than make conditions accordingly. If you are using this concept in your Flutter App than make a GUI and than set this method in init state. Hide the Widget if Age is less than 18 and show the widget if age is greater than 18. Hint: (Use Visibility widget to hide and show the wrapped widgets). By the way in the end of this Article i will share the complete information about this how to hide and show the widget conditionally.

Ternary Operators in Flutter to Show Widget on conditions:

Ternary Operators are used in Dart Programming to make conditions. But the syntax os Ternary Operator is totally different from IF & Else Statements. But both are used for same purpose but in Flutter Programming we use Ternary Operators to make conditions and than we show widget according to our conditions. Ternary Operators make everything easier for us. Like if you want to show some widgets in your Application if User Age is 18 otherwise you want to show Alert Dialog Box. In which we mentioned User below 18 Age is not allowed.
We will create this in Flutter App but first of all we will do this in Dart Programming than we use this in Our Flutter App to show widgets.

Syntax of Ternary Operator to Make Condition:

(Condition)?print(Decision 1):print("Decision 2");


Example of Ternary Operator:

void main() {
 
 
  int age = 18;
 
  (age>= 18) ? print("Hello! Welcome") : print("Sorry");
 
}


Explanation:

As you can see in the above example we are making condition and taking decision without IF and ELSE Statements. So we are using Ternary Operators. Ternary Operators are very easy to use. Specially if you are building Flutter Applications than Ternary Operators will help you to show or hide the widget instantly.
Ok now I am explaining this Example. 

Step No 1 to Make Condition with Ternary Operators:

First of all see in the brackets we make the condition so do the samething in all programs. In Ternary operators first of all we make Condition in Brackets.

Step No 2:

And than we use ? (Question Mark) Basically Question mark indicate If Condition is true so in shortcut we write ? So after question mark mean if our condition is true ?

Step No 3:

Than we take the decision If our Condition is true. So In above example as you can see we Print the "Hello Welcome!" message because Age>=18 so according to our program this condition is 100% true. So if condition is true than he take the decision.

Step No 4:

After taking the decision we use :(Colon). Basically in Ternary Operators : Colon indicates If the first condition is not true than the decision that we are taking after Colon will be called by Flutter. Let's assume If Age>=18 this condition is false than the code we write after Colon will be called and he print Sorry as Output.

Flutter Conditional Show Widget in Flutter App:

Now After understanding how Ternary Operator and Conditional Statements work let's move to the Flutter Application. Here we will create an Flutter App and in this Application we will show widgets using Conditions. You can use this concept according to your need. 
First of all I will create a new Empty Project and than we will make a simple UI in which we use two Text Widgets and One Button. When user will Click on Button than we will make condition and than we take decision to hide or show the widget. 

First of all check this code in this Code I am Using Ternary Operators and when condition is true than I am showing Light is ON but If Condition is False than I am showing Light is OFF.

bool _ISON = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child:Scaffold(
          backgroundColor: Colors.black,
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Visibility(
                  visible: true,
                  child:
                  // Using Ternary Operator to Show Widget
                  _ISON?
                  Text("Light Is On",
                  style: TextStyle(color: Colors.white),)
                  :Text("Light Is Off",
                  style: TextStyle(color: Colors.white),),
                 
                  ),
                        SizedBox(height: 20,),
             InkWell(
              onDoubleTap: (){
                 setState(() {
                _ISON = true;

                });
              },
              onTap: (){
                setState(() {
                _ISON = false;

                });

              },

               child: Container(
                  height: 40,
                  width: 100,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(20)
                ),
                child: Center(
                child: Text("Press me",
                style: TextStyle(color: Colors.white),)),
               ),
             )
              ],
            ),
          ),
        )),
    );

Explanation of flutter conditional show widget Code:

We create conditions on the behalf of True or False. So that's why I create a Boolean _ISON;  And simply I'm using Two Text widgets and one Button in My Flutter Application. And For showing Text I am using Ternary operators. As you can see in the code I use condition using Ternary Operator the Condition is IF _IOS ? is True than Show Light is ON Text Widget otherwise Show Light Is OFF. By default _IOS is true so Light is ON Text widget shows when app run and when someone press the button than I call the set state and change the value of _IOS to false. So According to our Condition If _IOS is false than show Light is OFF widget.
So This is the simple logic behind Ternary Operators this is just a basic example for your Understanding you can do alot of fun with Ternary operators. 

UI Interface of Above Flutter Conditional show widget Example: