Quds UI Kit
This library consists of:
- Animating widgets with simple controlling, events capturing.
- Page Transitions
- Toasts
- Bottom sheets
- Dialogs
- Pagination
- Simple Drawer
- Splash Screen View
- Another Viewers
To use this package see the following example.
Animation:
Icons:
- QudsAnimatedIcon
A wrap widget to control Flutter AnimatedIcon easily.
QudsAnimatedIcon(
iconData: AnimatedIcons.play_pause,
showStartIcon: _isPlaying,
)
What if desired to combine another two icons?
- QudsAnimatedCombinedIcons
Combines any two icons and make a transition!
QudsAnimatedCombinedIcons(
startIcon: Icons.accessible,
endIcon: Icons.accessibility_new,
showStartIcon: _onChair,
),
You can customize the sizes, colors, transition duration and curve, ..etc.
- QudsAnimatedText
QudsAnimatedText(
_isPlaying ? 'Playing' : 'Paused',
)
- QudsAnimatedCounter
QudsAnimatedCounter(
counter,
duration: Duration(milliseconds: 200),
length: 4,
style: TextStyle(fontSize: 30),
)
Buttons
All animated icons in this library wrapped in buttons with capturing tap ability.
QudsAnimatedCombinedIconsButton(
tooltip: 'Toggle',
startIcon: Icons.arrow_forward,
// startIconColor: Colors.white,
onPressed: _toggle,
),
Other Buttons:
- QudsAnimatedIconButton
- QudsAnimatedCombinedIconsButton
- QudsCheckbox
- QudsCheckboxListTile
- QudsCheckboxWithText
Page Transitions
Wide collection of page route tranistion are now supported in Quds UI Kit
- Fade QudsFadePageRoute({duration, curve})
- Rotation QudsRotatePageRoute({duration, curve, alignment})
- Slide QudsSlidePageRoute({direction
`Up` `Down` `Left` `Right` `Start` `End`, duration, curve}) - Zoom QudsZoomPageRoute({duration, curve, alignment})
- Combined QudsTransitionPageRoute({withFade, withRotate, withSlide, withScale, rotateAlignment, scaleAlignment, duration, curve})
Navigator.push(
context,
QudsSlidePageRoute(
builder: (c) => _SecondScreen(),
slideDirection: SlideDirection.Up, //Default [SlideDirection.Start]
))
Toasts
Customized toasts with easy control,
showQudsToast(context,
content: Text('Copied!'),
toastTime: QudsToastTime.VeryShort,
leadingActions: [
QudsAutoAnimatedCombinedIcons(
startIcon: Icons.copy,
endIcon: Icons.paste,
showStartIcon: false,
)
])
Bottom Sheets
showQudsModalBottomSheet(
context,
(c) => Column(
children: [
for (int i = 0; i < 5; i++) ListTile(title: Text('Hi'))
],
),
titleText: 'Test Bottom Sheet')
Pagination
QudsCollectionPagination<_ExampleModel>(
resultsPerPage: itemsPerPage,
itemsPadding: EdgeInsets.all(2),
onResultsPerPageChanged: (p) {
page = 1;
itemsPerPage = p;
_fillItems();
},
currentPageItems: currItems,
onPageChanged: (p) {
page = p;
_fillItems();
},
selectedPage: page,
total: provider.list.length,
itemBuilder: (c, i, o) => ListTile(
title: Text(o.name),
subtitle: Text(o.id.toString()),
),
)
Dialogs
- General Dialogs
In general, to show a dialog, user showQudsDialog, for example:
showQudsDialog(context,
title: Text('Save'),
builder: (c) => Text(
'Would you like to save the document before existing?'));
- Pre-prepared dialogs:
This package provides some pre-customized dialogs:
showQudsConfirmDeleteDialog(context,
onDeletePressed: () => showQudsToast(context,
toastTime: QudsToastTime.VeryShort,
leadingActions: [
QudsAutoAnimatedCombinedIcons(
startIcon: Icons.delete, endIcon: Icons.done)
],
content: Text('Deleted!'),
trailingActions: [
InkWell(
onTap: () {
showQudsToast(context,
toastTime: QudsToastTime.VeryShort,
content: Text('Undo pressed'));
},
child: Container(
padding: EdgeInsets.all(5),
child: QudsAutoAnimatedCombinedIcons(
startIcon: CupertinoIcons.delete,
endIcon: CupertinoIcons.arrow_turn_up_left,
showStartIcon: false,
)))
]))
QudsLightDrawer
class MainDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return QudsLightDrawer(
bottomAboutButton: ...,
bottomButton: ...,
body: ...;
}
}
QudsPopupMenu
QudsPopupButton(
// backgroundColor: Colors.red,
tooltip: 'T',
items: getMenuItems(),
child: Icon(Icons.menu)),
List<QudsPopupMenuBase> getMenuItems() {
return [
QudsPopupMenuSection(
backgroundColor: Colors.yellow.shade200,
titleText: 'أبو أسعد الأمير',
subTitle: Text('See your profile'),
leading: Icon(
Icons.redeem,
size: 40,
),
subItems: [
QudsPopupMenuSection(
titleText: 'Settings',
leading: Icon(Icons.settings),
subItems: [
QudsPopupMenuItem(
leading: Icon(Icons.logout),
title: Text('Logout'),
onPressed: () {
showToast('Logout Pressed!');
})
]),
]),
QudsPopupMenuDivider(),
QudsPopupMenuItem(
leading: Icon(Icons.info_outline),
title: Text('Give Feedback'),
subTitle: Text('Help us improve our new app'),
onPressed: () {
showToast('Feedback Pressed!');
}),
QudsPopupMenuDivider(),
QudsPopupMenuSection(
leading: Icon(Icons.place),
titleText: 'Settings & Privacy',
subItems: [
QudsPopupMenuItem(
leading: Icon(Icons.settings),
title: Text('Settings'),
onPressed: () {
showToast('Settings Pressed!');
}),
QudsPopupMenuItem(
leading: Icon(Icons.lock),
title: Text('Privacy Checkup'),
onPressed: () {
showToast('Privacy Checkup Pressed!');
}),
QudsPopupMenuItem(
leading: Icon(Icons.lock_clock),
title: Text('Privacy Shortcuts'),
onPressed: () {
showToast('Privacy Shourtcuts Pressed!');
}),
QudsPopupMenuItem(
leading: Icon(Icons.list),
title: Text('Activity Log'),
onPressed: () {
showToast('Activity Log Pressed!');
}),
QudsPopupMenuItem(
leading: Icon(Icons.card_membership),
title: Text('News Feed Preferences'),
onPressed: () {
showToast('News Feed Preferences Pressed!');
}),
QudsPopupMenuItem(
leading: Icon(Icons.language),
title: Text('Language'),
onPressed: () {
showToast('Language Pressed!');
}),
]),
QudsPopupMenuDivider(),
QudsPopupMenuWidget(
builder: (c) => Container(
padding: EdgeInsets.all(10),
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {
showToast('Favourite Pressed!');
},
icon: Icon(
Icons.favorite,
color: Colors.red,
)),
VerticalDivider(),
IconButton(
onPressed: () {},
icon: Icon(
Icons.music_note,
color: Colors.blue,
)),
VerticalDivider(),
IconButton(
onPressed: () {},
icon: Icon(
Icons.umbrella,
color: Colors.green,
))
],
),
)))
];
}
QudsSplashView
class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: QudsSplashView(
progressIndicator: ...,
futures: [...],
onCompleted: ...,
),
);
}
}
Another Viewers
- For specific time
QudsDigitalTimeViewer(
hour: 10,
minute: 59,
second: 40,
milliSecond: 10,
),
- For live time:
QudsDigitalClockViewer(
showSeconds: true,
showMilliSeconds: true,
)
Libraries
- animations/quds_animated_combined_icons
- animations/quds_animated_counter
- animations/quds_animated_icon
- animations/quds_animated_text
- animations/quds_animated_widgets_flipper
- animations/quds_animations
- animations/quds_auto_animated_blur
- animations/quds_auto_animated_combined_icons
- animations/quds_auto_animated_icon
- animations/quds_auto_animated_opacity
- animations/quds_auto_animated_size
- animations/quds_auto_animated_slide
- animations/quds_scalable_pressable
- buttons/quds_checkbox
- buttons/quds_checkbox_list_tile
- buttons/quds_checkbox_with_text
- collections/quds_animated_listview
- collections/quds_collection_pagination
- collections/quds_collections
- collections/quds_column_of_rows
- icons/quds_icon_with_shadow
- icons/quds_icons
- quds_ui_kit
- Quds UI Kit provides
- screens/quds_border_modal_sheet
- screens/quds_bottom_sheet_container
- screens/quds_dialog
- screens/quds_light_drawer
- screens/quds_screens
- screens/quds_splash_view
- screens/quds_toast
- transitions/quds_blur_pageroute
- transitions/quds_fade_pageroute
- transitions/quds_rotate_pageroute
- transitions/quds_slide_pageroute
- transitions/quds_transition_pageroute
- transitions/quds_transitions
- transitions/quds_zoom_pageroute
- transitions/slide_direction
- transitions/zoom_type
- viewers/quds_digital_clock_viewer
- viewers/quds_digital_time_viewer
- viewers/quds_viewers