flutter_conditional 2.1.0+2 flutter_conditional: ^2.1.0+2 copied to clipboard
A Flutter package for rendering widgets conditionally making code more readable.
flutter_conditonal #
Conditional rendering made easy! 💎
Developed with 💙 and maintained by scial.app
Migration 🆙 #
Migrating to 2.0.0
- Replace builder functions with named parameters:
Before #
class SomeWidget extends StatelessWidget {
Widget build(BuildContext context) {
final bool someCondition = false;
return Conditional.single(
someCondition,
builder: (BuildContext _) => WidgetA(),
fallbackBuilder: (BuildContext _) => WidgetB()
);
}
}
After #
class SomeWidget extends StatelessWidget {
Widget build(BuildContext context) {
final bool someCondition = false;
return Conditional.single(
condition: someCondition,
widget: WidgetA(),
fallback: WidgetB()
);
}
}
- Or make use of the methods introduced in version
2.1.0
:.singleBuilder(...)
.multiCaseBuilder(...)
.multiMatchBuilder<T>(...)
.optionalSingleBuilder(...)
.optionalMultiCaseBuilder(...)
.optionalMultiMatchBuilder<T>(...)
Quick Start 🚀 #
Installation 🧑💻 #
In the dependencies
section of your pubspec.yaml
, add the following line:
dependencies:
flutter_conditional: <latest_version>
Usage 👽 #
Import the package:
import 'package:flutter_conditional/flutter_conditional.dart';
Make use of the named constructors:
.single(...)
This constructor aims to be as simple as possible. This constructor lets you pass in a simple boolean expression.
class TrueOrFalseWidget extends StatelessWidget {
Widget build(BuildContext context) {
final bool ideaForName = false;
return Conditional.single(
condition: ideaForName,
widget: TrueWidget(),
fallback: FalseWidget()
);
}
}
.multiCase(...)
This constructor lets you pass multiple cases where every case consists of a boolean expression and a widget builder.
class MultiWidget extends StatelessWidget {
Widget build(BuildContext context) {
final int randomNumber = 69;
final String randomOS = 'Linux';
final bool isSchroedingersCatAlive = true; // Hopefully
return Conditional.multiCase(
cases: [
Case(
condition: randomNumber == 0,
widget: NumberWidget()
),
Case(
condition: randomOS == 'Linux',
widget: OSWidget() // <-- This is returned
),
Case(
condition: isSchroedingersCatAlive,
widget: SchroedingersWidget()
)
],
fallback: OtherWidget()
)
}
}
.multiMatch<T>(...)
This constructor lets you compare objects.
class CarWidget extends StatelessWidget {
Widget build(BuildContext context) {
final String carCompany = 'Tesla';
return Conditional.multiMatch<String>(
value: carCompany,
values: [
Value(
value: 'Tesla',
widget: TeslaWidget() // <-- This is returned
),
Value(
value: 'Mercedes',
widget: MercedesWidget()
),
Value(
value: 'BMW',
widget: BMWWidget()
)
],
fallback: OtherWidget()
);
}
}
or
enum Seasons {
summer,
autumn,
winter,
spring
}
class SeasonWidget extends StatelessWidget {
Widget build(BuildContext context) {
final Seasons season = Seasons.winter;
return Conditional.multiMatch<Seasons>(
value: season,
values: [
Value(
value: Seasons.summer,
widget: SummerWidget()
),
Value(
value: Seasons.autumn,
widget: AutumnWidget()
),
Value(
value: Seasons.winter,
widget: WinterWidget() // <-- This is returned
),
Value(
value: Seasons.spring,
widget: SpringWidget()
)
],
fallback: OtherWidget()
);
}
}
Additional features ⚜️ #
Optional Widgets #
In some cases you don't even want to render any widget if a given condition isn't fullfilled.
Therefore we introduced additional functions that can also return null
:
.optionalSingle(...)
.optionalMultiCase(...)
.optionalMultiMatch<T>(...)
Builder Functions #
In some cases you want to make use of builder functions instead. Therefore we introduced additional functions that accept builder functions:
.singleBuilder(...)
.multiCaseBuilder(...)
.multiMatchBuilder<T>(...)
.optionalSingleBuilder(...)
.optionalMultiCaseBuilder(...)
.optionalMultiMatchBuilder<T>(...)
isActive #
Sometimes you even want to make cases conditional. Therefore we introduces isActive
as a parameter. If you don't want one or more cases to be in considered for the build method, just pass true
to it like in the following example:
class ProfileWidget extends StatelessWidget {
Widget build(BuildContext context) {
final bool iLoveDart = true;
final bool possiblyChanging = false;
return Conditional.multiCase(
cases: [
Case(
condition: iLoveDart,
isActive: possiblyChanging,
widget: FirstWidget()
),
Case(
condition: iLoveDart,
widget: SecondWidget() // <-- This is returned
)
],
fallback: OtherWidget()
)
}
}
Rules ✅ #
-
Only cases marked as
isActive
will be considered. This is true by default. -
The first widget whose case is true will be returned.
-
The default fallback widget is
SizedBox.shrink()
if you're not using one of the functions introduced in version2.0.0
.
Contribution 💙 #
Always open for contribution! Contributors will be listed here.