dash_kit_uikit

Description:

dash kit uikit

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,
),
);
}
}
copied to clipboard

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(),
]),
],
);
}
copied to clipboard

Configure set of required widgets by registering widget groups in main.dart:
void main() {
registerUiKitWidgetGroups();
runApp(MyApp());
}
copied to clipboard

Place UiKitPage to required place:
@override
Widget build(BuildContext context) {
eturn MaterialApp(
title: 'UIKit Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: UiKitPage(),
);
}
copied to clipboard
You can use componentWithPadding if neaded:
UiKitPage(componentWithPadding: true)
copied to clipboard

You can also check the example project.