quds_ui_kit 0.0.4+5

Flutter UI kit [animating icons, buttons, texts, counter, digital clock) - page transitions - toasts - dialogs- pagination - splash screen ...etc ]

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

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,
      )