Explaining Flutter multi-platform with face tracking app.
Hello dev, in this article I will talk about use the Flutter SDK in multiple platforms using the face tracking app example, to explain how this multi-platform SDK behaves between mobile and web.
First I want to talk about my thinking about use the Flutter so far, and for now I still consider a really good choice to start a new project or even migrate an old one, however you need to consider a few things before do that, and this is the point here.
Yep you have to check all the pros and cons about use a multi-platform approach, independently what SDK or framework you are going to use to build a project. And yep it’s important because it will be the failure or the success of your application.
But let’s take a look on the example that I made to see what I’m talking about. Oh, before I forget, this is the repository with the face tracking example if you are just interested on the code, because I’ll not explain how to do that.
Basically what this app does is, see if the user is with the face in front of the device camera, and if yes take a picture, pretty standard right? And to accomplish it I used the following packages:
And to start implementing this you need to configure the project on the Firebase Console, and I know there are a bunch of tutorials teaching how to do that, and it’s not difficult at all, so go ahead and Google it.
Notice that you have to make the configurations on the native projects, and here is the first thing I want to mention, keep in mind that you have to at least understand the native way to do things on each platform to be able to make things right and if have an error realize faster how to solve the issue.
Now that we have our app configured with the Firebase, it’s time to code and make it functional, but if you cloned the repository and configured the Firebase on it, just run on your Android or iOS device. I hope the code on my repository is still working lol.
Ok, we can see that if we run this code on both mobile platforms it will do the same thing, with no code diference, but if you try run on the web and if you are a curious dev, maybe you already read the code, and saw a condition to run o web right? And here comes the tricky part of the multi-platform development
At the moment I’m writing this article, the firebase_ml_vision package does not have support for web, and if you are interested of recognise if there is a face in front of the webcam, you will need to write your own code using the native platform or integrate with another thing to make it happen. I believe you got the point here, I mean, sometimes you will need to try something different outside Flutter itself because anyone on the community didn’t create a solution for the problem.
To conclude this article my last massage here is make you think that we still don’t have a silver bullet to create our project and run on all platforms with the same code base, however with Flutter and Dart we are close to that and I see a lot of people contributing to the community to make it happen.
Off course the Flutter Web is still immature compared with the mobile version, and if you are about to use it on the web platform, make a research about the packages and features you need to implement and make sure it’s ok, contribute existing packages or create your own.
