uic 0.5.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 87

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.

[0.5.0] - 2020-06-04 #

  • Added StepIndicator widget
  • Update docs

[0.4.2] - 2020-05-02 #

  • Bug fixes
  • Update docs

[0.4.0] - 2020-04-30 #

  • Added InlineTextField widget

[0.3.3] - 2020-04-11 #

  • Added CheckboxUic component

[0.2.0] - 2020-03-03 #

  • Support pagination (infinite scrolling)

[0.1.0] - 2020-02-26 #

  • Support pull to refresh gesture

[0.0.3] - 2020-02-26 #

  • Update config

[0.0.2] - 2020-02-26 #

  • Fix docs

[0.0.1] - 2020-02-26 #

UIC (UI Components) is a set of Flutter widgets that simplifies implementing most used UI cases.

Each UIC widget uses standard Flutter widgets to implements its view, but adds additional logic, like state management, and parameters to customize its appearance.

Here is the list of available components:

  • ListUic - Wrapper of ListView, which implements related data loading and state management logic.
  • ProgressUic - Wrapper of ProgressIndicator with additional text.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:uic/widgets.dart';

import 'listuic_screen.dart';
import 'loginuic_screen.dart';
import 'checkboxuic_screen.dart';

import 'step_indicator.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'UIC Demo',
      theme: Theme.of(context).copyWith(
        primaryColor: Colors.blueGrey,
        accentColor: Colors.amber,
        toggleableActiveColor: Colors.amber,
        dividerColor: Colors.transparent,
      ),
      home: MyHomePage(title: 'UIC Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: Text(widget.title),
          bottom: TabBar(
            indicatorColor: Theme.of(context).accentColor,
            tabs: [
              Tab(text: 'Components',),
              Tab(text: 'Widgets'),
            ],
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: TabBarView(
            children: [
              ListView(
                children: <Widget>[
                  Card(
                    child: ListTile(
                      contentPadding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 16.0, right: 16.0),
                      title: Text('ListUic'),
                      subtitle: Text('Wrapper of ListView, which implements related data '
                          'loading and state management logic.'),
                      onTap: () {
                        Navigator.push(context,
                          MaterialPageRoute(builder: (context) => ListUicScreen(title: 'ListUic Demo')),);
                      },
                    ),
                  ),
                  Card(
                    child: ListTile(
                      contentPadding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 16.0, right: 16.0),
                      title: Text('LoginUic'),
                      subtitle: Text('The component, implementing a login form and Sign In / Sign Up flows.'),
                      onTap: () {
                        Navigator.push(context,
                          MaterialPageRoute(builder: (context) => LoginUicScreen(title: 'LoginUic Demo')),);
                      },
                    ),
                  ),
                  Card(
                    child: ListTile(
                      contentPadding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 16.0, right: 16.0),
                      title: Text('CheckboxUic'),
                      subtitle: Text('Enhanced checkbox that maintain its state, has a'
                          'title and can show additional description in each state.'),
                      onTap: () {
                        Navigator.push(context,
                          MaterialPageRoute(builder: (context) =>
                              CheckboxUicScreen(title: 'CheckboxUic Demo')),);
                      },
                    ),
                  ),
                ],
              ),
              ListView(
                children: <Widget>[
                  Card(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, ),
                      child: ExpansionTile(
                        title: Text('InlineTextField',
                          style: GoogleFonts.robotoMono(
                            fontWeight: FontWeight.bold,
                            color: Colors.lightBlueAccent,
                          ),
                        ),
                        subtitle: Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Text('Makes Text widget editable. Double tap on the text '
                            'will show inline input text field instead of static text.',
                            style: Theme.of(context).textTheme.body2.copyWith(
                              color: Colors.black54,
                            ),
                          ),
                        ),
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(16.0),
                            child: Row(
                              children: <Widget>[
                                Text('You can '),
                                InlineTextField(
                                  text: 'edit me',
                                  style: Theme.of(context).textTheme.body1.copyWith(
                                    color: Colors.lightBlueAccent,
                                  ),
/*
* Check the commented parameters below to learn available customization options
*/
//                                  child: Row(
//                                    children: [
//                                      Icon(Icons.add, color: Colors.lightBlueAccent,),
//                                      Text('Add text',
//                                        style: Theme.of(context).textTheme.bodyText1.copyWith(
//                                          color: Colors.lightBlueAccent,
//                                        )
//                                      ),
//                                    ],
//                                  ),
//                                  styleEditing: Theme.of(context).textTheme.bodyText1.copyWith(
//                                    color: Colors.lightBlueAccent,
//                                  ),
//                                  decoration: InputDecoration()
//                                    ..applyDefaults(Theme.of(context).inputDecorationTheme),
                                  onEditingComplete: (value) {
                                    _scaffoldKey.currentState.showSnackBar(SnackBar(
                                      backgroundColor: Theme.of(context).accentColor,
                                      content: Text(value),
                                    ));
                                  },
                                ),
                                Text(' right here'),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Card(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, ),
                      child: ExpansionTile(
                        title: Text('StepIndicator',
                          style: GoogleFonts.robotoMono(
                            fontWeight: FontWeight.bold,
                            color: Colors.lightBlueAccent,
                          ),
                        ),
                        subtitle: Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Text('Simple, but highly customizable steps (or pages) indicator',
                            style: Theme.of(context).textTheme.bodyText1.copyWith(
                              color: Colors.black54,
                            ),
                          ),
                        ),
                        children: [
                          ...examplesStepIndicator(context),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  uic: ^0.5.0

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:uic/checkbox_uic.dart';
import 'package:uic/inline_text_field.dart';
import 'package:uic/list_uic.dart';
import 'package:uic/login_uic.dart';
import 'package:uic/progress_uic.dart';
import 'package:uic/step_indicator.dart';
import 'package:uic/widgets.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
74
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
87
Learn more about scoring.

We analyzed this package on Jun 5, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health suggestions

Fix lib/progress_uic.dart. (-0.50 points)

Analysis of lib/progress_uic.dart reported 1 hint:

line 71 col 44: 'headline' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is headline5. This feature was deprecated after v1.13.8..

Format lib/checkbox_uic.dart.

Run flutter format to format lib/checkbox_uic.dart.

Format lib/list_uic.dart.

Run flutter format to format lib/list_uic.dart.

Format lib/login_uic.dart.

Run flutter format to format lib/login_uic.dart.

Format lib/step_indicator.dart.

Run flutter format to format lib/step_indicator.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
provider ^4.0.0 4.1.3
url_launcher ^5.4.2 5.4.10
Transitive dependencies
collection 1.14.12
flutter_web_plugins 0.0.0
meta 1.1.8
nested 0.0.4
platform_detect 1.4.0
plugin_platform_interface 1.0.2
pub_semver 1.4.4
sky_engine 0.0.99
typed_data 1.1.6
url_launcher_macos 0.0.1+7
url_launcher_platform_interface 1.0.7
url_launcher_web 0.1.1+6
vector_math 2.0.8
Dev dependencies
flutter_test