CI codecov style license

Widget Toolkit

The Widget Toolkit package consists of several lightweight and customisable UI components that boost productivity and reduce the development time.

Contents:

Demo

Item Picker (multi-select) Item Picker (single select) Language Picker
Address Widget Language Picker Language Picker
Search Picker Shimmer Launch URL
Address Widget Language Picker Language Picker
Error Bottom Sheet Text Field Dialog Address Dialog
Address Widget Language Picker Language Picker

How to use

In order to start using this package you need to add the dependency to the widget_toolkit in your pubspec.yaml file.

widget_toolkit: any

After that you can import any of the specific packages into your file and start using the described functionalities. For more information on specific widgets or functionalities the packages provide, please check the packages in the Contents section above.

Alternatively, you can import all of the packages by importing the following line:

import 'package:widget_toolkit/widget_toolkit.dart';

after which you are ready to start using the widgets in your app.

Setup

List of available themes:

  • WidgetToolkitTheme
  • ItemPickerTheme
  • LanguagePickerTheme
  • SearchPickerTheme
  • TextFieldDialogTheme
  • EditAddressTheme
  • QrScannerTheme

Step 1: Add the package as a dependency at pubspec.yaml, inside your work project

//Example
dependencies:
  flutter:
    sdk: flutter
  widget_toolkit:

Step 2: Pass the Theme extensions you needed to the ThemeData of your app

MaterialApp(
  theme: ThemeData.light().copyWith(
    extensions: <ThemeExtension<dynamic>>[
      ItemPickerTheme.light(),
    ],
  ),
  darkTheme: ThemeData.dark().copyWith(
    extensions: <ThemeExtension<dynamic>>[
      ItemPickerTheme.dark(),
    ],
  ),
  // other parameters...
);

Customization

Change the theme properties in order to change the visual outcome

...
extensions: [
      ItemPickerTheme.light().copyWith(
          backgroundColor: Colors.orange,
          iconColor: Colors.red,
          icon: Icons.ac_unit_outlined,
        ),
    ],
...

Libraries

asset_classes
assets
extensions
models
theme_data
widget_toolkit

UI Components

Common utilities

ui_components UI Components

Item Picker

Item Picker

item_picker Item Picker

Search Picker

Search Picker

search_picker Search Picker

Language Picker

Language Picker

language_picker Language Picker

Text Field Dialog

Text Field Dialog

text_field_dialog Text Field Dialog

Edit Address

Edit Address Dialog

edit_address Edit Address

Shimmer

Shimmer

shimmer Shimmer

URL Launcher

Open Url

open_url URL Launcher