How to Show Conditional Widgets in Flutter?

In Flutter app development, we need to display and utilize the app’s content or data under different conditions. Any content, data, text, or simply the value is displayed in a Flutter app in the form of widgets. Because a Flutter app is all about widgets. So we need to show conditional widgets in Flutter using different methods.

This blog will cover each aspect of showing conditional widgets in Flutter app development. Learn how to effectively show widgets in any Flutter app based on different conditions.

Overview

Traditional conditions are much more helpful when it comes to gesture widgets. You can use the traditional conditions to display widgets easily. With the help of ‘if’ or ‘else’ condition, you can call the values or widgets to be displayed. 

Here is an example:

main() {
  d();
}
void d() {
  if (true) {
    print('abc');
  } else {
    print('xyz');
  }
}

But the problem is, we cannot use the traditional conditions within the widget tree. This is because we cannot use brackets {} inside the widget tree due to obvious reasons. So we need to use ternary operators to use conditions inside the widget tree. It is the best way to show conditional widgets in Flutter.

Here are the different ways in which you can show widgets conditionally inside the widget tree.

Ternary Conditional Operator in Flutter

The ternary conditional operator (?) in Flutter is quite a useful tool that helps you show flutter widgets according to your desired conditions. It operates on the basis of two operands. One is the IF operand and the other is ELSE. 

So, in case the IF operand is true it will display the value it has declared. And if the IF operand condition is false, the operator will display the value of the ‘else’ operand. 

Here is the sample code to use the ternary conditional operator inside the widget tree.

@override
build(BuildContext context) {
  return Column(
    children: [
if (name == 'Bashir') 
   Text('Widget 1') 
else 
   Text('Widget 2'),
],
  );
}

Now as you can see, we didn’t use {} anywhere in between the build context or the widget tree. 

Interestingly, the if/else statement here works the same way it does in traditional conditions. The only difference is that we use it inside the widget tree without adding curly brackets.

Showing Multiple Widgets Using List Append

As you have seen the two ways to call a conditional widget, these method can only single widgets. Most of the time we need to call multiple widgets inside a widget tree. 

So what if we need to call multiple conditional widgets? Here is the way to do it. 

You can simply use the list append method and call multiple widgets inside the widget tree.

@override
build(BuildContext context) {
  return Column(
    children: [
if (name == 'Bashir') ...[
        Text('Rashid'),
        Text('Haroon'),
      ] else ...[
        Text('Zain'),
        Text('Arish'), 
],
  );
}

So what goes here is if the IF condition is true, the multiple widgets specified in it will be displayed. In the code above, we have defined ‘Rashid’ and ‘Haroon’ to be called if the IF condition is true. 

You can call as many widgets as you can. And same goes for the ELSE condition. You can add multiple widgets simultaneously.

It’s not over yet. There is another way to call widgets with multiple conditions. It is by creating a function outside the widget tree and then calling it inside the widget tree.

How to do it? Here it is. 

Creating a Function to Show Conditional Widgets

One of the ways to show conditional widgets in Flutter is creating a function and then calling it inside the widget tree.

Here is the example of using functions to show conditional widgets in Flutter.

Widget w() {
  if (name == 'Bashir') {
    /// any other task
    return Text('I am Bashir');
  } else {
    /// any other task
    return Text('I am not Bashir');
  }
}
@override
build(BuildContext context) {
  return Column(
    children: [
w(),
    ],
  );
}

As you can see, we first created a widget outside the widget tree and then called function “w()” inside the widget tree.

So the if and else condition works here the same. If the IF condition is true that is ‘name==Bashir, the function will display text “I am Bashir”. Otherwise “I am not Bashir” will be displayed as it is defined in the ELSE statement.

Moreover, you can also create any additional task alongside each condition.

Conclusion

We hope that you get a clear understanding of how we can show conditional widgets in Flutter. The 4 discussed ways are the only effective and common ways in which we can show widgets according to our desired condition. If you are looking to develop a Flutter app and need professional assistance, don’t hesitate to hire Flutter developers who can help you implement these techniques and create a top-notch app.

After all, if you still have any confusion or suggestions, feel free to reach out to us or comment below. We would love to hear from you. Thank you for standing by. Cheers!