Relation Widgets
A Flutter package providing relational widgets for conditional rendering, designed to make your code cleaner, more readable, and expressive.
This package offers a set of widgets that handle common conditional UI patterns, replacing messy if/else logic or ternary operators with declarative, self-documenting widgets.
Features
- EnemiesWidget: Manages two widgets that cannot coexist. Shows one based on a condition, with smooth transitions.
- ManyToOneWidget: Selects exactly one widget to display from a list of conditional candidates. Enforces strict exclusive selection.
- LoadWidget: A dedicated widget for handling
Loading,Loaded, andErrorstates with proper error handling logic.
Getting started
Add the package to your pubspec.yaml:
dependencies:
relation_widgets: ^0.0.1
Or run:
flutter pub add relation_widgets
Usage
EnemiesWidget
Use EnemiesWidget when you have two widgets that are "enemies" and cannot be shown at the same time (e.g., "Login" vs "Logout" button, or "Seller" vs "Buyer" view).
import 'package:relation_widgets/relation_widgets.dart';
// check if user is a seller
bool isItSeller() {
return true; // your logic here
}
EnemiesWidget(
firstWidget: Text("Im a seller"),
secondWidget: Text("Im a buyer"),
// Pass the function reference, cleaner than closures
showFirstWidgetWhen: isItSeller,
),
ManyToOneWidget
Use ManyToOneWidget when you have a list of potential widgets, but only one should be visible at a time based on complex specific conditions. It enforces that exactly one condition is met, helping you catch logical errors in your UI states.
import 'package:relation_widgets/relation_widgets.dart';
ManyToOneWidget(
conditionalChildren: [
ConditionalElement(
showWhen: () => userType == 'seller',
child: Text('Hello seller'),
),
ConditionalElement(
showWhen: () => userType == 'buyer',
child: Text('Hello buyer'),
),
ConditionalElement(
showWhen: () => userType == 'delivery',
child: Text('Hello delivery guy'),
),
],
),
LoadWidget
LoadWidget simplifies the common pattern of checking isLoading and hasError flags. It ensures you don't accidentally show a loading spinner when you have an error, or show content when it's still loading.
import 'package:relation_widgets/relation_widgets.dart';
LoadWidget(
loadStatus: LoadStatus.loading,
hasError: false,
loadingWidget: CircularProgressIndicator(),
loadedWidget: Text('Data Loaded Successfully'),
errorWidget: Text('Something went wrong'),
),
Additional information
This package aims to improve code readability by replacing imperative logic with declarative widgets.
For more examples, check the /example folder in the package repository.
Libraries
- relation_widgets
- A Calculator.