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. <br/> <br/> <br/>

  • QudsAnimatedText <br/>
QudsAnimatedText(
          _isPlaying ? 'Playing' : 'Paused',
        )

<br/>

  • 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: ...;
  }
}

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

quds_animated_combined_icons
quds_animated_combined_icons_button
quds_animated_counter
quds_animated_icon
quds_animated_icon_button
quds_animated_listview
quds_animated_text
quds_animated_widgets_flipper
quds_animations
quds_auto_animated_blur
quds_auto_animated_combined_icons
quds_auto_animated_icon
quds_auto_animated_opacity
quds_auto_animated_size
quds_auto_animated_slide
quds_back_icon_button
quds_blur_pageroute
quds_border_modal_sheet
quds_bottom_sheet_container
quds_buttons
quds_checkbox
quds_checkbox_list_tile
quds_checkbox_with_text
quds_collection_pagination
quds_collections
quds_column_of_rows
quds_dialog
quds_digital_clock_viewer
quds_digital_time_viewer
quds_fade_pageroute
quds_icon_with_shadow
quds_icons
quds_light_drawer
quds_radian_button
quds_rotate_pageroute
quds_scalable_pressable
quds_screens
quds_slide_pageroute
quds_splash_view
quds_toast
quds_transition_pageroute
quds_transitions
quds_ui_kit
quds_viewers
quds_zoom_pageroute
slide_direction
zoom_type