Flutter UIKit

A Flutter plugin to demonstrate the set of widgets created for an app with available widget states. This plugin may be used either for widget testing or to for getting acquainted with widgets used in project.

Install

To use this plugin, add dash_kit_uikit as a dependency in your pubspec.yaml file.

Getting Started

Create or use existing widgets required for your app and create UiKitBuilder classes that will contain all required states for each individual widget.

class PrimaryButtonUiKitBuilder extends UiKitBuilder {
  @override
  Type get componentType => PrimaryButton;

  @override
  void buildComponentStates() {
    build(
      'Enabled Primary Button',
      Center(
        child: PrimaryButton(
          text: 'Enabled Primary Button',
          onPressed: () {},
          expanded: false,
        ),
      ),
    );
    build(
      'Disabled Primary Button',
      const PrimaryButton(text: 'Disabled Primary Button'),
    );
    build(
      'Expanded Primary Button',
      PrimaryButton(
        text: 'Enabled Primary Button',
        onPressed: () {},
        expanded: true,
      ),
    );
  }
}

Create UiKitPage configurator, using UiKit.register method. This function should contain list of UiComponentGroup elements for each individual group of widgets (buttons, input fields, etc.). Each component group receives the string for the group name and list of UiKitBuilder elements for each required widget.

void registerUiKitWidgetGroups() {
  UiKit.register(
    () => [
      UiComponentGroup('Text widgets', [
        TextUiKitBuilder(),
      ]),
      UiComponentGroup('Button widgets', [
        PrimaryButtonUiKitBuilder(),
        FlatButtonUiKitBuilder(),
      ]),
    ],
  );
}

Configure set of required widgets by registering widget groups in main.dart:

void main() {
  registerUiKitWidgetGroups();
  runApp(MyApp());
}

Place UiKitPage to required place:

@override
  Widget build(BuildContext context) {
    eturn MaterialApp(
      title: 'UIKit Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: UiKitPage(),
    );
  }

You can use componentWithPadding if neaded:

UiKitPage(componentWithPadding: true)

You can also check the example project.