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 version 2.0.0.

Contribution 💙

Always open for contribution! Contributors will be listed here.