conditional_builder 1.0.2

ConditionalBuilder #

Synchronous conditional widget builder.

Declaratively renders a widget based on a condition. Using this you can avoid implicit conditional statements in your code to show/hide a widget.

Use cases #

Conditional widget rendering #

Rendering widgets based on conditions can make your declarative UI looks pretty imperative, lets say we want to render an icon if some condition is met:

...
Widget build(BuildContext context) {
  return isEditing ? Icon(Icons.edit) : Container();
}

For these cases we have to return an empty Container if the condition is falsy, because we can not return null if something expects a Widget. Looks simple, but this is something you will be doing a lot, would be good to have a widget that does the dirty work for us, lets see the same UI using ConditionalBuilder:

...
Widget build(BuildContext context) {
  return ConditionalBuilder(
    condition: isEditing,
    builder: (context) => Icon(Icons.edit),
  );
}

Here we have a declarative UI and we do not have to deal with returning the Container.

Conditionally adding Widgets to list

Lets say we have a Column that displays three widgets:

Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Icon(Icons.edit),
        Icon(Icons.clear),
        Icon(Icons.add),
      ],
    );
}

But then, we have to render the clear Icon if one condition is met, we end up with something like this:

Widget build(BuildContext context) {
  final children = <Widget>[
    Icon(Icons.edit),
  ];

  if (isEditing) {
    children.add(Icon(Icons.clear));
  }

  children.add(Icon(Icons.add));

  return Column(
    children: children,
  );
}

We can turn this into:

Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Icon(Icons.edit),
      ConditionalBuilder(
        condition: isEditing,
        builder: (context) => Icon(Icons.clear),
      ),
      Icon(Icons.add),
    ],
  );
}

Be aware that even when you can not see the clear Icon, your list does have 3 (Two icons and an empty Container) widgets instead of 2, take that in mind if you are doing some sort of computation based on the list items, but, you get an more concise, declarative and maintainable code.

Usage #

After following the installation guide, you can use this widget as follow:

ConditionalBuilder(
  condition: true,
  builder: (context) {
    return Text('This gets rendered');
  },
 )

ConditionalBuilder(
  condition: false,
  builder: (context) {
    return Text('This does not get rendered, an empty Container will be rendered');
  },
)

ConditionalBuilder(
  condition: false,
  builder: (context) {
    return Text('This does not get rendered, as fallback is not null, it is used to render the fallback widget');
  },
  fallback: (context) {
    return Text('This gets rendered');
  }
)

[1.0.2] - 04/06/2019

  • Update docs.

[1.0.1] - 04/01/2019

  • Add more documentation.

[1.0.0] - 04/01/2019

  • Initial code for ConditionalBuilder.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  conditional_builder: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:conditional_builder/conditional_builder.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
60
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on Jul 15, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/conditional_builder.dart.

Run flutter format to format lib/conditional_builder.dart.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and conditional_builder.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test

Admin