Common Ui Toolkit

pub package pub points popularity likes

Documentation Web Site Coming Soon...

Documentaion

Contributors

Hassan Al-Najjar
Hassan Al-Najjar

πŸ€” πŸ’» πŸ“–
Alaa Alzibda
Alaa Alzibda

πŸ€” πŸ’» πŸ“–

License

MIT license.

About Common Ui Toolkit

  • Common UI toolkit is a Flutter UI package that allows you creating stunning multi-brand cross-platform mobile applications. It contains a set of general purpose UI components styled in a similar way. And the most awesome thing: the themes can be changed in the runtime, with no need to reload the application.

Common ui toolkit Material

What's included

  • 25+ general-purpose components designed and tested to save your time.

  • Comprehensive clear documentation with the tons of examples.

  • Theming System - Use Light and modern Dark themes and create your own.

Starter App

Common UI toolkit Tricks – allows you to boost the development of a mobile app.

There is a huge variety of customizable layouts, use β€œas is” or add new blocks.

Over 40 screens in dark and light themes give you the possibility to create a bright and exclusive app while saving your time on compiling numerous details. Also, you can download the source code and use it for your own benefit.

How can I support the developers?

  • Give us a tump from here
  • Star our GitHub repo :star:
  • Join us in the Common UI toolkit channel in Discourd

Installing

Add Common Ui Toolkit to your pubspec.yaml file:

dependencies:
  common_ui_toolkit:

Import Common Ui Toolkit in files that it will be used:

import 'package:common_ui_toolkit/common_ui_toolkit.dart';

Components

CommonContainer

 CommonContainer(
                isLoading: false,
                loadingWidget: CommonText(),
                onPress: ()=>{},
                child: CommonText(
                  style: CommonTextStyles().h2Style(),
                  text: 'Circle',
                ),
                style: CommonContainerModel()
              ),

CommonContainerProps

name default type description Example
child --- Widget child widget ```dart code ```
isLoading false bool handel the data after loading and check if the data null or not. ---
loadingWidget --- Widget custome loading widget. ---
style CommonContainerModel() CommonContainerModel child widget using CommonContainerModel:
    CommonContainerModel(
     alignment: Alignment.center,
     loadingColor: 0xff123155,
     )

using defaults style:

   CommonContainerStyle().bottomShadow
   or
   CommonContainerStyle().fullShadow
onPress --- Widget child widget ```dart code ```

CommonText

CommonText(
                containerStyle: CommonContainerModel(
                  padding: 0.016,
                  borderRadius: 0.016,
                  marginVertical: 0.016,
                  backgroundColor: COMMON_BLACK_COLOR,
                  touchEffect: TouchableEffect(),
                ),
                style: CommonTextStyles().h2Style().copyWith(
                      fontColor: COMMON_WHITE_COLOR,
                      // backgroundColor: COMMON_WHITE_COLOR,
                      // fontWeight: FontWeight.bold,
                    ),
                text: 'Simple common text',
                onPress: () {
                  print('Simple common text pressed');
                },
              ),

CommonTextProps

name default type description Example
text --- String text that will show up 'Simple common text'
onPress --- Function ---
    onPress: () {}
leftChild --- Widget child widget ```dart code ```
rightChild --- Widget child widget ```dart code ```
bottomChild --- Widget child widget ```dart code ```
topChild --- Widget child widget ```dart code ```
inlineSpans --- List In case you need to set different spans inside the text
     inlineSpans: [
                  TextSpan(
                    text: ' RED ',
                    style: TextStyle(
                      color: Color(COMMON_RED_COLOR),
                    ),
                  ),
                  TextSpan(text: 'icon color!'),
                ],
style CommonTextModel() CommonTextModel child widget using CommonTextModel:
   CommonTextModel(
                  decoration: TextDecoration.underline,
                  decorationThickness: 3.0,
                  decorationColor: COMMON_RED_COLOR,
                  decorationStyle: TextDecorationStyle.dotted,

                  /// decorationStyle: TextDecorationStyle.wavy,
                  fontWeight: FontWeight.bold,
                  fontSize: COMMON_H1_FONT,
                )
text --- String text that will show up 'Simple common text'
containerStyle CommonContainerModel() CommonContainerModel child widget You can find it up there

CommonButton

CommonButton(
                text: 'Button with elevation and custom size',
                containerStyle: CommonContainerModel(
                  width: 0.4,
                  height: 0.1,
                ),
                style: CommonButtonModel(
                  elevation: 10.0,
                  borderRadius: 0.1,

                  // You can customize the button elecation OR use the default one
                  // customElevation: MaterialStateProperty.all(100)

                  // You can customize the overlay color as well OR use the default one
                  // customOverlayColor: MaterialStateProperty.resolveWith(
                  //   (states) {
                  //     return states.contains(MaterialState.pressed)
                  //         ? getColorType(Colors.red)
                  //         : null;
                  //   },
                  // ),

                  // You can customize the background color of the button
                  // cutomBackgroundColor: MaterialStateProperty.all(
                  //   Colors.amber,
                  // ),
                ),
              ),

CommonButtonProps

name default type description Example
text --- String text that will show up 'Simple common button'
onPress --- Function ---
    onPress: () {}
onLongPress --- Function ---
    onLongPress: () {}
style CommonButtonModel() CommonButtonModel child widget using CommonButtonModel:
CommonButtonModel(
                  elevation: 10.0,
                  borderRadius: 0.1,

                  // You can customize the button elecation OR use the default one
                  // customElevation: MaterialStateProperty.all(100)

                  // You can customize the overlay color as well OR use the default one
                  // customOverlayColor: MaterialStateProperty.resolveWith(
                  //   (states) {
                  //     return states.contains(MaterialState.pressed)
                  //         ? getColorType(Colors.red)
                  //         : null;
                  //   },
                  // ),

                  // You can customize the background color of the button
                  // cutomBackgroundColor: MaterialStateProperty.all(
                  //   Colors.amber,
                  // ),
                ),
containerStyle CommonContainerModel() CommonContainerModel child widget You can find it up there
textContainerStyle CommonContainerModel() CommonContainerModel child widget You can find it up there
textStyle CommonTextModel() CommonTextModel child widget You can find it up there
child --- Widget child widget ```dart code ```

CommonTextInput

CommonTextInput(
                style: CommonTextInputModel(
                  text: 'Intial text input value',
                  focusBorderColor: COMMON_BLACK_COLOR,
                  prefixIcon: CommonIcon(
                    onPress: () {
                      print('Prefix icon pressed');
                    },
                    containerStyle: CommonContainerModel(
                      marginHorizontal: DEVICE_WIDTH * 0.01,
                    ),
                    path: Icons.ac_unit_rounded,
                    iconDataSize: DEVICE_WIDTH * 0.05,
                    color: COMMON_RED_COLOR,
                  ),
                  suffixIcon: CommonIcon(
                    containerStyle: CommonContainerModel(
                      width: DEVICE_WIDTH * 0.04,
                      height: DEVICE_WIDTH * 0.04,
                      marginHorizontal: DEVICE_WIDTH * 0.01,
                    ),
                    color: COMMON_RED_COLOR,
                    path: 'assets/icons/account_icon.svg',
                  ),
                ),
              ),

CommonTextInputProps

name default type description Example
style CommonTextInputModel CommonTextInputModel ---
    CommonTextInputModel(
                  counterText: 'Styled counter Text',
                  counterStyle: TextStyle(
                    color: Colors.red,
                  ),
                  borderWidth: 3,
                  focusBorderColor: COMMON_RED_COLOR,
                  fillColor: COMMON_GREY_COLOR,
                  prefixWidget: CommonText(
                    containerStyle: CommonContainerModel(
                      marginHorizontal: DEVICE_WIDTH * 0.03,
                    ),
                    style: CommonTextModel(
                      fontColor: COMMON_WHITE_COLOR,
                    ),
                    text: '+966',
                  ),
                  suffixWidget: CommonText(
                    containerStyle: CommonContainerModel(
                      marginHorizontal: DEVICE_WIDTH * 0.03,
                    ),
                    style: CommonTextModel(
                      fontColor: COMMON_WHITE_COLOR,
                    ),
                    text: 'Palestine',
                  ),
                )
containerStyle CommonContainerModel() CommonContainerModel child widget You can find it up there
text --- String text that will show up 'Simple common button'
containerStyle CommonContainerModel() CommonContainerModel child widget You can find it up there
onChanged --- Function Once the value of the text input changes this functions gets triggered and returns the changed value using on changed function:
onChanged: (value) {
         
        }
textEditingController --- TextEditingController controller of the text iuput to get access to all text input attributes using TextEditingController:
textEditingController: TextEditingController(),
onTap --- Function This function gets called once the text input is pressed OnTap:
 onTap: () {
          if (onTap != null) {
            onTap!();
          }
        },

Libraries

color
common_button
common_button_model
common_button_style
common_container
common_container_model
common_container_styles
common_date_time_picker
common_icon
common_picker_timeline
common_text
common_text_input
common_text_input_model
common_text_model
common_text_styles
common_touchable
common_ui_toolkit
UI library for flutter.
constants
date_format
date_model
date_time_picker_theme
date_widget
dimen
helper
i18n_local_types
index
index
index
index
index
index
index
index
index
index
index
style
tap
touchable_effect