division 0.1.0+2

A widget inspired by the HTML/CSS code structure. The purpose of this package is mainty to make styling in flutter easier espessialy those who are coming from web development.

example/readme.md

Example 1

import 'package:division/division.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Division(
      style: [
        S.height(100.0),
        S.width(500.0),
        S.minWidth(500.0),
        S.align('center'),
        S.alignChild('center'),
        S.padding(vertical: 20.0, horizontal: 10.0),
        S.margin(horizontal: 30.0),
        S.backgroundColor(hex: '55ffff'),
        S.borderRadius(all: 20.0),
        S.boxShadow(
            hex: '55ffff', spread: -10.0, blur: 20.0, offset: [0.0, 15.0]),
      ],
      gesture: [
        G.onTap(() => print('Division widget pressed!')),
      ],
      child: Text('Centered text inside the division widget'),
    )));
  }
}

Preview

Example 2

Reusing styling

import 'package:division/division.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  //what we in CSS would call a class
  final List buttonStyle = [
    S.width(300.0),
    S.padding(horizontal: 15.0, vertical: 20.0),
    S.margin(top: 20.0),
    S.align('center'),
    S.alignChild('center'),
    S.borderRadius(all: 30.0),
    S.backgroundColor(hex: 'eeeeee')
  ];

  //tweaks of the main colorStyle
  final List button2 = [
    S.backgroundColor(color: Colors.blue[700]),
    S.boxShadow(
        color: Colors.black.withOpacity(0.2),
        blur: 20.0,
        spread: -10.0,
        offset: [0.0, 15.0]),
  ];

  //another tweaked button style
  final List button3 = [
    S.borderRadius(all: 3.0),
    S.backgroundColor(color: Colors.red[300]),
    S.boxShadow(
        color: Colors.black.withOpacity(0.2),
        blur: 20.0,
        spread: -10.0,
        offset: [0.0, 15.0]),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //plain button
            Division(style: buttonStyle, child: text(title: 'Plain button')),

            //blue button with shadow
            Division(
                style: List.from(buttonStyle)..addAll(button2),
                child: text(title: 'Blue button', color: Colors.white)),

            //shadow button
            Division(
                style: List.from(buttonStyle)..addAll(button3),
                child: text(title: 'Button with shadow', color: Colors.white)),
          ],
        ),
      ),
    );
  }

  Widget text({String title, Color color}) {
    return Text(title,
        style: TextStyle(
            fontSize: 18.0,
            fontWeight: FontWeight.bold,
            color: color ?? Colors.black));
  }
}

Preview