Flutter & SwiftUI

SwiftUI for the Flutter Developer

SwiftUI is Apple’s 🖥 New UI Toolkit for Building Native iOS Apps 📱. So if you have heard rumors 🤔 about it & want to know more, Smile 😜 because you are at the right place.

Apple Ecosystem - Photo by Julian O'hayon on Unsplash

Note: Find these Long Articles Boring ? You can check the same in a more Visual & Attractive format here.

No, I am not leaving Flutter 😆, but recently SwiftUI got my attention. But what is SwiftUI?

SwiftUI is Apple’s new UI Toolkit for building native apps for iPhones 📱, iPads, MacOS 🖥 & Apple Watch⌚️, basically across all Apple platforms.

Before diving in, let’s first see a Brief Comparison b/w them :

1. Both Flutter & SwiftUI are Declarative & so are very Similar in Nature.
2. Dart is Easier than Swift but Swift is much more Mature.
3. SwiftUI is Purely Native and Apple’s Future for iOS Apps, so it has Better Performance than Flutter. (No iOS Janks 😃).

Tooling

While Flutter can be coded with many IDEs & has Intellisense, SwiftUI in Xcode becomes more powerful due to its Drag & Drop feature which automatically generates code for the elements. And while Flutter has Hot Reload, SwiftUI has Live Preview which works in a very Similar Way.

The Basics

So, a Flutter App is made up of Widgets but what about SwiftUI?

Simple, it’s made up of Views. Just like Flutter, SwiftUI contains Views for everything, like Text, Image, Buttons, etc. For a Row, there’s an HStack, for Column a VStack. But, there is one Key Difference here -

The Widget Properties in Flutter are View Modifiers in SwiftUI.

To see this in action, let's try to Display the same Text - Blue & Bold “Hello, World!” in both of them -

Flutter

Text(
    "Hello, World!",
    style: TextStyle(
        fontWeight: FontWeight.bold,
        color: Colors.blue,
    ),
),

SwiftUI

Text("Hello, World!")
    .bold()
    .foregroundColor(.blue)

State Management

What about State Management in SwiftUI? Well, I think it’s much Easy. You just have to mark the Stateful Variable with the State Property Wrapper.

@State var counter:Int = 0

The UI will now automatically listen & update if the value of the counter variable changes.

These were the Basics of SwiftUI. If you Liked 👍🏻 it, here are some Resources to Learn ‍💻 SwiftUI & Continue from here -

• Apple Developer Docs
• Ray Wenderlich
• Hacking With Swift
• Design Code
• Credo Academy

So, what do you think about SwiftUI? Also, which Language or Framework would you like to see next? Let me know in the comments below !! Thanks a lot for your precious time & I will see you in the next article !!

FlutterFever is an Immersive Environment for High-Quality Flutter Tutorials, Resources, Tips & Tricks to Build, Deploy and Market Beautiful and Performant Flutter Apps Effortlessly. Find more about it here.