How to use Conditional statement in widget in flutter?

Hello guys how are you all? Hope you all are fine. Many times as developers we have to implement logic where we have to set certain widgets in certain conditions.  This type of functionality is called Controlling widgets using conditional statements. Here are too many ways to use Conditional statements in a widget in the flutter. We can use the if-else, nested If-Else, and Switch case statements in the widget.

We cannot directly use any conditional statement in Widget build return code but using custom widget build method we can easily Flutter Use Conditional Statement in Child Widget Container widget, Center widget, and any other widgets.

There are Several Methods to use Conditional statements in a widget in the flutter. Here I am Explain As Many as possible methods.

How to use Conditional statement in widget in flutter?

Here We will take a look for below all methods with example.

1. Using the ternary operator.
2. Using If Statement.
3. Using a method.
4. Using the switch statement.

Lets use All methods one by one.

1. Using the ternary operator

I think Easiest method to use Conditional statement in widget in flutter is By Using the ternary operator. Its as simple as possible. Lets see Quick Example Here.

Suppose we have a variable named networkImage. We want if networkImage is null then view Assets Image else view networkImage. Here we are going to use Ternary Operators.

          Container(
              height: 200,
              width: 200,
              child: networkImage != null
                  ? Image(
                      image: NetworkImage(
                        networkImage,
                      ),
                    )
                  : Image(
                      image: AssetImage('assets/asset_img.jpeg'),
                    ),
            ),

2. Using If Statement

I personally use if/else statement in children with this kind of block statement. It only supports on Dart version 2.3.0 above.

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            if (networkImage == null) ...[
              Container(
                height: 200,
                width: 200,
                child: Image(
                  image: AssetImage('assets/asset_img.jpeg'),
                ),
              ),
            ] else ...[
              Container(
                height: 200,
                width: 200,
                child: Image(
                  image: NetworkImage(networkImage),
                ),
              ),
            ]
          ],
        ),

3. Using a method

      body: Center(
        child: getWidget(),
      ),

  getWidget() {
    return networkImage == null
        ? Container(
            height: 200,
            width: 200,
            child: Image(
              image: AssetImage('assets/asset_img.jpeg'),
            ),
          )
        : Container(
            height: 200,
            width: 200,
            child: Image(
              image: NetworkImage(networkImage),
            ),
          );
  }

4. Using the switch statement

First of all make method switchWithMonth()

  void switchWithMonth() {
    switch (month) {
      case 'January':
        print('Running Month is January');
        break;

      case 'February':
        print('Running Month is February');
        break;

      case 'March':
        print('Running Month is March');
        break;

      case 'April':
        print('Running Month is April');
        break;

      case 'May':
        print('Running Month is May');
        break;

      case 'June':
        print('Running Month is May');
        break;

      case 'July':
        print('Running Month is May');
        break;

      case 'August':
        print('Running Month is May');
        break;

      default:
        print('Running Month is January');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Using the switch statement - Fluttercorner.com'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: RaisedButton(
                onPressed: () => switchWithMonth(),
                child: Text('Use Switch Case'),
                textColor: Colors.white,
                color: Colors.green,
                padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
              ),
            ),
          ],
        ),
      ),
    );
  }

Summery

So, It’s All About this error. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• CERTIFICATE_VERIFY_FAILED: unable to get local issuer certificate in flutter
• SocketException: OS Error: Connection refused, errno = 111 in flutter
• No MediaQuery widget found in flutter
• Execution failed for task ‘:app:mergeDexDebug’ in flutter
• The parameter ‘key’ can’t have a value of ‘null’ because of its type, and no non-null default value is provided