How to follow a design system for all dimensions in Flutter ( not hard-coded ) ?

In this article, I will give you a procedure to properly follow a design system provided by the design team for the Flutter application, which scales to any device size.

Why is this useful ?

When we get a high fidelity design from the design team, we start coding out our components in Flutter, which has different padding dimensions, text sizes etc as per the given device size. If we are using the same dimensions for different device types it might not look proper and deviates a lot from our core design that we are following. When are planning to change all those dimensions it might be a herculean task considering the scale of the project. To avoid this, we can use the below mentioned procedure and make things simple :)

The standard increments followed in a design, are in multiples of 8, so we will be using the same for the current discussion. If your design team is using any other values, please adhere to that and modify accordingly.

There are some files that need to be created inside the Flutter project. You can add them in a utilities folder.

  1. screen_config.dart

For the lines 21 and 22, there is a calculation that has to be done.
We have to basically create blockWidth and blockHeight as units of 8 according to the design we received from the design team. Once the blocks are created for us, we are going to multiply it and create the design system in the upcoming steps. To create the blocks we have to calculate the dividing factor for the known device ( design ) and apply it there.

Let’s assume the device dimensions are 360 x 800, then the for the _blockWidth to be 8, we have to divide the width ( 360 ) by 45. For the _blockHeight to be 8, we have to divide the height ( 800 ) by 100.

Hence the code can be modified as follows

_blockWidth = _screenWidth / 45;
_blockHeight = _screenHeight / 100;

We have to modify the main widget of our application, so that we get access to these block sizes across the app. We have to find out the first starting point of our application widget tree and modify it accordingly.

After wrapping the Main widget of our application with Layout builder, we have access to the block lengths.

2. Create the design system.

We have to now start creating our design system based on the block sizes

This is the first step, where we create the multipliers for different dimensions.

We have now created text styles for different sizes, and now based on your design team inputs, modify the text styles and other dimensions and place them in a design_system folder which you can access and modify when the design team changes something.

This is an example where we can use and modify our design system as per our needs.

You can also create the design system for your colors used in the application, and create a class for them as well.

Having a proper design system ready can boost our productivity, code cleanliness by a great extent.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store