In this guide, we will explore different techniques to achieve Conditional Widgets in Flutter rendering in Flutter with code examples.
Conditional widget display is a crucial aspect of building dynamic and responsive Flutter applications.
Flutter provides several methods to conditionally show widgets based on various factors such as user input, data availability, or application state.
Flutter provides various methods to conditionally show widgets based on different factors like user input, data availability, or application state.
In this guide, we will explore different techniques, including if-else statements, the ternary operator, enums, and switch cases, to achieve conditional widget rendering in Flutter with code examples.
Table of Contents
Conditional Widgets in Flutter with if-else Statements
One of the simplest ways to conditionally display widgets in Flutter is by using if-else statements within the build method.
Let’s consider an example where we want to display a different message based on whether a user is logged in or not.
class ConditionalWidgetExample extends StatelessWidget {
final bool isLoggedIn = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Conditional Widget Example'),
),
body: Center(
child: isLoggedIn
? Text('Welcome, User!')
: Text('Please log in to continue.'),
),
);
}
}
Conditional Widgets in Flutter with the ternary operator
Using the ternary operator is another concise way to achieve conditional rendering in Flutter.
class ConditionalWidgetExample extends StatelessWidget {
final bool isLoggedIn = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Conditional Widget Example'),
),
body: Center(
child: isLoggedIn
? Text('Welcome, User!')
: Text('Please log in to continue.'),
),
);
}
}
Conditional Widgets in Flutter with the Visibility Widget
The Visibility widget allows us to conditionally show or hide a widget based on a boolean value.
class ConditionalWidgetExample extends StatelessWidget {
final bool showContent = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Conditional Widget Example'),
),
body: Center(
child: Visibility(
visible: showContent,
child: Text('This content is visible.'),
),
),
);
}
}
Conditional Widgets in Flutter with the Builder Widget
The Builder widget is useful when we need to conditionally render widgets based on the build context.
import 'package:flutter/material.dart';
class ConditionalWidgetExample extends StatelessWidget {
final bool isLoggedIn = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Conditional Widget Example'),
),
body: Center(
child: Builder(
builder: (BuildContext context) {
if (isLoggedIn) {
return Text('Welcome, User!');
} else {
return TextButton(
onPressed: () {
// Navigate to login screen
},
child: Text('Login'),
);
}
},
),
),
);
}
}
Conditional Widgets in Flutter with Enums and Switch Cases
Using enums and switch cases can be beneficial when dealing with multiple conditions.
import 'package:flutter/material.dart';
enum UserRole { user, admin, guest }
class ConditionalWidgetExample extends StatelessWidget {
final UserRole role = UserRole.admin;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Conditional Widget Example'),
),
body: Center(
child: _buildWidgetBasedOnRole(role),
),
);
}
Widget _buildWidgetBasedOnRole(UserRole role) {
switch (role) {
case UserRole.user:
return Text('Welcome, User!');
case UserRole.admin:
return Text('Welcome, Admin!');
case UserRole.guest:
return Text('Welcome, Guest!');
default:
return Text('Unknown role!');
}
}
}
void main() {
runApp(MaterialApp(
home: ConditionalWidgetExample(),
));
}
This code defines a Flutter application that displays a welcome message based on the user’s role using enums and switch cases. The UserRole enum represents different roles (user, admin, and guest), and the _buildWidgetBasedOnRole function renders the appropriate message based on the provided role.
Finally, the main function runs the application by wrapping it in a MaterialApp widget and setting the home property to an instance of ConditionalWidgetExample.
Output:
Also Read:
Conclusion
In Flutter, displaying widgets conditionally is essential for creating interactive and user-friendly interfaces.
In this guide, we explored multiple techniques such as if-else statements, the ternary operator, the Visibility widget, and the Builder widget to achieve conditional widget rendering.
By mastering these techniques, you can build more dynamic and responsive Flutter applications.
You can visit Flutter official documentation for more.
