common_ui_toolkit 0.3.5

common UI toolkit to clean your code and use it easily and reusable code.

Documentation Web Site Coming Soon...

Documentaion

• About Common Ui Toolkit
• Installing
• Components
  • Common Container
    • Common Container Props
    • CommonContainerModel
    • CommonContainerStyles
  • Common Text
    • CommonTextModel
    • CommonTextStyles
  • Common Button
    • CommonButtonModel
    • CommonButtonStyles
  • Common Text Input
    • CommonTextInputModel
    • CommonTextInputStyles

Contributors

Hassan Al-Najjar 🤔 💻 📖

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.

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 ⭐
• 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!(); } },