division 0.7.0

Division #

A simple to use yet powerfull styling widget with syntax inspired by CSS.

Built with Division #

App designer #

Code #

Getting Started #

The Division widget has 3 properties. A style property, a gesture property and a child property. As simple as that!

  style: StyleClass, 
  gesture: GestureClass, 
  child: Widget,

Having all style gathered at one place has alot of advantages. For example

  • It is easy to outsource the style into variables or to a completely different place.
  • It is easy to read and understand
  • Easy to learn if you already know CSS
  • Much more

Simple example #

Import #

import 'package:division/division.dart';

Code #

  style: StyleClass()
    ..padding(horizontal: 30, vertical: 15)
    ..borderRadius(all: 30)
    ..elevation(10, color: rgb(150,150,150)),

  gesture: GestureClass()
    ..onTap(() => print('Button pressed')),
  child: Text('Klick me', style: myTextStyle),

The result #

Style property #

The style property expects a StyleClass which is a class holding all the styling for the widget.

There is also the option to use the class S as a shorthand.

StyleClass #

To add a style to the StyleClass, call the style methods: ..[style]

On construction, choose to use radians or not when giving circular values.

 Styleclass({bool useRadians = false})

Alignment #

..alignment.[alignment] // alignment.topCenter()

Alignment of the widget itself, not the child.

Align child #

..alignmentChild.[alignment] // alignment.topCenter()

Alignment of the child.

Padding #

..padding({double all, 
      double horizontal, 
      double vertical, 
      double top, 
      double bottom, 
      double left, 
      double right})

All properties work together. padding(all: 10, top: 30) is valid

Margin #

..margin({double all,
      double horizontal,
      double vertical,
      double top,
      double bottom,
      double left,
      double right})

All properties work together. margin(all: 10, top: 30) is valid

Background color #

..background.rgba(int, int, int, [double])

color format options: hex('#xxxxxx'), rgba(int, int, int, double) or [Color].

Background image #

      {String url, 
      String path, 
      ColorFilter colorFilter, 
      BoxFit fit, 
      AlignmentGeometry alignment = Alignment.center, 
      ImageRepeat repeat = ImageRepeat.noRepeat})

Eighter the [url] or the [path] has to be specified. [url] is for network images and [path] is for local images.

Background blur #

..background.blur(double blur)

Blurs the background. Can be used for example to achieve a "frosted glass" effect:


Does not work together with rotate().

Gradient #

..linearGradient({AlignmentGeometry begin = Alignment.left,
      AlignmentGeometry end = Alignment.right,
      @required List<Color> colors,
      TileMode tileMode = TileMode.clamp,
      List<double> stops})

      {AlignmentGeometry center = Alignment.center,
      double radius = 0.5,
      @required List<Color> colors,
      TileMode tileMode = TileMode.clamp,
      List<double> stops})

      {AlignmentGeometry center = Alignment.center,
      double startAngle = 0.0,
      double endAngle, // default to 1.0 or 2 * pi, depending on if radians is enabled or not
      @required List<Color> colors,
      TileMode tileMode = TileMode.clamp,
      List<double> stops})

Choose between 3 gradient variants. sweepGradient() by default does not use radians for the startAngle and the endAngle. By default 0.25 equals 45 degrees, 1 equals one full turn etc. To change to use radians do: StyleClass(useRadians: true)...

color format options: hex('#xxxxxx'), rgb(int, int, int), rgba(int, int, int, double) or [Color].

Opacity #

..opacity(double opacity)

Opacity applied on the whole widget.

Value must not be negative.

Border #

      {double all,
      double left,
      double right,
      double top,
      double bottom,
      Color color = const Color(0xFF000000),
      BorderStyle style = BorderStyle.solid})

Choose between all, left, right, top and bottom. all works together with the other properties. color format options: hex('#xxxxxx'), rgb(int, int, int), rgba(int, int, int, double) or [Color].

Border radius #

      {double all,
      double topLeft,
      double topRight,
      double bottomLeft,
      double bottomRight})

It is valid to use all together with single sided properties. Single sided properties will trump over the all property.

Box shadow #

      {Color color = const Color(0x33000000),
      double blur,
      List<double> offset,
      double spread})

color format options: hex('#xxxxxx'), rgb(int, int, int), rgba(int, int, int, double) or [Color]. If defined while the elevation property is defined, the last one defined will be the style applied. offset is given in the format [double dx, double dy]

Elevation #

      double elevation,
      {double angle = 0.0,
      Color color = const Color(0x33000000),
      double opacity = 1.0})

Elevates the widget with a boxShadow. If the elevation property is used at the same time as the boxShadow property, the last one defined will be the applied style.

color format options: hex('#xxxxxx'), rgb(int, int, int), rgba(int, int, int, double) or [Color].

angle parameter takes a circular value. Eighter radians or not, depending on what is specified in the StyleClass constructor. 0.0 is down. If angle equals [null] the shadow will be directly under the widget.

opacity is a relative opacity constant. A value of 0.5 bisects the opacity value with a given elevation.

Scale #

..scale(double ratio)

Scale the widget

Offset #

..offset([double dx, double dy])

Offsets the widget

Rotate #

..rotate(double angle)

Rotates the widget. By default one turn equals the value 1.0. To change to radians: StyleClass(useRadians: true).

Ripple #

..ripple(bool enable, {dynamic splashColor, dynamic highlightColor})

Material ripple effect.

Overflow #

..overflow.visible({Axis direction = Axis.vertical})
..overflow.scrollable({Axis direction = Axis.vertical})

Change child overflow behaviour. Choose the overflow direction with the [direction] parameter.

Animate #

..animate([int duration, Curve curve = Curves.linear])

Animates the widget when one of its style properties changes. duration is given in milliseconds.

Add #

..add(StyleClass styleClass, {bool override = false})

Adds a StyleClass to a StyleClass. By default the added StyleClass does not override already set style. Change override to true, to override already set style.

Width, minWidth, maxWidth, Height, minHeight, maxHeight #

..[type](double dimension)

Gesture property #

The gesture property expects a GestureClass which is a class containing all the gestures for the widget.

There is also the option to use the class G as a shorthand.

GestureClass #

To add a style to the GestureClass, use the ..[gesture] syntax. The two dots is used to not return the [gesture], but the GestureClass


Child property #

Widget child

0.7.0 #

More strict typing is the theme of this update. #

  • Added alternative class names. StyleClass -> S and GestureClass -> G.
  • [Breaking] Changes backgroundColor syntax to background.color([Color]), background.hex() and background.rgba(int, int, int, [double]). Mover backgroundImage and backgroundBlur to background method.
  • [Breaking] Changed alignment syntac from alignment(dynamic [alignment]) to alignment.[alignment]
  • [Breaking] Changed overflow syntax from overflow([type]) to overflow.[type].
  • [Breaking] Changed backgroundImage, linearGradient, radialGradient and sweepGradient alignment paramteres from dynamic to AlignmentGeometry.
  • [Breaking] Changed ripple, elevation, boxShadow, border, sweepGradient, radialGradient, linearGradient, backgroundColor color parameters from dynamic to Color. Use [Color], rgb(), rgba() or hex() for color.
  • [Fix] overflow.hidden() now clips with a borderRadius.
  • [Fix] Bug with Gestures not activating

0.6.4 #

  • Added opacity paramter to the elevation method. This parameter is a relative opacity constant.
  • Added the optional paramteres behaviour, excludeFromSemantics and dragStartBehaviour to GestureClass.
  • Added hex function.
  • [Fix] ripple now works together with all gestures.
  • [Breaking] As recomended in the dartlang documentation the single dotted chained methods is recalled. .overflow('scroll') -> ..overflow('scroll'). https://dart-lang.github.io/linter/lints/avoid_returning_this.html

0.6.3 #

  • Added support for singledotted chained methods for both the StyleClass and the GestureClass. ..overflow('scroll') -> .overflow('scroll').

0.6.2 #

  • Added overflow method to StyleClass.
  • [Breaking] angled property inside the elevation method is renamed to angle and is now given in a circular value. 0.0 equals down. [null] equals directly under the widget.

0.6.1 #

  • [Fix] ripple and opacity now works with add method.
  • Other minor improvements and fixes

0.6.0 #

  • Added ripple method to StyleClass.
  • Added opacity method to StyleClass.
  • Major rewrite of widget builder. Improved performance.

0.5.0 #

  • Added backgroundBlur method to the StyleClass.
  • Added backgroundImage method to StyleClass.
  • border now supports the use of all and left, right, top and bottom simultaneous.'border(all: 10, left: 20)'.
  • borderRadius now supports the use of all and topLeft, topRight, bottomLeft and bottomRight simultaneous. 'borderRadius(all: 10, bottomLeft: 30)'.
  • padding and margin now supports the use of all parameters simultaneous. padding(all: 10, bottom: 50).
  • Added rgb() and rgba() functions. May replace [int, int, int] and [int, int, int, double] formats in color parameters.
  • [Breaking] ripple method removed until a better solution is implemented.

0.4.0 #

  • [Breaking] Removed hex and rgba properties and combines them with the color property and changes it to dynamic. color property now supports HEX ('#xxxxxx'), RGBA ([int, int, int, double]), RGB ([int, int, int]) and [Color] format.
  • Changed alignment properties to dynamic. The alignment property now supports a variety of different formats.
  • The widget tree is now dynamicly constructed. Unused widgets is no longer being added to the widget tree. Improved performance.
  • Added linearGradient(), radialGradient(), sweepGradient() and border() methods to the StyleClass.
  • Added optional parameter override to add(), so you can choose to override already defined style or not when combining classes.
  • Added animation support for scale(), rotate(), offset and align(). All styling properties now support animation.
  • [Breaking] Added the ability to change between using radians or values between 0 to 1 in the StyleClass. Change by: StyleClass(useRadians: true)..[style]. Breaking because your values may be written in radians but now is interpreted as not.
  • [Breaking] Removed elevation bgColor parameter.
  • [Breaking] backgroundColor changed from named parameter to unnamed.
  • [beta] Added ripple() method to the StyleClass. Known issues: Doesnt cover the whole area when border and borderRadius is in use. Problems with gestures.
  • [beta] Added some custom presets. import 'package:division/presets.dart'.

0.3.0 #

  • [Breaking] Major rewrite. Changed the List<StyleItem> format to a custom StyleClass. Changed the List<GestureItem> format to a custom GestureClass.
  • [Breaking] Improved elevation() style property
  • Added animate(), rotate(), scale() and offset() properties to the StyleClass
  • Enhanced preformance
  • Other minor tweaks

0.2.0 #

  • Added all gesture properties found in the GestureDetector widget
  • Added elevation style property containing boxShadow presets.
  • Fixed bug with S.align() and S.alignChild() style properties. They now work with topLeft, topRight, bottomLeft and bottomRight!
  • General code improvements and optimizing

0.1.0 #

  • Initial release/ idea
  • Implementet the basic features for the style property and the gesture property for the Division widget


Example 1 #

Preview #

App designer: Link

Code #

Example 1 code

Example 2 #

Preview #

Code #

Example 2 code

Example 3 #

Preview #

Code #

Example 3 code

Example 4 #

Preview #

Code #

Example 4 code

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  division: ^0.7.0

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:division/division.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.3


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/presets.dart. (-0.50 points)

Analysis of lib/presets.dart reported 1 hint:

line 1 col 8: Unused import: 'src/function/color.dart'.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies