Swift vs Flutter
Swift is a general-purpose, multi-paradigm, compiled programming language developed by Apple Inc. for iOS, iPadOS, macOS, watchOS, tvOS, Linux, and z/OS.
Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia and the web. The first version of Flutter was known as codename “Sky” and ran on the Android operating system.
Both Swift and Flutter offer a good and easy way to build IOS app. In this article I would like us to have a look on the syntax of both Swift and Flutter to build a simple user list. Here is the end result.
As you can see the end result is kind of identical. You can also make it as alike two peas in a pod. Now let’s explore how identical are their syntax.
Let’s start with Swift UI. So create an XCode project and name it as you want and make sure to choose swift UI in the user interface section.
Then create 3 folders. Models, Views and TestData.
In the Models folder create a swift file called User and paste the following code
import Foundation
import SwiftUI
/// User
struct User: Identifiable {
/// unique id
var id: String = UUID().uuidString
/// user name
let name: String
/// user profile avatar
let avatar: String
/// post time
let time: String
/// Init
init(name: String, avatar: String, time: String) {
self.name = name
self.avatar = avatar
self.time = time
}
}Create a swift file called AvatarView and paste the following code
import Foundation
import SwiftUI
/// AvatarView
struct AvatarView: View {
let user: User
/// body
var body: some View {
/// main stack
VStack(alignment: .leading, spacing: 10) {
VStack(alignment: .leading) {
HStack(spacing: 10) {
Image(user.avatar)
.resizable()
.frame(width: 70, height: 70)
.border(Color.gray.opacity(0.5), width: 0.5)
.cornerRadius(70/2)
VStack(alignment: .leading, spacing: 3) {
// name
Text(user.name).font(.headline)
// post time
Text(user.time).font(.subheadline)
}
}
}
.padding(.leading, 15)
.padding(.trailing, 15)
}
.padding(.top, 5)
}
}In the TestData folder create a TestData file. This is our data provider and paste the following code
import Foundation
/// Test Data
struct TestData {
static func users() -> [User] {
/// users
let user1 = User(name: "Jeff Bezos", avatar: "jeff", time: "Amazon")
let user2 = User(name: "Bill Gate", avatar: "gate", time: "Microsoft")
let user3 = User(name: "Steve Jobs", avatar: "steve",time: "Apple")
let user4 = User(name: "Mark zuckerberg", avatar: "mark",time: "Facebook")
let user5 = User(name: "Elon Musk", avatar: "elon",time: "Tesla")
let user6 = User(name: "Jack Dorsey", avatar: "jack",time: "Twitter")
let user7 = User(name: "Pierre Omidyar", avatar: "pierre",time: "e-Bay")
return [user1, user2, user3, user4, user5, user6, user7]
}
}To finish paste the following code in the ContentView.swift
import SwiftUI
/// Main Content View
struct ContentView : View {
/// posts
let users = TestData.users()
/// view body
var body: some View {
NavigationView {
List {
// users
ForEach(users) { user in
AvatarView(user: user)
}
}
.padding(.leading, -20)
.padding(.trailing, -20)
.navigationBarTitle(Text("Simple user list"))
}
}
}
#if DEBUG
struct ContentView_Previews : PreviewProvider {
static var previews: some View {
ContentView()
}
}
#endifPretty simple right !! Then run it. Here is what you should get
Now let’s see the Flutter way. Create a Flutter project and create three folders ui, data and models.
Create the User.dart in the models folder with the following code
class User {
final String name;
final String avatar;
final String title;
const User(this.name, this.avatar, this.title);
}In the data package create the Data.dart with the following code
import 'package:simple_user_list/models/User.dart';
List<User> getUsers() {
var userList = List<User>();
userList.add(User("Jeff Bezos", "jeff.jpg", "Amazon"));
userList.add(User("Bill Gate", "gate.jpg", "Microsoft"));
userList.add(User("Steve Jobs", "steve.png", "Apple"));
userList.add(User("Mark zuckerberg", "mark.jpg", "Facebook"));
userList.add(User("Elon Musk", "elon.png", "Tesla"));
userList.add(User("Jack Dorsey", "jack.jpg", "Twitter"));
userList.add(User("Pierre Omidyar", "pierre.jpg", "e-Bay"));
return userList;
}In the ui package create the UserListUI.dart with the following code
import 'package:flutter/material.dart';
import 'package:simple_user_list/data/Data.dart';
class UserList extends StatefulWidget {
@override
UserListState createState() => UserListState();
}
class UserListState extends State<UserList> {
var userList = getUsers();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Simple user list"),
),
body: ListView.separated(
separatorBuilder: (context, index) => Divider(
color: Colors.grey,
),
primary: false,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: getUsers().length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image.asset(
"images/${userList[index].avatar}",
width: 70,
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
userList[index].name,
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.w600),
),
Text(userList[index].title),
],
),
],
),
],
);
},
),
);
}
}To finish here is main.dart file
import 'package:flutter/material.dart';
import 'package:simple_user_list/ui/UserListUI.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: UserList(),
);
}
}Then run it here is what you should get
You can get the whole code of this in the following links to get the assets
We have seen how simple it is to build an app with both Flutter and Swift UI. Now it’s up to you to decide.
