Stilo -  A utility-first Flutter library for rapid UI development
Tags: flutter, mobile, dart
Published: 2020-11-08 15:04:42

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o59xe7rh4sq32zpy5sph.jpeg)

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](https://github.com/mirkorap/stilo)

To install Stilo in your project use the [pub package manager](https://pub.dev/packages/stilo)