uic 0.6.2 uic: ^0.6.2 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:
- Deck - Shows stacked cards, that can be expanded and collapsed.
- 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.
Deck #
Displays stacked child widgets (typically cards), so the only headers are visible
initially. Each Deck
item can be expanded and collapsed.
This is an alternative to a BottomSheet widget, if you need to display multiple bottom sheets, which are coordinated.
- Supports separate views for collapsed and expanded state for each item.
- Animates expanding and collapsing.
Usage #
Import the package
import 'package:uic/widgets.dart';
Typically you will use Deck
in a Stack, where the first layer is your main content and a Deck
will overlap the conten.
The usage might look like this:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
YourMainWidget(),
Align(
alignment: Alignment.bottomCenter,
child: Deck(
items: [
DeckItem(
child: YourFirstItemCollapsedView(),
childExpanded: YourFirstItemExpandedView(),
),
DeckItem(
child: YourSecondItemCollapsedView(),
childExpanded: YourSecondItemExpandedView(),
),
],
),
),
]),
);
}
You must provide the list of DeckItem
objects, which defines both the collapsed and expanded appearance of your Deck items.
Additional parameters of Deck
widget:
Name | Description |
---|---|
collapsedSize |
The size of child widget in the collapsed state. |
expandedSize |
The size of child widget in the expanded state. |
mainAxisSize |
The maximum Deck size. |
See full example of Deck usage in demo app and package docs.
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.