UIC (UI Components)

A set of Flutter widgets that simplifies implementing most used UI cases.

Components:

  • CheckboxUic - Enhanced Checkbox that maintain its state, has a title and can show additional description in each state.
  • ListUic - Wrapper of ListView, which implements related data loading and state management logic.
  • ProgressUic - Wrapper of ProgressIndicator with additional text.

Widgets:

CheckboxUic

Enhanced, but still simple, checkbox widget. Unlike original Checkbox widget, CheckboxUic maintain its state. Also it has a title and can show an additional description.

  • Supports all original parameters of Checkbox Flutter widget
  • Has initial value
  • Shows a title, which can be individual for checked and unchecked state
  • Optionally shows additional text description, which can be individual for checked and unchecked state
  • Supports custom widgets instead of text description

CheckboxUic Demo

Usage

Import the package

import 'package:uic/checkbox_uic.dart';

Simple usage of CheckboxUic:


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CheckboxUic(
          initialState: true,
          title: 'Show additional description',
          description: 'This is description for checked state.',
          descriptionUnchecked: 'CheckboxUic can show description text, which can be '
              'individual for each state (checked and unchecked).',
          onChanged: (value) {
            print('$value');
          },
      ),
    );
  }

See more examples in demo app.

ListUic

Almost each app has screens that display a list of items. Simple task at first look, it often requires much related staff to be implemented. All that boilerplate can be simplified with ListUic widget.

Features:

  • Pull to Refresh gesture to reload list data
  • Pagination (infinite scroll) to load next part of data on scroll to the end of the list
  • Progress indicator for initial data loading
  • Individual view for empty data
  • Individual error view
  • Progress indicator at the end of list when next page of items is loading
  • Showing snack bar on failing loading data

ListUic Demo ListUic Demo ListUic Demo

Usage

Import the package

import 'package:uic/list_uic.dart';

Add ListUicController to your page's state:


class _MyHomePageState extends State<MyHomePage> {

  ListUicController<int> _controller;
  ...

  @override
  void initState() {
    super.initState();
    _controller = ListUicController<int>(
      onGetItems: (int page) => _getItems(page),
    );
    ...
  }
  ...
}

Add ListUic widget to your widget tree:


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListUic<int>(
        controller: _controller,
        itemBuilder: (item) {
          return ListTile(
            title: Text('Title ${item}'),
            subtitle: Text('Subtitle ${item}'),
          );
        },
      ),
    );
  }

Implement a function that will return a list of items:


  Future<List<int>> _getItems(int page) async {
    ...
  }

Read the docs for available customization options.

Also you can check demo app for details of using ListUic widget.

InlineTextField

Makes Text view editable. In the view mode is shows a normal Text widget (or your custom view). On double tap it is switching to editing mode, and allow user to inline edit the text.

  • Supports text styling in both view and editing mode.
  • Supports text field decoration in the editing mode.
  • Uses minimalistic appearance of text field in editing mode by default.
  • Notifies when user done editing text.
  • Supports custom widget to show in view mode instead of normal Text widget.

InlineTextField Demo

Usage

Import the package

import 'package:uic/widgets.dart';

Simple usage of InlineTextWidget:


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Row(
          children: <Widget>[
            Text('You can '),
            InlineTextField(
              text: 'edit me',
              style: Theme.of(context).textTheme.bodyText1.copyWith(
                color: Colors.lightBlueAccent,
              ),
              onEditingComplete: (value) {
                _scaffoldKey.currentState.showSnackBar(SnackBar(
                  backgroundColor: Theme.of(context).accentColor,
                  content: Text(value),
                ));
              },
            ),
            Text(' right here'),
          ],
        ),
    );
  }

See more available options of InlineTextField examples in demo app and package docs.

StepIndicator

Simple, but customizable step (page) indicator. It can be useful to show a current item in sliders and carousels, or a current page in a flow where user has to pass through a sequence of screens.

  • Supports custom colors for completed, selected and incomplete steps.
  • Optionally shows lines connecting step items.
  • Supports custom line colors, width and length.
  • Can be expanded, to fit parent size.
  • Horizontal or vertical orientation (NOT IMPLEMENTED YET)
  • Notifies when user select a step. (NOT IMPLEMENTED YET)
  • Supports custom widgets for complete, selected and incomplete steps.
  • Builder function that allow to define individual view for each step. (NOT IMPLEMENTED YET)

StepIndicator Examples

Usage

Import the package

import 'package:uic/widgets.dart';

Simple usage of StepIndicator:


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
          child: StepIndicator(
            selectedStepIndex: 2,
            totalSteps: 5,
          ),
        ),
    );
  }

You must provide the current step index and total number of steps.

See more available options of StepIndicator in demo app and package docs.

Libraries

checkbox_uic
inline_text_field
list_uic
login_uic
progress_uic
step_indicator
widgets