Flutter for SwiftUI Developers
Comparing two ways to build mobile apps
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:
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.
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:
_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
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.