quickui 1.2.2

Make UI quickly, easily, and neatly.

Welcome to quickui

As the name suggests it's a quickie for UI development.
It will be easy, fast and you will enjoy it!

It simplifies the most commonly used widgets, methods, and use cases to build UI.

This package includes:

Modified standard widgets of flutter

• Container widget
• Animated Container widget
• Padding widget

Custom widgets commonly used

• Image widget

Utility methods and extensions for

• Text style
• System bar
• On click

Container_ Widget

• Paddings and Margins:

  • No need to use Edge Insets, resulting in more readable and concise code.

    Container_(
      topPadding: 10, // leftPadding: 10, rightPadding: 10, bottomPadding: 10,
      verticalPadding: 20, // horizontalPadding: 10,
      allPadding: 30,
      allMargin: 40, // Fields named with same pattern for padding
      color: Colors.blueAccent,
      child: const Text(
    'Custom container',
      ),
    );
    

  • Mix logic of values, Priority of values will be taken as most specified > horizontal or vertical > all

    Ex: Below container will have all sides 40 padding but the top padding will be 10.

    Container_(
          topPadding: 10,
          allPadding: 40,
          color: Colors.blueAccent,
          child: const Text(
            'Custom container',
          ),
        );
    

• Rounded Corners:

  • Direclty give corner radius and mix it up by common and specified values as above.

  • Ex: Below container will have all corner radius of 20  but the top left corner radius will be 5.

    Container_(
          topLeftRadius: 5, // topRightRadius, bottomLeftRadius, bottomRightRadius
          allCornerRadius: 20,
          color: Colors.blueAccent,
          child: const Text(
            'Custom container',
          ),
        );
    

• Borders:

  • Give border gradient, colour and width directly with an option to make borders outside.

    Container_(
       borderGradient: const LinearGradient(
         colors: [
           Colors.blueAccent,
           Colors.redAccent,
         ],
       ),
       // borderColor: Colors.blue,
       shouldMakeBorderOutside: true,
       borderWidth: 1,
       child: const Text(
         'Border container',
       ),
     );
    

• Styling:

  • Give gradient, shadows and make container circle shaped directly .

  • You need to give height or width for circle radius.

    Container_(
          gradient: const LinearGradient(
            colors: [
              Colors.blueAccent,
              Colors.redAccent,
            ],
          ),
          boxShadowList: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              spreadRadius: 5,
              blurRadius: 7,
              offset: const Offset(0, 3),
            ),
          ],
          shouldMakeCircle: true,
          height: 200,
          child: const Center(
            child: Text(
              'Styling container',
            ),
          ),
        );
    

• BG Image:

  • Directly add image as background in container with options to give alignment and fit.

    Container_(
          backgroundImageAssetName: 'asset/img_bg_auth_universal.png',
          backgroundImageAlignment: Alignment.topCenter,
          backgroundImageFit: BoxFit.cover,
          verticalPadding: 20,
          child: const Text(
            'Image container',
          ),
        );