From 47fbde91eed78e7e36bc4e1edc1a56c1d4f447cf Mon Sep 17 00:00:00 2001 From: Rein Gundersen Bentdal Date: Sat, 16 Nov 2019 12:51:16 +0100 Subject: [PATCH 1/5] Create FUNDING.yml --- .github/FUNDING.yml | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..87dec7a --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,12 @@ +# These are supported funding model platforms + +github: ReinBentdal +patreon: # Replace with a single Patreon username +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] From 07a9f17a8406291bd4a7e643dfe7674dcfa6c0de Mon Sep 17 00:00:00 2001 From: Rein Gundersen Bentdal Date: Sat, 16 Nov 2019 13:08:40 +0100 Subject: [PATCH 2/5] minor fixes --- README.md | 161 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 89 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index 9784e6c..f10b2e7 100644 --- a/README.md +++ b/README.md @@ -2,22 +2,23 @@ A simple to use yet powerfull styling widget with syntax inspired by CSS. +- **[Getting started](#getting-started)** +- **[Example](#simple-example)** +- **[Widgets](#widgets)** + - [StyleClass](#styleclass) + - [GestureClass](#gestureclass) + - [Parent](#parent) + - [ParentStyle](parentstyle) + - [Txt](#txt) + - [TxtStyle](#txtstyle) +- **[Examples and best practices](examples-and-best-practices)** + ### Built with Division | [App designer](https://dribbble.com/shots/6459693-Creative-layout-design), [Code](https://github.com/ReinBentdal/division/blob/master/example/example/example_1.dart) | [Code](https://github.com/ReinBentdal/division/blob/master/example/example/example_form.dart) | |-|-| | | | -## Table of contents -| Category | Description | -|--------------|------------------------------| -| [Getting started](#gettingstarted) | Introduction to flutter | -| [StyleClass](#styleclass) | Abstract general style class | -| [ParentStyle](#parentstyle) | Style the Parent widget | -| [TxtStyle](#txtstyle) | Style the Txt widget | -| [GestureClass](#gestureclass) | Adds gestures to the widget | -| [Examples and best practices](#codeexamples)| Examples and practices when using Division | - -## Getting Started +## Getting Started This package includes at the moment a `Parent` widget and a `Txt` widget. As the name suggests the `Parent` widget takes a `child` along its `Division` properties. @@ -70,16 +71,11 @@ Txt( -### StyleClass - -The `StyleClass` is the super class of `ParentStyle` and `TxtStyle` and contains most of the style properties. +## Widgets +The fundament of styling with `division` is the `StyleClass` widget. This is an abstract class which all the other styling widgets extends. Therefore all the styling properties this widget has will also be available to the others, like `TxtStyle` and `ParentStyle` -To add a style to the `StyleClass`, call the style methods: `..[style]` - -On construction, choose how you want angles to be calculated - ```dart - Styleclass({AngleFormat angleFormat = AngleFormat.cycle}) - ``` +### StyleClass +The fundamental styling widget. #### Alignment ```dart @@ -300,7 +296,65 @@ By default the added `StyleClass` does not override already set style. Change ov ..[type](double dimension) ``` -### ParentStyle +### GestureClass +There is also the option to use the class `G` as a shorthand. + +To add a style to the `GestureClass`, use the ..[gesture] syntax. The two dots is used to not return the [gesture], but the `GestureClass`. + +#### isTap +```dart +..isTap((isTapped) => setState(() => pressed = isTapped)) +``` +Called whenever the tap state on the widget changes. +This replaces the use of `onTapDown`, `onTapUp` and `onTapCancel` together. + +#### Other +```dart +..onTap() +..onTapUp() +..onTapCancel() +..onDoubleTap() +..onTapDown() +..onLongPress() +..onLongPressStart() +..onLongPressEnd() +..onLongPressMoveUpdate() +..onLongPressUp() +..onVerticalDragStart() +..onVerticalDragEnd() +..onVerticalDragDown() +..onVerticalDragCancel() +..onVerticalDragUpdate() +..onHorizontalDragStart() +..onHorizontalDragEnd() +..onHorizontalDragCancel() +..onHorizontalDragUpdate() +..onHorizontalDragDown() +..onForcePressStart() +..onForcePressEnd() +..onForcePressPeak() +..onForcePressUpdate() +..onPanStart() +..onPanEnd() +..onPanCancel() +..onPanDown() +..onPanUpdate() +..onScaleStart() +..onScaleEnd() +..onScaleUpdate() +``` + +### Parent +```dart +Parent( + style: ParentStyle, + gesture: GestureClass, + chil: Widget +) +``` +As the name suggests this widget is a simple styled widget which takes a child. + +### ParentStyle `ParentStyle` extends `StyleClass` #### Add @@ -315,7 +369,18 @@ This adds together two `ParentStyle`s. The `override` property specifies if alre ``` This will clone the `ParentStyle` widget. This is usefull if you for example want to add more style to a widget without modifying the initial style. -### TxtStyle +### Txt +```dart +Txt( + String, + style: TxtStyle, + gesture: GestureClass, +) +``` +As the name suggests this widget is a simple styled widget which takes a `String` as its child. +This widget enables text styling with the `TxtStyle` widget. This also has the possibility to make the widget editable. + +### TxtStyle `TxtStyle` extends `StyleClass` #### Editable @@ -395,55 +460,7 @@ This adds together two `TxtStyle`s. The `override` property specifies if already ``` This will clone the `TxtStyle` widget. This is usefull if you for example want to add more style to a widget without modifying the initial style. -### GestureClass -There is also the option to use the class `G` as a shorthand. - -To add a style to the `GestureClass`, use the ..[gesture] syntax. The two dots is used to not return the [gesture], but the `GestureClass` - -#### isTap -```dart -..isTap((isTapped) => setState(() => pressed = isTapped)) -``` -Called whenever the tap state on the widget changes. -This replaces the use of `onTapDown`, `onTapUp` and `onTapCancel` together. - -#### Other -```dart -..onTap() -..onTapUp() -..onTapCancel() -..onDoubleTap() -..onTapDown() -..onLongPress() -..onLongPressStart() -..onLongPressEnd() -..onLongPressMoveUpdate() -..onLongPressUp() -..onVerticalDragStart() -..onVerticalDragEnd() -..onVerticalDragDown() -..onVerticalDragCancel() -..onVerticalDragUpdate() -..onHorizontalDragStart() -..onHorizontalDragEnd() -..onHorizontalDragCancel() -..onHorizontalDragUpdate() -..onHorizontalDragDown() -..onForcePressStart() -..onForcePressEnd() -..onForcePressPeak() -..onForcePressUpdate() -..onPanStart() -..onPanEnd() -..onPanCancel() -..onPanDown() -..onPanUpdate() -..onScaleStart() -..onScaleEnd() -..onScaleUpdate() -``` - -## Code examples and practices +## Examples and best practices #### Decoupling style from structure ```dart @@ -528,4 +545,4 @@ Widget build(BuildContext context) { child: Widget, ); } -``` \ No newline at end of file +``` From 1f6fcf63d9ae50440c6a7d357b5cf9b41f62e894 Mon Sep 17 00:00:00 2001 From: Rein Gundersen Bentdal Date: Sat, 16 Nov 2019 13:09:32 +0100 Subject: [PATCH 3/5] contents fix --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f10b2e7..40fcada 100644 --- a/README.md +++ b/README.md @@ -8,10 +8,10 @@ A simple to use yet powerfull styling widget with syntax inspired by CSS. - [StyleClass](#styleclass) - [GestureClass](#gestureclass) - [Parent](#parent) - - [ParentStyle](parentstyle) + - [ParentStyle](#parentstyle) - [Txt](#txt) - [TxtStyle](#txtstyle) -- **[Examples and best practices](examples-and-best-practices)** +- **[Examples and best practices](#examples-and-best-practices)** ### Built with Division | [App designer](https://dribbble.com/shots/6459693-Creative-layout-design), [Code](https://github.com/ReinBentdal/division/blob/master/example/example/example_1.dart) | [Code](https://github.com/ReinBentdal/division/blob/master/example/example/example_form.dart) | From 15acce342cc2d77c63f67b937b2730a12d865e31 Mon Sep 17 00:00:00 2001 From: Rein Gundersen Bentdal Date: Sat, 16 Nov 2019 13:14:47 +0100 Subject: [PATCH 4/5] Update README.md --- README.md | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 40fcada..16e453f 100644 --- a/README.md +++ b/README.md @@ -51,20 +51,26 @@ import 'package:division/division.dart'; #### Code ```dart -Txt( - 'Klick me' - style: TxtStyle() - ..textColor(Colors.white) - ..bold() - ..padding(horizontal: 30, vertical: 15) - ..background.hex('77A6F7') - ..borderRadius(all: 30) - ..alignment.center() - ..elevation(10, color: rgb(150,150,150)), - - gesture: GestureClass() - ..onTap(() => print('Button pressed')), -) +final buttonStyle = TxtStyle() + ..textColor(Colors.white) + ..bold() + ..padding(horizontal: 30, vertical: 15) + ..background.hex('77A6F7') + ..borderRadius(all: 30) + ..alignment.center() + ..elevation(10, color: rgb(150,150,150)); + +GestureClass buttonGestures() => GestureClass() + ..onTap(() => print('Button pressed')), + +Widget build(BuildContext) { +... + Txt( + 'Klick me' + style: buttonStyle, + gesture: buttonGestures, +... +} ``` #### The result From 22eb806a01833b4544414249549c5827f8da5ca6 Mon Sep 17 00:00:00 2001 From: Rein Gundersen Bentdal Date: Sat, 16 Nov 2019 13:15:16 +0100 Subject: [PATCH 5/5] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 16e453f..5803abc 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ GestureClass buttonGestures() => GestureClass() Widget build(BuildContext) { ... Txt( - 'Klick me' + 'Klick me', style: buttonStyle, gesture: buttonGestures, ...