Division

Simple to use yet powerfull style widgets with syntax inspired by CSS.

Please check out styled_widget which is a replacement of Division!

The true power of this package is a combination of its features. Flutter widgets are designed to combine both the styling widgets and the structural widgets together when building apps. This package tries to decouple style from structure. This results in much more readable code. Another strong point of this package is the ease of animations.

• Getting started
• Basic example
• Documentation
  • Core style methods
  • Parent
  • Txt
  • Gestures
• Examples and best practices

⚠️ If you encounter an issue or have any feedback which you think could improve Division, please open an issue here

Built with Division

App designer, Code	Code

Getting Started

This is the two main widgets included in Division

Parent(
  child: Widget,
  style: ParentStyle, 
  gesture: Gestures,
);

Txt(
  String,
  style: TxtStyle,
  gesture: Gestures,
);

Basic example

Import

import 'package:division/division.dart';

Code

bool pressed = false;

final buttonStyle = (pressed) => TxtStyle()
  ..alignment.center()
  ..background.color(pressed ? Colors.orange : Colors.white)
  ..textColor(pressed ? Colors.white : Colors.orange)
  ..borderRadius(all: 5)
  ..border(all: 3, color: Colors.orange)
  ..padding(vertical: 10, horizontal: 15)
  ..ripple(true)
  ..animate(150, Curves.easeOut);

Gestures buttonGestures() =>
    Gestures()..isTap((isPressed) => setState(() => pressed = isPressed));

@override
Widget build(BuildContext context) {
  return Txt(
    'Styled button!',
    style: buttonStyle(pressed),
    gesture: buttonGestures(),
  );
}

Result

Documentation

All current and future Division widgets share a common style base.

Core style methods

Parent

Parent(
  style: ParentStyle,
  gesture: Gestures,
  child: Widget
)

As the name suggests this widget is a simple styled widget which takes a child.

ParentStyle

// format
ParentStyle()
  ..[style method]

// example
ParentStyle()
  ..width(100)
  ..padding(all: 10)
  ..elevation(5)

Txt

Txt(
  String,
  style: TxtStyle,
  gesture: Gestures,
)

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

// format
TxtStyle()
  ..[style method]

// example
TxtStyle()
  ..width(100)
  ..padding(all: 10)
  ..textColor(Colors.blue)
  ..bold()

Gestures

Examples and best practices

Decoupling style from structure

final ParentStyle cardStyle = ParentStyle()
  ..height(175)
  ..padding(horizontal: 20.0, vertical: 10)
  ..alignment.center()
  ..background.hex('#3977FF')
  ..borderRadius(all: 20.0)
  ..elevation(10, color: hex('#3977FF'));

Widget build(BuildContext context) {
  return Parent(
    style: cardStyle,
    child: Widget,
  );
}

Variable dependent style

final Color color = Colors.blue;

final cardStyle = (color) => ParentStyle()
  ..height(175)
  ..padding(horizontal: 20.0, vertical: 10)
  ..alignment.center()
  ..background.color(color)
  ..borderRadius(all: 20.0)
  ..elevation(10, color: color);

Widget build(BuildContext context) {
  return Parent(
    style: cardStyle(color),
    child: Widget,
  );
}

Animated widgets

bool pressed = false;

final cardStyle = (pressed) => ParentStyle()
  ..height(175)
  ..padding(horizontal: 20.0, vertical: 10)
  ..alignment.center()
  ..borderRadius(all: 20.0)
  ..animate(200, Curves.easeOut)
  ..background.color(pressed ? Colors.white : Colors.black)
  ..elevation(pressed ? 10 : 20);

Widget build(BuildContext context) {
  return Parent(
    style: cardStyle(pressed),
    gesture: Gestures()
      ..isTap((isPressed) => setState(() => pressed = isPressed)),
    child: Widget,
  );
}

or

bool pressed = false;

final cardStyle = (pressed) => ParentStyle()
  ..height(175)
  ..padding(horizontal: 20.0, vertical: 10)
  ..alignment.center()
  ..borderRadius(all: 20.0)
  ..animate(200, Curves.easeOut)
  ..background.color(pressed ? Colors.white : Colors.black)
  ..elevation(pressed ? 10 : 20);

Gestures cardGesture() => Gestures()
  ..isTap((isPressed) => setState(() => pressed = isPressed));

Widget build(BuildContext context) {
  return Parent(
    style: cardStyle(pressed),
    gesture: cardGesture(),
    child: Widget,
  );
}