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)