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, and Error states 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.