Merge branch 'master' of https://github.com/ReinBentdal/division

ReinBentdal · Nov 16, 2019 · 8825a66 · 8825a66
2 parents 8927833 + 22eb806
commit 8825a66
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 86 deletions.
diff --git a/.github/FUNDING.yml 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']
diff --git 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) |
 |-|-|
 | <img src="https://raw.githubusercontent.com/ReinBentdal/division/master/example/assets/demo_app.gif" width="250"> | <img src="https://raw.githubusercontent.com/ReinBentdal/division/master/example/assets/form_demo.gif" width="250"> |
 
-## 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 |
-
-## <span name="gettingstarted">Getting Started</span>
+## 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.
@@ -50,36 +51,37 @@ 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
 
 <img src="https://raw.githubusercontent.com/ReinBentdal/division/master/example/assets/simple_example.jpg" width="300">
 
-### <span name="styleclass">StyleClass</span>
-
-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 +302,65 @@ By default the added `StyleClass` does not override already set style. Change ov
 ..[type](double dimension)
 ```
 
-### <span name="parentstyle">ParentStyle</span>
+### 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 +375,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.
 
-### <span name="txtstyle">TxtStyle</span>
+### 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 +466,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.
 
-### <span name="gestureclass">GestureClass</span>
-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()
-```
-
-## <span name="codeexamples">Code examples and practices</span>
+## Examples and best practices
 
 #### Decoupling style from structure
 ```dart
@@ -528,4 +551,4 @@ Widget build(BuildContext context) {
     child: Widget,
   );
 }
-```
+```