common_ui_toolkit 0.3.5+1 common_ui_toolkit: ^0.3.5+1 copied to clipboard
common UI toolkit to clean your code and use it easily and reusable code.
Documentation Web Site Coming Soon...
Documentaion #
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:
using defaults style:
|
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 | --- |
|
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 |
|
style | CommonTextModel() | CommonTextModel | child widget |
using CommonTextModel:
|
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 | --- |
|
onLongPress | --- | Function | --- |
|
style | CommonButtonModel() | CommonButtonModel | child widget |
using CommonButtonModel:
|
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 | --- |
|
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:
|
textEditingController | --- | TextEditingController | controller of the text iuput to get access to all text input attributes |
using TextEditingController:
|
onTap | --- | Function | This function gets called once the text input is pressed |
OnTap:
|