DEV Community: Swee Sen

[2023] SwiftUI @Observable macro: Basic MVVM setup

Swee Sen — Sat, 01 Jul 2023 06:59:40 +0000

With the new @Observable macro, setting up MVVM in SwiftUI has become much simpler. We shall explain the setup by trying to build the following page:

1. Setup ViewModel

struct User {
    let name: String
    let profileImgUrl: String
}

struct ChatMessage {
    var message: String
}

struct HomePageChat: Identifiable {
    let id = UUID()
    let sender: User
    var latestMessage: ChatMessage
}

@Observable class HomePageViewModel {

    var chats: [HomePageChat] = []

    init() {
        setupDummyData()
    }

    private func setupDummyData() {
        let userA = User(name: "Tim Cook", profileImgUrl: "https://www.apple.com/leadership/images/bio/tim-cook_image.png.og.png?1685138662136")
        let messageA = ChatMessage(message: "Hello! Tim Cook here, how are you doing?")
        let chatA = HomePageChat(sender: userA, latestMessage: messageA)

        let userB = User(name: "Craig Federighi", profileImgUrl: "https://www.apple.com/leadership/images/bio/craig_federighi_image.png.og.png?1685171686562")
        let messageB = ChatMessage(message: "I am Craig Federighi, who are you?")
        let chatB = HomePageChat(sender: userB, latestMessage: messageB)


        self.chats = [chatA, chatB]
    }
}

Note that all we need to do is to mark our HomePageViewModel with @Observable macro to make our viewModel observable by SwiftUI views.

2. Setup Views

struct HomePageView: View {

    @Environment(HomePageViewModel.self) private var viewModel

    var body: some View {
        NavigationView {
            VStack {
                List(viewModel.chats) { chat in
                    HomePageCellView(chat: chat)
                }
                .listStyle(.sidebar)
            }
            .navigationTitle("Chats")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

#Preview {
    HomePageView()
        .environment(HomePageViewModel())
}

struct HomePageCellView: View {

    let chat: HomePageChat

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                AsyncImage(url: URL(string: chat.sender.profileImgUrl)) { image in
                    image
                        .resizable()
                        .scaledToFill()
                } placeholder: {
                    ProgressView()
                }
                .frame(width: 50, height: 50)
                .clipShape(Circle())
                .clipShape(Circle())
            }
            VStack(alignment: .leading) {
                Text(chat.sender.name)
                    .bold()
                    .padding(.bottom, 1)
                Text(chat.latestMessage.message)
                    .foregroundStyle(.gray)
                    .font(.system(size: 12))
                    .fixedSize(horizontal: false, vertical: true)
            }
            .padding(.leading, 6)

            Spacer()
            VStack {
                Text("Yesterday")
                    .foregroundStyle(.gray)
                    .font(.system(size: 12))
                Spacer()

            }
        }
        .padding(.leading, 0)
        .padding(.vertical, 6)
        .frame(height: 60)
    }
}

Flutter: Basic MVVM setup with provider

Swee Sen — Tue, 10 Jan 2023 13:24:36 +0000

0. Update pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

1.Create ViewModel

Create a new class that extends ChangeNotifier

class HomePageModel extends ChangeNotifier {
  // we make _items private, modification should only be done through
  // `addItem` function
  final List<String> _items = [];

  // get method to for public to access _items;
  List<String> get items => _items;

  void addItem(String item) {
    _items.add(item);
    notifyListeners();
  }
}

2. Create View (Widget), link to ViewModel

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<HomePageModel>(
      builder: (context, value, child) => Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: (() {
            value.addItem("new item");
          }),
          child: const Text("+"),
        ),
        body: ListView(
          children: value.items.map((e) => Text(e)).toList(),
        ),
      ),
    );
  }
}

Use Consumer<HomePageModel> to access the view model, via the value param
Access list of items through value.items
Add item to list through value.addItem

3. Wrap the widget with `ChangeNotifierProvider`

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: ChangeNotifierProvider(
          create: (context) => HomePageModel(),
          child: const HomePage(),
        ));
  }
}

Wrap HomePage widget with ChangeNotifierProvider.
Inject an instance of HomePageModel as the view model

React Native Firestore: Real-time update with custom hook

Swee Sen — Sun, 30 Jan 2022 08:23:00 +0000

Supposed that we want to observe real-time changes of a particular Firestore document, we could implement the logic in a custom hook and reuse the logic across many components:

export function useUserInfo() {
  const [user, setUser] = useState<User | undefined>();

  useEffect(() => {
    const unsubscribe = subscribeFirestoreUser();
    return () => unsubscribe();
  }, []);

  const subscribeFirestoreUser = () => {
    const subscriber = firestore()
      .collection(FIRESTORE_COLLECTIONS.USER)
      .doc(userId) // an example id here
      .onSnapshot(documentSnapshot => {
        setUser(documentSnapshot.data() as User);
      });
    return subscriber;
  };

  return {
    user,
  };
}

To use the user information in other components:

export default function HomePage() {

  const { user } = useUserInfo();

  return <Text>{user.name}</Text>;
}

Flutter: Infinite scrolling canvas with CustomPainter

Swee Sen — Sun, 22 Nov 2020 12:03:49 +0000

Overview

There are many tutorials on canvas drawing using CustomPainter. However, there are no tutorials on how to create an infinite drawing canvas using Flutter. In this article, I will show you a simple trick that can be used to implement infinite scrolling canvas with high performance. Github Link

1. Setup CustomPainter for drawable canvas

I will briefly explain this section as there are many tutorials online on this section. The main idea is that we first need to create a CustomPainter class and implement the logic for drawing. Here is one way of implementing it:

class CanvasCustomPainter extends CustomPainter {
  List<Offset> points;

  CanvasCustomPainter({@required this.points});

  @override
  void paint(Canvas canvas, Size size) {
    //define canvas background color
    Paint background = Paint()..color = Colors.white;

    //define canvas size
    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);

    canvas.drawRect(rect, background);
    canvas.clipRect(rect);

    //define the paint properties to be used for drawing
    Paint drawingPaint = Paint()
      ..strokeCap = StrokeCap.round
      ..isAntiAlias = true
      ..color = Colors.black
      ..strokeWidth = 1.5;

    //a single line is defined as a series of points followed by a null at the end
    for (int x = 0; x < points.length - 1; x++) {
      //drawing line between the points to form a continuous line
      if (points[x] != null && points[x + 1] != null) {
        canvas.drawLine(points[x], points[x + 1], drawingPaint);
      }
      //if next point is null, means the line ends here
      else if (points[x] != null && points[x + 1] == null) {
        canvas.drawPoints(PointMode.points, [points[x]], drawingPaint);
      }
    }
  }

  @override
  bool shouldRepaint(CanvasCustomPainter oldDelegate) {
    return true;
  }
}

With the CustomPainter setup done, we can now use a CustomPaint widget to display the canvas:

class _InfiniteCanvasPageState extends State<InfiniteCanvasPage> {
  List<Offset> points = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
          child: ClipRRect(
            child: CustomPaint(
              painter: CanvasCustomPainter(points: points),
            ),
          ),
        ),
    );
  }
}

The last step is to use the GestureDetector to add the points into our points variable. The CustomPaint will then render those points onto the canvas.

class _InfiniteCanvasPageState extends State<InfiniteCanvasPage> {
  List<Offset> points = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onPanDown: (details) {
          this.setState(() {
            points.add(details.localPosition);
          });
        },
        onPanUpdate: (details) {
          this.setState(() {
            points.add(details.localPosition);
          });
        },
        onPanEnd: (details) {
          this.setState(() {
            points.add(null);
          });
        },
        child: SizedBox.expand(
          child: ClipRRect(
            child: CustomPaint(
              painter: CanvasCustomPainter(points: points),
            ),
          ),
        ),
      ),
    );
  }
}

By this step we now have a basic drawable canvas!

2. Making an infinite scrolling canvas

Defining CanvasState and Changing between Them

At this point, whenever we touch the screen, it will immediately draw the line on the canvas. To make an infinite scrolling canvas, we must first have a way to pan around the canvas. This implies that our canvas should have two different states: Panning state and Drawing state. Panning state will allow user to pan around the canvas while Drawing state allows user to draw onto the canvas. We can make use of Enum for such scenario.

enum CanvasState { pan, draw }

And we shall initialise a CanvasState variable in our InfiniteCanvasPage class:

class _InfiniteCanvasPageState extends State<InfiniteCanvasPage> {
  List<Offset> points = [];
  CanvasState canvasState = CanvasState.draw;

  @override
  Widget build(BuildContext context) {
    ...
  }
}

We can then use a button to switch between the two states. You can implement your button in whichever way you prefer. For demo purposes, I am using the FloatingActionButton in the Scaffold.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text(canvasState == CanvasState.draw ? "Draw" : "Pan"),
        backgroundColor:
            canvasState == CanvasState.draw ? Colors.red : Colors.blue,
        onPressed: () {
          this.setState(() {
            canvasState = canvasState == CanvasState.draw
                ? CanvasState.pan
                : CanvasState.draw;
          });
        },
      ),
      body: GestureDetector(
        ...
      ),
    );
  }

Implement the canvas pan logic

To create the effect of infinite scrolling canvas, the idea of having an infinitely large CustomPaint widget is not feasible and not a good way to implement it due to performance reasons. Instead, another method that we can use to achieve the same bahaviour is to make use of an Offset variable. Whenever the user pans the screen, we will add the pan distance to the offset variable. Whenever we render the lines onto the canvas, we will subtract this offset to the coordinates of each point in order to render the points at the correct position after offset.

For example, if the user pans the screen from right to left for 50px, the offset variable is now (-50,0) . If we have a point that is originally at (70,10) we can now add this point with the offset, giving the final coordinate to be (20,10) .

First, we add an offset variable into our InfiniteCanvasPage class:

class _InfiniteCanvasPageState extends State<InfiniteCanvasPage> {
  List<Offset> points = [];
  CanvasState canvasState = CanvasState.draw;

    //add the offset variable to keep track of the current offset
  Offset offset = Offset(0, 0);

    ...
}

The next step is to modify our CanvasCustomPainter class. For each of the points being rendered, we need to account for the offset:

class CanvasCustomPainter extends CustomPainter {
  List<Offset> points;
  Offset offset;

  CanvasCustomPainter({@required this.points, this.offset});

  @override
  void paint(Canvas canvas, Size size) {

        ...
        ...

    //added offset when rendering
    for (int x = 0; x < points.length - 1; x++) {

      if (points[x] != null && points[x + 1] != null) {
        canvas.drawLine(
            points[x] + offset, points[x + 1] + offset, drawingPaint);
      }

      else if (points[x] != null && points[x + 1] == null) {
        canvas.drawPoints(PointMode.points, [points[x] + offset], drawingPaint);
      }
    }
  }

    ...
    ...
}

We also have to update our CustomPaint component to pass in the offset variable

SizedBox.expand(
          child: ClipRRect(
            child: CustomPaint(
              painter: CanvasCustomPainter(points: points, offset: offset),
            ),
          ),
        )

The last step is to modify our logic in the various onPan method inside the GestureDetector. The main idea is when canvasState == CanvasState.pan, we have to add the pan distance to the offset variable. Luckily, this can be conveniently achieved by using the details.delta variable provided by onPanUpdate. Here is how our final GestureDetector code will look like:

...

body: GestureDetector(
        onPanDown: (details) {
          this.setState(() {
            if (canvasState == CanvasState.draw) {
              points.add(details.localPosition - offset);
            }
          });
        },
        onPanUpdate: (details) {
          this.setState(() {
            if (canvasState == CanvasState.pan) {
              offset += details.delta;
            } else {
              points.add(details.localPosition - offset);
            }
          });
        },
        onPanEnd: (details) {
          this.setState(() {
            if (canvasState == CanvasState.draw) {
              points.add(null);
            }
          });
        },
        child: SizedBox.expand(
          child: ClipRRect(
            child: CustomPaint(
              painter: CanvasCustomPainter(points: points, offset: offset),
            ),
          ),
        ),
      ),

...

With this, we now have an infinite scrolling canvas!

SwiftUI: Use Enum for ActionSheet Selection

Swee Sen — Fri, 21 Aug 2020 02:23:10 +0000

Enum is a powerful and useful tool in Swift. In this post, I want to present a use case of enum in SwiftUI ActionSheet selection.

Let say that in the app that we are developing, we allow the user to choose different language in the settings page. Here is how the action sheet might look like with the use of action sheet:

The basic approach to this problem is to use the following code for the action sheet, in which we are specifying every single options ourselves manually.

.actionSheet(isPresented: $showingSelectLanguageSetting) {
    ActionSheet(title: Text("Language"), message: Text("Please select your prefered language"), buttons:[

            .default(Text("English")) {}, //some action
            .default(Text("Chinese")) {}, //some action

        ]
    )
}

If the number of options are very little and the actions needed for each option is simple, this approach is perfectly fine. However, if we are required to add more actions and options in the future, the code might get more complicated and this might not be the cleanest approach.

For example, lets imagine that we want to support 5 languages, and that with selection of each language, we want to set the language code variable into their respective language code:

.actionSheet(isPresented: $showingSelectLanguageSetting) {
            ActionSheet(title: Text("Language"), message: Text("Please select your prefered language"), buttons:[

                .default(Text("English")) {self.languageCode = "en"}, //some action
                .default(Text("Chinese")) {self.languageCode = "zn"}, //some action
                .default(Text("German")) {self.languageCode = "de"}, //some action
                .default(Text("Indonesian")) {self.languageCode = "id"}, //some action
                .default(Text("Latin")) {self.languageCode = "la"}, //some action

                ]
            )
        }

Things can easily get messier with every new action or options being added to the action sheet.

To easily solve this problem, we can make use of enum. First we can define an Enum called Language and specify all the languages in the Enum.

enum Language : String , CaseIterable {

    case english = "English"
    case mandarin = "Chinese"

    func getLanguageCode()->String{
        switch self {
        case .english:
            return "en"
        case .mandarin:
            return "zn"
        }
    }
}

Next, we can define our action sheet as such:

.actionSheet(isPresented: $showingSelectLanguageSetting) {
    ActionSheet(title: Text("Language"), message: Text("Please select your prefered language"), buttons:

        Language.allCases.map{language in
            Alert.Button.default(Text(language.rawValue)) {
                self.languageCode = language.getLanguageCode() //assign the language code
            }
        }

    )
}

With the use of CaseIterable with Enum, we can separate the language related logic from the UI related logic, making our code more readable and maintainable in future.

Swift: Text to Speech in any Language

Swee Sen — Sat, 20 Jun 2020 16:54:07 +0000

To start with text to speech, the code below is the basic setup.

let utterance = AVSpeechUtterance(string: "Some text")
utterance.voice = AVSpeechSynthesisVoice(language: "en") //any language that you prefer
let synth = AVSpeechSynthesizer()
synth.speak(utterance)

However, this code requires us to specify the language of the text in the code. To make it more dynamic by allowing it to speak any text by automatically detecting the language, we can use NSLinguisticTagger.dominantLanguage(for: text) to detect the language of the text.


if let language = NSLinguisticTagger.dominantLanguage(for: text) {

    //we now know the language of the text 

    let utterance = AVSpeechUtterance(string: text)
    utterance.voice = AVSpeechSynthesisVoice(language: language) //use the detected language

    let synth = AVSpeechSynthesizer()
    synth.speak(utterance)
} else {
    print("Unknown language")
}

Additionally, we can also control the speed of the speech as well as the pitch/frequency of the speech:

private func readText(_ text:String){
    if let language = NSLinguisticTagger.dominantLanguage(for: text) {
        let utterance = AVSpeechUtterance(string: text)
        utterance.voice = AVSpeechSynthesisVoice(language: language)

        //control speed and pitch
        utterance.pitchMultiplier = 1
        utterance.rate = 0.2

        let synth = AVSpeechSynthesizer()
        synth.speak(utterance)

    } else {
        print("Unknown language")
    }
}

SwiftUI: How to use List with ObservableObject

Swee Sen — Sat, 20 Jun 2020 16:41:09 +0000

In SwiftUI, it is very easy to construct a list of item. For example, let say we have an array containing the names of our users, we can display these names in a list by the following code:

struct ContentView: View {

    let users = ["John","Peter","Jane"]

    var body: some View {
        List(users){user in
            Text(user)
        }
    }
}

In this case, we can make a list which consists of the names of all the users. However, this list of names is static, meaning that any changes to the users array will not cause the List to refresh and be updated to the latest values. To make the List to refresh whenever there is changes to the users array, we can make use of the @State variable. With the use of @State in front of a variable, SwiftUI will listen for any changes to that variable, and automatically render the View again with the latest values.

struct ContentView: View {

    @State var users = ["John","Peter","Jane"]

    var body: some View {
        List(users){user in
            Text(user)
        }
    }
}

To see how this might be useful, let's say that we have a button that makes a network call to fetch the users information from our server, we can easily render the List with the network call result easily with the following code:

struct ContentView: View {

    @State var users = ["John","Peter","Jane"]

    var body: some View {
        VStack{
            Button(action: {
                self.loadFromServer()
            }){
                Text("Fetch From Server")
            }
            List(users, id: \.self){user in
                Text(user)
            }
        }
    }

    private func loadFromServer(){
        //do some network call and assign the result to self.users
    }
}

With the code above, when the result from the network call is ready and then assigned to self.users, SwiftUI detects changes to the variable and will redraw the List with the updated values.

While the code above works, it is not a good idea to put our networking code in the View Struct. View is only responsible for rendering the UI elements onto the screen. Having networking code inside a View Struct violates the Single Responsibility Principle. Hence, we should move the code related to networking out into separate class. However, moving networking code out of the View Struct also means that now we are unable to directly access the @State users variable to update the list. The solution : ObservableObject.

We can start by creating a struct called User with two properties: name and id. The reason for the need for id is to allow List in SwiftUI to be able to unique identify and keep track of the changes to the data source.

struct User: Identifiable {
    let id = UUID()
    let name:String
}

Next, we can then create a class called UserContainer, and comform it to ObservableObject.

class UsersContainer : ObservableObject{
    @Published var users = [User]()
}

By marking the users variable as @Published, it means that whenever there is any changes to the users variable, the instances of the class that are "subscribed" to it will be notified, prompting SwiftUI to re-render the View. The final step is to connect the data source to our View:

To do this, we will create an instance of the UsersContainer Class in the ContentView. In order to "subscribe" to be notified of any changes to the data, we have to mark it with @ObservedObject:

struct ContentView: View {

    @ObservedObject var usersContainer = UsersContainer()

    var body: some View {
        VStack{
            List(usersContainer.users, id: \.id){user in
                Text(user.name)
            }
        }
    }
}

Now with the current arrangement, supposed that we want to make a network call to the server to retrieve the list of users, instead of doing it in the ContentView, we can now do the networking logic in the UsersContainer Class

class UsersContainer : ObservableObject{

    @Published var users = [User]()

    func fetchFromServer(){
        //assign the result back to self.users
    }
}

We can now add a button in our ContentView to trigger the fetchFromServer() call like this:

struct ContentView: View {

    @ObservedObject var usersContainer = UsersContainer()

    var body: some View {
        VStack{
            Button(action: {
                self.usersContainer.fetchFromServer()
            }){
                Text("Fetch From Server")
            }
            List(usersContainer.users, id: \.id){user in
                Text(user.name)
            }
        }
    }
}

How to upload document to server using Alamofire

Swee Sen — Sun, 19 Apr 2020 18:30:00 +0000

Here is a basic code snippet that uses Alamofire to upload document onto a server.

fileprivate func uploadDocument(_ file: Data,filename : String,handler : @escaping (String) -> Void) {
       let headers: HTTPHeaders = [
           "Content-type": "multipart/form-data"
       ]

       AF.upload(
           multipartFormData: { multipartFormData in
               multipartFormData.append(file, withName: "upload_data" , fileName: filename, mimeType: "application/pdf")
       },
           to: "https://yourserverurl", method: .post , headers: headers)
           .response { response in
               if let data = response.data{
                   //handle the response however you like 
               }

       }
   }

Note that the Mime Type should be modified depending on the type of document to be uploaded. Follow this link to see the list of mime type.

Integrating with UIDocumentPickerController

Most of the time, we need to upload document onto the server by choosing a local file from the phone. This is done using the UIDocumentPickerController. For example, let's assume that I have a button in my ViewController that brings up the UIDocumentPickerController when pressed:

button.addAction(for: .touchUpInside) {
    let importMenu = UIDocumentPickerViewController(documentTypes: [kUTTypePDF as String], in: .import)
    importMenu.delegate = self 
    importMenu.modalPresentationStyle = .formSheet
    self.present(importMenu, animated: true, completion: nil)
}

Next, we have to make our ViewController conform to UIDocumentPickerDelegate, and get the document URL:

extension IndividualChatViewController:UIDocumentPickerDelegate{

    public func documentPicker(_ controller: UIDocumentPickerViewController, didPickDocumentsAt urls: [URL]) {
        guard let documentURL = urls.first else {
               return
        }

    }
}

Now that we got the url of the document, we have to retrieve the document using the url in order to get the document in the type of Data.

fileprivate func getDocumentFromURL(URL: NSURL,handler : @escaping (Data) -> Void) {
    let sessionConfig = URLSessionConfiguration.default
    let session = URLSession(configuration: sessionConfig, delegate: nil, delegateQueue: nil)
    var request = URLRequest(url: URL as URL)
    request.httpMethod = "GET"
    let task = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
        if (error == nil) {
            // Success
            DispatchQueue.main.async(execute: {
                //this is an async operation, use handler to handle the result
                handler(data!)
            })

        }
        else {
            // Failure
            print("Failure: %@", error!.localizedDescription)
        }
    })
    task.resume()
}