Welcome back guys,Today we are going to learn some new quick technique by which we can enhance our flutter code readability.
We are going to create own Switch-Case like conditional widgets or same like bloc state (builder).
We will be going through basics,
What is Switch-Case?
In Dart, the switch statement is used for conditional branching based on the value of a variable. It provides a convenient way to execute different code blocks based on the value of an expression. The structure of a switch statement in Dart is as follows
switch (expression) { case value1: // Code to execute if expression matches value1 break; case value2: // Code to execute if expression matches value2 break; // Additional cases default: // Code to execute if none of the cases match the expression } Conditional Widget
In flutter, for example on the basis of condition you have to hide or show some widget,for example loading indicator so for that we can use visibility widget,if-else, or ternary operators.
If we have options then why we need switch case widget
- Visibility: we know that visible hide the specified on widget on given
booleanvalue,for example ```
Visibility(
visible: false,
child: Text("Hello,world")),
it is obviously good option but it will not work on multiple choices and it can be either Widget A or Widget B (if replacement specified). - if else or ternary operator: if else/ternary operator are useful to show conditional widget but when the no of cases increase it become difficult to read. ## Solution ??  for that we are going to create Switch-case like custom widget - Creating Custom StatelessWidget `SwitchCaseWidget`: class SwitchCaseWidget extends StatelessWidget {
final Widget? Function(T? t) stateBuilder;
final T activeState;
const SwitchCaseWidget({
super.key,
required this.stateBuilder,
required this.activeState,
});
@override
Widget build(BuildContext context) {
return stateBuilder(activeState) ?? const SizedBox.shrink();
}
}
Let's go through each part of the `SwitchCaseWidget` class and its functionality: 1. `class SwitchCaseWidget<T> extends StatelessWidget`: This line defines a Dart class named `SwitchCaseWidget` that is generic over a type `T`. It extends the `StatelessWidget` class, indicating that this widget does not have any mutable state. 2. `final Widget? Function(T? t) stateBuilder;`: It represents a function that takes a value of type `T` or nullable `T` and returns a widget or `null`. The function will be responsible for determining the widget to return based on the value passed to it. 3. `final T activeState;`: This line declares a final variable `value` of type `T`. It represents the value that will be passed to the `stateBuilder` function to determine the widget. The purpose of the `SwitchCaseWidget` class is to simplify the process of creating widgets based on different cases or values. By providing a `cases` function and a value, you can dynamically determine and render different widgets based on the provided value. - Before use it let's create states possible, for the following example I am going to have 3 states, - Loading State - Error State - Data Loaded State most commonly used states in flutter. abstract class WidgetSwitchCase {}
class LoadingWidgetCase extends WidgetSwitchCase {}
class ErrorWidgetCase extends WidgetSwitchCase {
final String message;
ErrorWidgetCase({required this.message});
}
class DataLoadedCase extends WidgetSwitchCase {
List data = List.generate(12, (index) => index);
}
Here's an explanation of each state class: 1. `LoadingWidgetCase`: This class represents the loading state of the widget. It is a subclass of `WidgetSwitchCase`, indicating that it is one of the possible cases handled by the `WidgetSwitchCase`. It doesn't have any additional properties or methods. 2. `ErrorWidgetCase`: This class represents the error state of the widget. It is also a subclass of `WidgetSwitchCase`. It has an additional property `message` of type `String` that stores the error message. When an instance of `ErrorWidgetCase` is used, the error message can be passed to it via the constructor. 3. `DataLoadedCase`: This class represents the state when data is successfully loaded. It is also a subclass of `WidgetSwitchCase`. It has an additional property `data` which is a `List<int>` holding some sample data. In this example, it generates a list of integers from 0 to 11 using the `List.generate` method. > Note : You can define your own custom states. ## Usage: It has very easy usage and also good readability SwitchCaseWidget(
activeState: switchCaseExample,
stateBuilder: (WidgetSwitchCase? value) {
if (value is LoadingWidgetCase) {
return const CircularProgressIndicator();
}
if (value is ErrorWidgetCase) {
return Text(
value.message,
style: const TextStyle(color: Colors.red, fontSize: 30),
);
}
if (value is DataLoadedCase) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: value.data
.map((e) => Text(
e.toString(),
style: const TextStyle(fontSize: 20),
))
.toList(),
),
);
}
//default case
return null;
}),
OUTPUT - Loading state:  - Error State  - Data loaded State  > Note: it is not going to reduce if-else condition but add more readability then normal if else in Flutter State widget. 
Top comments (0)