Learn Pain Less

HomeOur TeamContact
Flutter Conditional Show Widget: A Comprehensive Guide
Pawneshwer Gupta
Pawneshwer Gupta
March 04, 2023
2 min

Table Of Contents

Using the Conditional Operator
Using the If-Else Statement
Flutter Conditional Show Widget using custom library
Flutter Conditional Show Widget: A Comprehensive Guide

Flutter – Outputting Widgets Conditionally

Flutter is an increasingly popular mobile app development framework, enabling developers to create beautiful and high-performance applications for both Android and iOS platforms. Featuring a comprehensive array of widgets and tools that make creating user interfaces simple for developers.

Flutter’s conditional widget output capability makes it one of its standout features, giving developers control over which widgets to show based on specific conditions such as application state or data being displayed. This gives Flutter its edge for creating interactive web experiences with complex user interactions.

In this article, we’ll look at various methods developers can use Flutter to output widgets conditionally, with examples showing how it could be implemented into real applications.

Using the Conditional Operator

Flutter provides a shorthand method for writing an if/else statement; often used for conditionally outputting widgets based on an boolean value.

The syntax for the conditional operator is as follows:

condition ? widget1 : widget2

If the condition is met, then widget1 will be shown; otherwise widget2 will take its place.

Here is an example:

bool isButtonEnabled = true;
return Column(
children: [
isButtonEnabled ? ElevatedButton(
onPressed: () { /* do something */ },
child: Text('Enabled'),
) : ElevatedButton(
onPressed: null,
child: Text('Disabled'),

In this example, an ElevatedButton widget is displayed conditionally based on the value of an isButtonEnabled boolean variable. If it is true, an enabled button is displayed; otherwise a disabled one.

Using the If-Else Statement

Flutter provides developers with an if-else statement as a more verbose means of outputting widgets conditionally, and this allows for greater control when specifying more complex conditions and actions.

The syntax for an If/Else statement is as follows:

if (condition) {
// code to execute if condition is true
} else {
// code to execute if condition is false

Here is an example of how this can be used to output widgets conditionally:

bool isLoggedIn = false;
return Column(
children: [
if (isLoggedIn)
Text('Welcome back!'),
onPressed: () { /* do something */ },
child: Text('Log in'),

Flutter Conditional Show Widget using custom library

What is a Conditional Show Widget?

Conditional Show Widgets in Flutter allow you to show or hide individual widgets based on a condition. This could be any expression that evaluates to a boolean value.

Using the Flutter Conditional Show Widget

To utilize the Flutter Conditional Show Widget in your project, first import its package by including this code into your pubspec.yaml file:

sdk: flutter
conditional_builder: ^1.0.0

Once your package has been imported, you can begin using the Conditional Show Widget.

Here is an example of how to use the widget:

condition: true,
builder: (BuildContext context) => Text('This text will be shown'),
fallback: (BuildContext context) => Text('This text will be hidden'),

As shown above, when set to true, the Conditional Show Widget displays “This text will be shown”. Otherwise, if its condition were false, its default text “This text will be hidden”.

Advanced Usage

Flutter Conditional Show Widget can also be utilized in more advanced scenarios. For instance, it can be used to display or hide entire sections of your user interface based on user input - for an example of this functionality please follow this link:

bool _showSection = false;
condition: _showSection,
builder: (BuildContext context) => Column(
children: [
Text('Section 1'),
Text('Section 2'),
Text('Section 3'),
fallback: (BuildContext context) => Container(),
onPressed: () {
setState(() {
_showSection = !_showSection;
child: Text('Toggle Section'),

In the example shown here, the Conditional Show Widget displays a column of text widgets when the _showSection variable is set to true. A RaisedButton below the widget allows a user to toggle this setting and show or hide this column of text widgets as required.


Overall, the Flutter Conditional Show Widget is an invaluable tool that enables users to display or hide widgets based on specific conditions. By employing this widget effectively, dynamic, responsive user interfaces that meet users’ individual needs can be created quickly and efficiently. We hope that this guide has shown how best to leverage its power.

Learn Flutter in 90 days with Pawneshwer!

Dart Beginners Course in Hindi free of cost for limited period.

Start Learning







Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.




Pawneshwer Gupta

Pawneshwer Gupta

Software Developer

Pawneshwer Gupta works as a software engineer who is enthusiastic in creating efficient and innovative software solutions.



Social Media

Related Posts

[Solved] Fixing cmdline-tools component is missing Error in Flutter
[Solved] Fixing cmdline-tools component is missing Error in Flutter
August 03, 2023
1 min
Learn Pain Less  © 2024, All Rights Reserved.
Crafted with by Prolong Services

Quick Links

Advertise with usAbout UsContact Us

Social Media