Stilo - A utility-first Flutter library for rapid UI development

I started to study Dart and Flutter a couple of months ago because I've always been fascinated by mobile development, but my web background has always blocked me from approaching this different, but at the same time, similar world. Flutter gave me the possibility to approach mobile development in a very fast and easy way (and that's amazing for a lazy person like me 😆).

When I started developing the first projects my "web mentality" asked myself: "How can I structure the style of my app (colors, spacings, borders, box shadows, font sizes, etc.) to avoid code duplication and speed up the development process? Why there isn't a Tailwind's like library?". These questions brought me to create Stilo, a utility-first Flutter library for rapid UI development.

Utility as first

Stilo does not replace Flutter as framework, but it wraps Flutter classes to create a list of constants to deal with: borders, spacings, font sizes, widths, heights, box shadows, transforms, opacity, and much more…

But let's go to see some examples of Stilo's constants and how to use them.

Examples

1. StiloBorderRadius

This class defines constants to deal with border-radius (all, top, right, bottom, left, horizontal and vertical directions)

import 'package:stilo/stilo.dart';
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: StiloBorderRadius.a4, // 6.0 radius all
    color: Colors.orange,
  ),
)
----------
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: StiloBorderRadius.t5, // 9.0 radius top
    color: Colors.yellow,
  ),
)
---------
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: StiloBorderRadius.be2, // 3.0 radius bottom-end
    color: Colors.orange,
  ),
)

2. StiloSpacing

This class defines constants to deal with spacings

import 'package:stilo/stilo.dart';
Column(
  children: <Widget>[
    Container(width: 200, height: 100, color: Colors.orange),
    StiloSpacing.y20, // space with 60.0 height
    Container(width: 200, height: 100, color: Colors.indigo),
  ],
)
------------
Column(
  children: <Widget>[
    Container(width: 200, height: 100, color: Colors.orange),
    StiloSpacing.x3, // space with 9.0 width
    Container(width: 200, height: 100, color: Colors.indigo),
  ],
),

3. StiloFontSize

This class defines constants to deal with font sizes

import 'package:stilo/stilo.dart';
Container(
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: StiloFontSize.lg), // 13.5 font size
  ),
)
---------------
Container(
  child: Text(
    'Hello World',
    style: TextStyle(fontSize: StiloFontSize.xl5), // 36.0 font size
  ),
)

4. StiloLineHeight

This class defines constants to deal with line heights

import 'package:stilo/stilo.dart';
Container(
  child: Text(
    'Hello World',
    style: TextStyle(
      height: StiloLineHeight.tight, // 1.25 line height
    ),
  ),
)
---------------
Container(
  child: Text(
    'Hello World',
    style: TextStyle(
      height: StiloLineHeight.relaxed, // 1.625 line height
    ),
  ),
)

5. StiloWidth / StiloHeight

These classes define constants to deal with widths and heights

import 'package:stilo/stilo.dart';
Container(
  width: StiloWidth.w5, // 20.0 width
  height: StiloHeight.h5, // 20.0 height
  color: Colors.orange,
)
---------------
Container(
  width: StiloWidth.w48, // 192.0 width
  height: StiloHeight.h20, // 80.0 height
  color: Colors.orange,
)

Conclusion

These were just some of the constants that Stilo defines for you and, in upcoming releases, many more utility classes will be introduced to help you in the development process of your next app 😉

To follow the project and suggest new features open an issue on Github

To install Stilo in your project use the pub package manager