Open In App

How to use Conditional Statement on Widget in Flutter?

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.


M

matif44ze3l
Improve
Article Tags :

Explore

Lightbox