uic 0.5.0 uic: ^0.5.0 copied to clipboard
A set of Flutter UI components that simplifies implementing most used UI cases.
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:
- InlineTextField - Text view with ability to inline edit its content.
- StepIndicator - Simple, but customizable step/page indicator.
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
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
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.
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)
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.