Flutter for SwiftUI Developers

Comparing two ways to build mobile apps

Mohammad Azam
Feb 19 · 3 min read

As an instructor at a coding boot camp, I always try to expand my range by learning many different frameworks. This not only helps in teaching but also in clarifying the concepts in greater detail.

I first dabbled in Flutter in 2017 and found it to be very similar to React and React Native. When Apple announced the SwiftUI framework in 2019, I was surprised to see the similarities between SwiftUI and Flutter. I thought it would be a good exercise to build a very simple app using both the SwiftUI and Flutter frameworks. In this piece, I will create a counter app in Flutter and SwiftUI to demonstrate the similarities shared between the two frameworks.


Creating the User Interface

We will start by implementing the user interface for our application. The user interface will consist of a button and a text label. Once the user presses the button, the counter will be incremented.

The declarative nature of SwiftUI and Flutter allows us to quickly construct the counter user interface. The SwiftUI implementation is shown below:

The result is shown below:

Pretty straightforward!

The code to create a counter user interface is not quite as simple in Flutter, but keep in mind that Flutter is a cross-platform framework, which means it will work on iOS, Android, and even the web.

Next, we will take a look at how to introduce state in SwiftUI and Flutter. The main purpose of state is to maintain the value of the counter between UI renders.


Introducing State

SwiftUI provides an easy way to maintain state. This is accomplished by using the @State property wrapper, as shown in the implementation below:

@State private var counter: Int = 0

The variable counter will now maintain the value between rebuilds of the user interface. @State does not only apply to implicit types but also works with classes.

Using state in Flutter does require a bit of work. You have to create a separate class that can maintain the state, and that class will also be responsible for building the user interface. The implementation is shown below:

The _AppState class is responsible for maintaining the state. I personally think it is too much work to introduce state to widgets. Hopefully, the Flutter team can make it attribute-based state management in the future.

Finally, let’s see how we can increment the counter in SwiftUI and Flutter.


Incrementing the Counter

We simply implemented the button press event and updated the counter value. Once the value is updated, it will render the user interface again. That’s when we inject the new counter value in the Text view.

We used a very similar approach in Flutter. The _counter is increment inside the setState closure. Once it is updated, the build function is fired again to render the user interface. At that time, we injected the _counter value in the Text widget.


Conclusion

In this piece, we looked at similarities between SwiftUI and Flutter. Both frameworks are inspired by React and use a declarative approach instead of an imperative one. It’s good to know that learning one framework will also benefit you when learning other frameworks, but there remains one big question: As a SwiftUI developer, why would you learn Flutter?

I will answer that question in my next piece.


Better Programming

Advice for programmers.

Mohammad Azam

Written by

iOS Developer, speaker and educator. Top Udemy and LinkedIn instructor. Lead instructor at DigitalCrafts. https://www.udemy.com/user/mohammad-azam-2/

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade