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 the company I work for decided to use Flutter I was really excited, but already from 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 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),
],
)
-------
Row(
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
