How to use Conditional Statement on Widget in Flutter?

Last Updated : 24 Apr, 2025

Handling conditions is not too much difficult in Flutter. We can easily write our conditions based on the requirements which we are acquiring from our application. Let’s work on conditions in flutter Apps. In this article, we’ll talk about conditions and how we handle elements or widgets by using conditions.

Dart

// ignore_for_file: prefer_const_constructors 
  
import 'package:flutter/material.dart'; 
  
void main()  { 
  runApp(MyApp()); 
} 
  
class MyApp extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
   return MaterialApp( 
        home: MyConditions(), 
      ), 
    ); 
  } 
}

So here we have a boilerplate code that is calling our conditions class inside materialapp widget. Now let’s work on MyConditions class.

Dart

import 'package:flutter/material.dart'; 
  
class MyConditions extends StatefulWidget { 
  const MyConditions({super.key}); 
  
  @override 
  State<MyConditions> createState() => _MyConditionsState(); 
} 
  
class _MyConditionsState extends State<MyConditions> { 
  } 
  
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar(), 
      body: Column( 
        mainAxisAlignment: MainAxisAlignment.center, 
        children: [ 
          InkWell( 
            child: Container( 
              height: 100, 
              width:  : 100, 
              decoration: BoxDecoration( 
                  color: Colors.orange, 
                  borderRadius:                        
                       BorderRadius.circular(0)), 
            ), 
          ), 
        ], 
      ), 
    ); 
  } 
} 

Here we have a simple stateful widget and inside stateful, we have a container widget inside inkwell. Let’s write our condition

Dart

bool istap = false; 
  void control() { 
    setState(() { 
      istap = !istap; 
    }); 
  } 

So here we have a bool variable istap which is initially false. The void function is used to change the state of the variable whenever this function will hit by the user.

Dart

import 'package:flutter/material.dart'; 
  
class MyConditions extends StatefulWidget { 
  const MyConditions({super.key}); 
  
  @override 
  State<MyConditions> createState() => _MyConditionsState(); 
} 
  
class _MyConditionsState extends State<MyConditions> { 
  bool istap = false; 
  void control() { 
    setState(() { 
      istap = !istap; 
    }); 
  } 
  
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar(), 
      body: Column( 
        mainAxisAlignment: MainAxisAlignment.center, 
        children: [ 
          InkWell( 
            onTap: control, 
            child: Container( 
              height: istap ? 300 : 100, 
              width: istap ? 300 : 100, 
              decoration: BoxDecoration( 
                  color: istap ? Colors.deepPurple : Colors.orange, 
                  borderRadius: istap 
                      ? BorderRadius.circular(100) 
                      : BorderRadius.circular(0)), 
            ), 
          ), 
        ], 
      ), 
    ); 
  } 
} 

Here inside our container, we are calling our condition with ? and : expressions. Basically ? is used as an If operator in flutter and : is used as an else operator. So here in our above example, we are testing inside container height, width, and color if the condition is true then change its height and width to 300 by 100 and color to deeppurple by orange.

How to Get Coordinates Widgets using rect_getter Package in Flutter?

matif44ze3l

Improve

Article Tags :

How to use Conditional Statement on Widget in Flutter?

Dart

Dart

Dart

Dart

Similar Reads

Thank You!

What kind of Experience do you want to share?