Make your Flutter coding style looks like SwiftUI

5 min readMay 12, 2021

Hi, everyone.. today’s article will be a little bit small but it could save you lots of time.

So, let’s firstly talk about Flutter code.. it’s awesome I know 😄, but ever tired of writing nested objects which may get longer and you just started building a small widget that may consist of (Card, Text, Padding, …etc)?

Well, many people nowadays complains about this little matter and some of them may even hate the entire framework for that!! (DO NOT DO THAT!) 🙂

Now, with all of that being said.. developers have provided an incredible solutions to simplify the code and try to get rid of using nested objects and I’m gonna be explaining some of those solutions and how you can use them.

Let’s start by creating new flutter project and give it any name you like, and make sure to migrate the project to the Null-Safety feature.

Dependencies

We’re gonna be using this styled_widget awesome package “that I recently contributed to” which will help us to achieve our needs.

Go ahead and install the latest version:

dependencies:
  styled_widget: ^0.3.1

Extension Methods

Before we get into it, let us talk about the Dart Extension Methods, since Dart language supports the extension methods which was introduced in dart 2.7, this helps us to add the functionality we want on any existing class.

Let’s have an example to make things clearer:

What we’re doing here is creating a function that takes a string and removes any special characters from that given string value, then return the results.. and as you can see we defined and called that function normally.

Now, let’s try writing the same code.. but using the extension methods feature, let’s take a look at this code:

with the extension methods, we create an extension scope which could be on any existing class and then we start defining our methods inside that scope.

You should now, have an idea of what the extension methods are.. because we’re gonna be using them a lot in our code.

You can also read more about it here.

And in fact the styled_widget package itself uses this approach behind the scene.

Writing UI widgets

Open our project inside the VS Code/Android Studio and remove the unnecessarily lines in the main.dart file like so:

Ok! let’s create simple widgets inside the Scaffold’s body like this:

great, we have a text wrapped with padding, container with color and radius, center, and the text itself has some styling (color, font size, font weight)…

This is what your code normally looks like with any of your Flutter project.

Now, let’s simplify the code above with the hand of our installed package, go ahead and import it, then write the following code:

import 'package:styled_widget/styled_widget.dart';

huge difference right? the code became much more cleaner, readable, and easy to modify/add properties and widgets to that Text and the result will still the same as we saw before.

Create your Own

Let’s suppose you have made a custom widget, and you want it to be used just as the styled_widget do for you.. all you have to do is creating an extension method on the Widget class, then define your own widget inside that scope and start import/use it at any place you want.

like this:

What’s More?

There is another great package that provides almost the same solution, called velocity_x this one also came up with lots of properties and easy to use widgets and also provides other different functionality like (routing, state management, ..etc).

If you ever worked with velocity_x and you almost use everything this package provide, then that’s fine for you.

But if you just want a package that only provides this styling solution, then you should use this styled_widget.

Some Cons I found

Everything sounds cool until now, but if you noticed.. by using this package we also lose some of the built-in Flutter advantages like the const constructor.

Before, we could use directly the “const EdgeInsets.all(10.0)” factory constructor that already supports const constructor, and because all values now are determined at the runtime, we can not use this const constructor anymore.

“everything come with a price”.

Future

We’re still developing this package and keep adding the latest features to it.

Feedback

As always, I hope I explained the most important stuff about this package and how to use or not to use them properly.

See you next articles 😄❤️

If you find something wrong or anything else, you can always reach me at