Flutter makes it possible to deploy your code to iOS, Android, MacOS, Windows, and the Web. But what are the pros and cons of cross-platform development? https://fireship.io/tags/flutter/

#flutter #code #dev

🔗 Resources

Flutter Web https://flutter.dev/web
Flutter Desktop https://flutter.dev/desktop

📚 Chapters

00:00 Cross-Platform Development
01:08 Build 5 Apps
05:48 Flutter Pros & Cons

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:04:22.251Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c948610e-13ba-47de-8ceb-b9dc0f21b2aa
eb6e4bc972023723d2c66fcf500fde7f34d56b3418a642f4255d322ad563cbd0
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Write once, run anywhere is actually a Java catchphrase that goes back to the nineties and has nothing to do with Flutter, but it should because Flutter is a tool that allows you to write one code base, then deploy to multiple platforms like iOS, Android, the web, macOS, and Windows.
And we could even throw Linux and Fuchsia in there as well.
If that sounds too good to be true, then it might be because cross platform development is not all rainbows and butterflies.
It's extremely important to understand the trade offs with Flutter or any cross a platform tool.
Today, we'll build 5 apps in 5 minutes from a single code base, but afterwards, we'll examine the pros and cons of this approach and ask the question, can you really build a successful app on all these platforms from a single code base.
The app we're building today has a few buttons where the user can pick their favorite color.
But the special thing about it is that it will save that color on the device's local storage allowing the selected color to stay active between sessions.
And, it works from a single API across all platforms even though they have their own different local storage systems.
Like, iOS has NS user defaults, Android has shared preferences, the web has local storage, and I don't even know what Windows or Mac use, but the beauty of Flutter is that I don't have to care.
Make sure to hit the like button and subscribe, then let's set a timer for 5 minutes.
After installing Flutter, we can create a new app by going to the command line and running flutter create.
That'll give us some starter code in the main Dart file, which we can run with the Flutter run command.
In the background, the framework will build your code in debug mode for whatever device you're currently targeting.
In Versus Code, the Flutter extension gives you the option to choose different devices based on how your a system that's configured.
In my case, I have a couple of browsers and also a couple of Android emulators.
I'll develop the app on Android and then bring it over a new other platforms later.
After running the app, it should be displayed in the Android Emulator, and we can hot reload it by typing r into the command AMLion and it also provides a couple of links in the browser with additional debug tools for us.
One thing this app needs to do is store data on the local device when the user picks their favorite color.
And in order to do that, we'll install the shared preferences plugin in our pubspec.
Yaml file.
The package is just a basic key value store that can work with the native storage mechanism on any device.
Now if we go over to our source code, I'm just going to build this thing out very quickly.
In in my stateful widget.
I have a map of different colors, and then the user can click a button to select one of those colors as their primary or preferred color.
We can render the buttons used to the UI by looping over the map and including an elevated button for each one of the colors.
The selected color will be used for the background in the appBar, so we create a method that updates the state of the component whenever a button is clicked.
If we go ahead and run the app and click a button, the color of the app bar should change.
However, if we do a full restart, you'll notice that state is lost and the preferred color goes back a default.
To address that, we need to store a small amount of data on device itself that can be accessed between sessions.
The way that's possible able is by creating a method that not only updates the state on the widget itself, but also saves that value with shared preferences using a key of color.
Once that data has been saved on the device, we can then create another method that reads it and can update the state automatically if we call the method and initState.
Now one other thing you'll notice about this app is that we're showing the end user the platform that they're currently running on.
We can do that easily by importing the dart.
Io package, which has a platform class.
It allows us to access the operating system, which we can just interpolate into a string.
When you target multiple platforms, you'll often have UI elements or logic that needs to be different on different platforms.
That kind of defeats the whole purpose of cross platform development, but it's often unavoidable.
Avoidable.
You can use conditional logic to check the platform you're on and then run different code based on that platform.
If you're only targeting iOS and Android, it's usually not a big deal.
A but if you're also targeting the web and desktop, your platform checking requirements might get pretty crazy.
Now that we have a fully polished app on Android, let's bring it over to other platforms starting with iOS.
To run the code on an iOS emulator, I've just cloned the project over to my MacBook, which already has an emulator set up in Xcode, a so all I have to do is hit Flutter run and we're already up and running on iOS.
That's 2 mobile platforms down.
Now, let's shift our attention over to the web.
In the file explorer, you'll notice a a directory called web, and inside that directory, we have an index HTML file.
Flutter takes your Dart code and converts it to JavaScript that injects it into this HTML page.
If we go ahead and change our device to Chrome and Versus Code and then run the app again, it should automatically pull it up in the browser.
But as you can see here, we get a red error screen because platform is not supported on the web.
To do platform checking on the web, we need to import a different variable called k as web, then we'll update our expression with it to be a ternary so we can show the proper text when we're on the web.
Everything looks good now, and if we open up the browser dev tools and type in local storage, a you can see that it has our color stored there.
That's pretty cool, but now it's time to build our desktop apps.
Desktop support is a beta feature, so we need to enable it from the command line.
Once enabled, we can then add desktop support to our existing project.
We can just run flutter create with the platforms of Mac OS s and Windows from the root directory of our existing project.
From there, I recommend running Flutter doctor to see if there's anything else you need installed on your machine to build for desktop.
I had had to install Visual Studio along with its c plus plus tooling.
At this point, you should be able to run Flutter run Windows or macOS from your Mac and get a native desktop app up and running on your machine.
Or you could use the flutter build command to create the actual executable that you would install on a machine.
If we do that on in Windows and then go into the build directory, you'll notice a dot exe file in the runner directory, and the process is basically identical for macOS.
The only difference is that I'm running it on a MacBook.
And that's how easy it is with Flutter to get a single code base running apps on 5 different platforms.
And we can actually add Linux and Fuchsia to the mix to make it 7.
Before we wrap up the video, I want to talk about some of the limitations of cross platform development.
There are many other cross platform tools out there like a React Native, Ionic, Xamarin, NativeScript, and so on.
The one thing that they all have in common is a blue logo.
While it's amazing to build an app for multiple platforms from a single database.
If you're looking for the absolute maximum quality, nothing beats building an app on the native platform itself.
Like, if your goal is to build a killer iOS app, you probably want to use Swift.
A Or if you want to build a killer web app, use a JavaScript framework.
But if you want to build an extremely high quality app on every platform, the cost and effort is going to be astronomical.
One of the biggest issues with cross platform development in general, in my opinion, is that it's very hard to create a unified experience across mobile, desktop, and the web.
In fact, I'm not aware of any apps out in the world that target all 5 platforms and maintain a large user base across all of them.
It's pretty easy to create a unified experience between iOS and Android or macOS and Windows.
But delivering an app that feels perfect on all platforms from a single codebase is often easier said than done, but having the option efficient to do so is very nice.
Many clients that I've worked with have opted for a JavaScript framework to build their web application and Flutter for their native apps, because it can create really beautiful iOS and Android apps.
But those apps don't feel nearly as good when you try to translate them to the web, and the end result produced by Flutter web is much different than your ordinary web app.
Instead of semantic HTML, we have the UI organized in into a canvas.
There's nothing wrong with that for certain types of apps, but if you have something very content rich, you'll notice that by default, you can't a highlight or select the text.
Now there is a selectable text widget to enable that, but things just might feel kind of weird.
This makes the end result harder to understand, which means you really have to rely on Flutter's magic to work perfectly or dig into how it works internally to address more complex issues.
The most important thing to consider is where your primary where customers will be consuming your app.
If 90% of your customers are on iOS and Android, then Flutter web is probably an acceptable experience for the other 10%, and being able to deploy that app to the web with 0 effort is a huge advantage.
Now, here's the other big issue that cross platform developers face.
You need plugins or packages to interact with native APIs on the different platforms.
In this demo, we used shared preferences which works on all 5, but many packages out there may only work for iOS or Android, and the functionality in those packages may be far more limited than the native platforms themselves.
Now, if there isn't already a package for what trying to do, then you've got a big challenge ahead of yourself.
Flutter has a mechanism called platform channels that allows you to interact with code written in different languages on different platforms, but it's not beginner friendly at all, and you'll need to understand the underlying native code written in languages like Objective C or Java.
So before you go and used Flutter for 5 different platforms.
You should have a good understanding of what native features you need and make sure that they're well supported with different packages.
If it does meet your needs, Flutter can be an absolute joy to work with and save you 1,000,000, if not 1,000,000,000 of dollars in development work when adjusted for future inflation.
Currently, I'm working on a brand new Flutter course for pro members.
So stay tuned for updates on that over the next few weeks.
Thanks for watching and I will see you in the next one.

Speaker 0: Write once, run anywhere is actually a Java catchphrase that goes back to the nineties and has nothing to do with Flutter, but it should because Flutter is a tool that allows you to write one code base, then deploy to multiple platforms like iOS, Android, the web, macOS, and Windows. And we could even throw Linux and Fuchsia in there as well. If that sounds too good to be true, then it might be because cross platform development is not all rainbows and butterflies. It's extremely important to understand the trade offs with Flutter or any cross a platform tool. Today, we'll build 5 apps in 5 minutes from a single code base, but afterwards, we'll examine the pros and cons of this approach and ask the question, can you really build a successful app on all these platforms from a single code base.

The app we're building today has a few buttons where the user can pick their favorite color. But the special thing about it is that it will save that color on the device's local storage allowing the selected color to stay active between sessions. And, it works from a single API across all platforms even though they have their own different local storage systems. Like, iOS has NS user defaults, Android has shared preferences, the web has local storage, and I don't even know what Windows or Mac use, but the beauty of Flutter is that I don't have to care. Make sure to hit the like button and subscribe, then let's set a timer for 5 minutes.

After installing Flutter, we can create a new app by going to the command line and running flutter create. That'll give us some starter code in the main Dart file, which we can run with the Flutter run command. In the background, the framework will build your code in debug mode for whatever device you're currently targeting. In Versus Code, the Flutter extension gives you the option to choose different devices based on how your a system that's configured. In my case, I have a couple of browsers and also a couple of Android emulators.

I'll develop the app on Android and then bring it over a new other platforms later. After running the app, it should be displayed in the Android Emulator, and we can hot reload it by typing r into the command AMLion and it also provides a couple of links in the browser with additional debug tools for us. One thing this app needs to do is store data on the local device when the user picks their favorite color. And in order to do that, we'll install the shared preferences plugin in our pubspec. Yaml file.

The package is just a basic key value store that can work with the native storage mechanism on any device. Now if we go over to our source code, I'm just going to build this thing out very quickly. In in my stateful widget. I have a map of different colors, and then the user can click a button to select one of those colors as their primary or preferred color. We can render the buttons used to the UI by looping over the map and including an elevated button for each one of the colors.

The selected color will be used for the background in the appBar, so we create a method that updates the state of the component whenever a button is clicked. If we go ahead and run the app and click a button, the color of the app bar should change. However, if we do a full restart, you'll notice that state is lost and the preferred color goes back a default. To address that, we need to store a small amount of data on device itself that can be accessed between sessions. The way that's possible able is by creating a method that not only updates the state on the widget itself, but also saves that value with shared preferences using a key of color.

Once that data has been saved on the device, we can then create another method that reads it and can update the state automatically if we call the method and initState. Now one other thing you'll notice about this app is that we're showing the end user the platform that they're currently running on. We can do that easily by importing the dart. Io package, which has a platform class. It allows us to access the operating system, which we can just interpolate into a string.

When you target multiple platforms, you'll often have UI elements or logic that needs to be different on different platforms. That kind of defeats the whole purpose of cross platform development, but it's often unavoidable. Avoidable. You can use conditional logic to check the platform you're on and then run different code based on that platform. If you're only targeting iOS and Android, it's usually not a big deal.

A but if you're also targeting the web and desktop, your platform checking requirements might get pretty crazy. Now that we have a fully polished app on Android, let's bring it over to other platforms starting with iOS. To run the code on an iOS emulator, I've just cloned the project over to my MacBook, which already has an emulator set up in Xcode, a so all I have to do is hit Flutter run and we're already up and running on iOS. That's 2 mobile platforms down. Now, let's shift our attention over to the web.

In the file explorer, you'll notice a a directory called web, and inside that directory, we have an index HTML file. Flutter takes your Dart code and converts it to JavaScript that injects it into this HTML page. If we go ahead and change our device to Chrome and Versus Code and then run the app again, it should automatically pull it up in the browser. But as you can see here, we get a red error screen because platform is not supported on the web. To do platform checking on the web, we need to import a different variable called k as web, then we'll update our expression with it to be a ternary so we can show the proper text when we're on the web.

Everything looks good now, and if we open up the browser dev tools and type in local storage, a you can see that it has our color stored there. That's pretty cool, but now it's time to build our desktop apps. Desktop support is a beta feature, so we need to enable it from the command line. Once enabled, we can then add desktop support to our existing project. We can just run flutter create with the platforms of Mac OS s and Windows from the root directory of our existing project.

From there, I recommend running Flutter doctor to see if there's anything else you need installed on your machine to build for desktop. I had had to install Visual Studio along with its c plus plus tooling. At this point, you should be able to run Flutter run Windows or macOS from your Mac and get a native desktop app up and running on your machine. Or you could use the flutter build command to create the actual executable that you would install on a machine. If we do that on in Windows and then go into the build directory, you'll notice a dot exe file in the runner directory, and the process is basically identical for macOS.

The only difference is that I'm running it on a MacBook. And that's how easy it is with Flutter to get a single code base running apps on 5 different platforms. And we can actually add Linux and Fuchsia to the mix to make it 7. Before we wrap up the video, I want to talk about some of the limitations of cross platform development. There are many other cross platform tools out there like a React Native, Ionic, Xamarin, NativeScript, and so on.

The one thing that they all have in common is a blue logo. While it's amazing to build an app for multiple platforms from a single database. If you're looking for the absolute maximum quality, nothing beats building an app on the native platform itself. Like, if your goal is to build a killer iOS app, you probably want to use Swift. A Or if you want to build a killer web app, use a JavaScript framework.

But if you want to build an extremely high quality app on every platform, the cost and effort is going to be astronomical. One of the biggest issues with cross platform development in general, in my opinion, is that it's very hard to create a unified experience across mobile, desktop, and the web. In fact, I'm not aware of any apps out in the world that target all 5 platforms and maintain a large user base across all of them. It's pretty easy to create a unified experience between iOS and Android or macOS and Windows. But delivering an app that feels perfect on all platforms from a single codebase is often easier said than done, but having the option efficient to do so is very nice.

Many clients that I've worked with have opted for a JavaScript framework to build their web application and Flutter for their native apps, because it can create really beautiful iOS and Android apps. But those apps don't feel nearly as good when you try to translate them to the web, and the end result produced by Flutter web is much different than your ordinary web app. Instead of semantic HTML, we have the UI organized in into a canvas. There's nothing wrong with that for certain types of apps, but if you have something very content rich, you'll notice that by default, you can't a highlight or select the text. Now there is a selectable text widget to enable that, but things just might feel kind of weird.

This makes the end result harder to understand, which means you really have to rely on Flutter's magic to work perfectly or dig into how it works internally to address more complex issues. The most important thing to consider is where your primary where customers will be consuming your app. If 90% of your customers are on iOS and Android, then Flutter web is probably an acceptable experience for the other 10%, and being able to deploy that app to the web with 0 effort is a huge advantage. Now, here's the other big issue that cross platform developers face. You need plugins or packages to interact with native APIs on the different platforms.

In this demo, we used shared preferences which works on all 5, but many packages out there may only work for iOS or Android, and the functionality in those packages may be far more limited than the native platforms themselves. Now, if there isn't already a package for what trying to do, then you've got a big challenge ahead of yourself. Flutter has a mechanism called platform channels that allows you to interact with code written in different languages on different platforms, but it's not beginner friendly at all, and you'll need to understand the underlying native code written in languages like Objective C or Java. So before you go and used Flutter for 5 different platforms. You should have a good understanding of what native features you need and make sure that they're well supported with different packages.

If it does meet your needs, Flutter can be an absolute joy to work with and save you 1,000,000, if not 1,000,000,000 of dollars in development work when adjusted for future inflation. Currently, I'm working on a brand new Flutter course for pro members. So stay tuned for updates on that over the next few weeks. Thanks for watching and I will see you in the next one.
Write once, run anywhere is actually a Java catchphrase that goes back to the nineties and has nothing to do with Flutter, but it should because Flutter is a tool that allows you to write one code base, then deploy to multiple platforms like iOS, Android, the web, macOS, and Windows. And we could even throw Linux and Fuchsia in there as well. If that sounds too good to be true, then it might be because cross platform development is not all rainbows and butterflies.
It's extremely important to understand the trade offs with Flutter or any cross a platform tool. Today, we'll build 5 apps in 5 minutes from a single code base, but afterwards, we'll examine the pros and cons of this approach and ask the question, can you really build a successful app on all these platforms from a single code base.
software development
software
The app we're building today has a few buttons where the user can pick their favorite color. But the special thing about it is that it will save that color on the device's local storage allowing the selected color to stay active between sessions. And, it works from a single API across all platforms even though they have their own different local storage systems. Like, iOS has NS user defaults, Android has shared preferences, the web has local storage, and I don't even know what Windows or Mac use, but the beauty of Flutter is that I don't have to care. Make sure to hit the like button and subscribe, then let's set a timer for 5 minutes. After installing Flutter, we can create a new app by going to the command line and running flutter create. That'll give us some starter code in the main Dart file, which we can run with the Flutter run command. In the background, the framework will build your code in debug mode for whatever device you're currently targeting. In Versus Code, the Flutter extension gives you the option to choose different devices based on how your a system that's configured. In my case, I have a couple of browsers and also a couple of Android emulators. I'll develop the app on Android and then bring it over a new other platforms later. After running the app, it should be displayed in the Android Emulator, and we can hot reload it by typing r into the command AMLion and it also provides a couple of links in the browser with additional debug tools for us.
One thing this app needs to do is store data on the local device when the user picks their favorite color. And in order to do that, we'll install the shared preferences plugin in our pubspec. Yaml file. The package is just a basic key value store that can work with the native storage mechanism on any device. Now if we go over to our source code, I'm just going to build this thing out very quickly. In in my stateful widget. I have a map of different colors, and then the user can click a button to select one of those colors as their primary or preferred color.
software
software development
We can render the buttons used to the UI by looping over the map and including an elevated button for each one of the colors. The selected color will be used for the background in the appBar, so we create a method that updates the state of the component whenever a button is clicked. If we go ahead and run the app and click a button, the color of the app bar should change. However, if we do a full restart, you'll notice that state is lost and the preferred color goes back a default. To address that, we need to store a small amount of data on device itself that can be accessed between sessions. The way that's possible able is by creating a method that not only updates the state on the widget itself, but also saves that value with shared preferences using a key of color. Once that data has been saved on the device, we can then create another method that reads it and can update the state automatically if we call the method and initState.
Now one other thing you'll notice about this app is that we're showing the end user the platform that they're currently running on. We can do that easily by importing the dart. Io package, which has a platform class. It allows us to access the operating system, which we can just interpolate into a string. When you target multiple platforms, you'll often have UI elements or logic that needs to be different on different platforms. That kind of defeats the whole purpose of cross platform development, but it's often unavoidable.
software
infrastructure
software development
programming
Avoidable. You can use conditional logic to check the platform you're on and then run different code based on that platform. If you're only targeting iOS and Android, it's usually not a big deal. A but if you're also targeting the web and desktop, your platform checking requirements might get pretty crazy. Now that we have a fully polished app on Android, let's bring it over to other platforms starting with iOS. To run the code on an iOS emulator, I've just cloned the project over to my MacBook, which already has an emulator set up in Xcode, a so all I have to do is hit Flutter run and we're already up and running on iOS. That's 2 mobile platforms down. Now, let's shift our attention over to the web. In the file explorer, you'll notice a a directory called web, and inside that directory, we have an index HTML file. Flutter takes your Dart code and converts it to JavaScript that injects it into this HTML page. If we go ahead and change our device to Chrome and Versus Code and then run the app again, it should automatically pull it up in the browser. But as you can see here, we get a red error screen because platform is not supported on the web. To do platform checking on the web, we need to import a different variable called k as web, then we'll update our expression with it to be a ternary so we can show the proper text when we're on the web. Everything looks good now, and if we open up the browser dev tools and type in local storage, a you can see that it has our color stored there. That's pretty cool, but now it's time to build our desktop apps. Desktop support is a beta feature, so we need to enable it from the command line. Once enabled, we can then add desktop support to our existing project. We can just run flutter create with the platforms of Mac OS s and Windows from the root directory of our existing project. From there, I recommend running Flutter doctor to see if there's anything else you need installed on your machine to build for desktop. I had had to install Visual Studio along with its c plus plus tooling. At this point, you should be able to run Flutter run Windows or macOS from your Mac and get a native desktop app up and running on your machine. Or you could use the flutter build command to create the actual executable that you would install on a machine. If we do that on in Windows and then go into the build directory, you'll notice a dot exe file in the runner directory, and the process is basically identical for macOS.
The only difference is that I'm running it on a MacBook. And that's how easy it is with Flutter to get a single code base running apps on 5 different platforms. And we can actually add Linux and Fuchsia to the mix to make it 7. Before we wrap up the video, I want to talk about some of the limitations of cross platform development. There are many other cross platform tools out there like a React Native, Ionic, Xamarin, NativeScript, and so on. The one thing that they all have in common is a blue logo. While it's amazing to build an app for multiple platforms from a single database. If you're looking for the absolute maximum quality, nothing beats building an app on the native platform itself. Like, if your goal is to build a killer iOS app, you probably want to use Swift. A Or if you want to build a killer web app, use a JavaScript framework.
software development
software
video gaming
databases
multimedia
architecture
But if you want to build an extremely high quality app on every platform, the cost and effort is going to be astronomical. One of the biggest issues with cross platform development in general, in my opinion, is that it's very hard to create a unified experience across mobile, desktop, and the web.
infrastructure
architecture
technology
In fact, I'm not aware of any apps out in the world that target all 5 platforms and maintain a large user base across all of them. It's pretty easy to create a unified experience between iOS and Android or macOS and Windows. But delivering an app that feels perfect on all platforms from a single codebase is often easier said than done, but having the option efficient to do so is very nice. Many clients that I've worked with have opted for a JavaScript framework to build their web application and Flutter for their native apps, because it can create really beautiful iOS and Android apps. But those apps don't feel nearly as good when you try to translate them to the web, and the end result produced by Flutter web is much different than your ordinary web app. Instead of semantic HTML, we have the UI organized in into a canvas. There's nothing wrong with that for certain types of apps, but if you have something very content rich, you'll notice that by default, you can't a highlight or select the text. Now there is a selectable text widget to enable that, but things just might feel kind of weird. This makes the end result harder to understand, which means you really have to rely on Flutter's magic to work perfectly or dig into how it works internally to address more complex issues.
The most important thing to consider is where your primary where customers will be consuming your app. If 90% of your customers are on iOS and Android, then Flutter web is probably an acceptable experience for the other 10%, and being able to deploy that app to the web with 0 effort is a huge advantage.
customers
Now, here's the other big issue that cross platform developers face. You need plugins or packages to interact with native APIs on the different platforms. In this demo, we used shared preferences which works on all 5, but many packages out there may only work for iOS or Android, and the functionality in those packages may be far more limited than the native platforms themselves.
Now, if there isn't already a package for what trying to do, then you've got a big challenge ahead of yourself. Flutter has a mechanism called platform channels that allows you to interact with code written in different languages on different platforms, but it's not beginner friendly at all, and you'll need to understand the underlying native code written in languages like Objective C or Java.
programming
So before you go and used Flutter for 5 different platforms. You should have a good understanding of what native features you need and make sure that they're well supported with different packages. If it does meet your needs, Flutter can be an absolute joy to work with and save you 1,000,000, if not 1,000,000,000 of dollars in development work when adjusted for future inflation. Currently, I'm working on a brand new Flutter course for pro members. So stay tuned for updates on that over the next few weeks. Thanks for watching and I will see you in the next one.
Write once, run anywhere is actually a Java catchphrase that goes back to the nineties and has nothing to do with Flutter, but it should because Flutter is a tool that allows you to write one code base, then deploy to multiple platforms like iOS, Android, the web, macOS, and Windows. And we could even throw Linux and Fuchsia in there as well. If that sounds too good to be true, then it might be because cross platform development is not all rainbows and butterflies. It's extremely important to understand the trade offs with Flutter or any cross a platform tool. Today, we'll build 5 apps in 5 minutes from a single code base, but afterwards, we'll examine the pros and cons of this approach and ask the question, can you really build a successful app on all these platforms from a single code base. The app we're building today has a few buttons where the user can pick their favorite color. But the special thing about it is that it will save that color on the device's local storage allowing the selected color to stay active between sessions. And, it works from a single API across all platforms even though they have their own different local storage systems. Like, iOS has NS user defaults, Android has shared preferences, the web has local storage, and I don't even know what Windows or Mac use, but the beauty of Flutter is that I don't have to care. Make sure to hit the like button and subscribe, then let's set a timer for 5 minutes. After installing Flutter, we can create a new app by going to the command line and running flutter create. That'll give us some starter code in the main Dart file, which we can run with the Flutter run command. In the background, the framework will build your code in debug mode for whatever device you're currently targeting. In Versus Code, the Flutter extension gives you the option to choose different devices based on how your a system that's configured. In my case, I have a couple of browsers and also a couple of Android emulators. I'll develop the app on Android and then bring it over a new other platforms later. After running the app, it should be displayed in the Android Emulator, and we can hot reload it by typing r into the command AMLion and it also provides a couple of links in the browser with additional debug tools for us. One thing this app needs to do is store data on the local device when the user picks their favorite color. And in order to do that, we'll install the shared preferences plugin in our pubspec. Yaml file. The package is just a basic key value store that can work with the native storage mechanism on any device. Now if we go over to our source code, I'm just going to build this thing out very quickly. In in my stateful widget. I have a map of different colors, and then the user can click a button to select one of those colors as their primary or preferred color. We can render the buttons used to the UI by looping over the map and including an elevated button for each one of the colors. The selected color will be used for the background in the appBar, so we create a method that updates the state of the component whenever a button is clicked. If we go ahead and run the app and click a button, the color of the app bar should change. However, if we do a full restart, you'll notice that state is lost and the preferred color goes back a default. To address that, we need to store a small amount of data on device itself that can be accessed between sessions. The way that's possible able is by creating a method that not only updates the state on the widget itself, but also saves that value with shared preferences using a key of color. Once that data has been saved on the device, we can then create another method that reads it and can update the state automatically if we call the method and initState. Now one other thing you'll notice about this app is that we're showing the end user the platform that they're currently running on. We can do that easily by importing the dart. Io package, which has a platform class. It allows us to access the operating system, which we can just interpolate into a string. When you target multiple platforms, you'll often have UI elements or logic that needs to be different on different platforms. That kind of defeats the whole purpose of cross platform development, but it's often unavoidable. Avoidable. You can use conditional logic to check the platform you're on and then run different code based on that platform. If you're only targeting iOS and Android, it's usually not a big deal. A but if you're also targeting the web and desktop, your platform checking requirements might get pretty crazy. Now that we have a fully polished app on Android, let's bring it over to other platforms starting with iOS. To run the code on an iOS emulator, I've just cloned the project over to my MacBook, which already has an emulator set up in Xcode, a so all I have to do is hit Flutter run and we're already up and running on iOS. That's 2 mobile platforms down. Now, let's shift our attention over to the web. In the file explorer, you'll notice a a directory called web, and inside that directory, we have an index HTML file. Flutter takes your Dart code and converts it to JavaScript that injects it into this HTML page. If we go ahead and change our device to Chrome and Versus Code and then run the app again, it should automatically pull it up in the browser. But as you can see here, we get a red error screen because platform is not supported on the web. To do platform checking on the web, we need to import a different variable called k as web, then we'll update our expression with it to be a ternary so we can show the proper text when we're on the web. Everything looks good now, and if we open up the browser dev tools and type in local storage, a you can see that it has our color stored there. That's pretty cool, but now it's time to build our desktop apps. Desktop support is a beta feature, so we need to enable it from the command line. Once enabled, we can then add desktop support to our existing project. We can just run flutter create with the platforms of Mac OS s and Windows from the root directory of our existing project. From there, I recommend running Flutter doctor to see if there's anything else you need installed on your machine to build for desktop. I had had to install Visual Studio along with its c plus plus tooling. At this point, you should be able to run Flutter run Windows or macOS from your Mac and get a native desktop app up and running on your machine. Or you could use the flutter build command to create the actual executable that you would install on a machine. If we do that on in Windows and then go into the build directory, you'll notice a dot exe file in the runner directory, and the process is basically identical for macOS. The only difference is that I'm running it on a MacBook. And that's how easy it is with Flutter to get a single code base running apps on 5 different platforms. And we can actually add Linux and Fuchsia to the mix to make it 7. Before we wrap up the video, I want to talk about some of the limitations of cross platform development. There are many other cross platform tools out there like a React Native, Ionic, Xamarin, NativeScript, and so on. The one thing that they all have in common is a blue logo. While it's amazing to build an app for multiple platforms from a single database. If you're looking for the absolute maximum quality, nothing beats building an app on the native platform itself. Like, if your goal is to build a killer iOS app, you probably want to use Swift. A Or if you want to build a killer web app, use a JavaScript framework. But if you want to build an extremely high quality app on every platform, the cost and effort is going to be astronomical. One of the biggest issues with cross platform development in general, in my opinion, is that it's very hard to create a unified experience across mobile, desktop, and the web. In fact, I'm not aware of any apps out in the world that target all 5 platforms and maintain a large user base across all of them. It's pretty easy to create a unified experience between iOS and Android or macOS and Windows. But delivering an app that feels perfect on all platforms from a single codebase is often easier said than done, but having the option efficient to do so is very nice. Many clients that I've worked with have opted for a JavaScript framework to build their web application and Flutter for their native apps, because it can create really beautiful iOS and Android apps. But those apps don't feel nearly as good when you try to translate them to the web, and the end result produced by Flutter web is much different than your ordinary web app. Instead of semantic HTML, we have the UI organized in into a canvas. There's nothing wrong with that for certain types of apps, but if you have something very content rich, you'll notice that by default, you can't a highlight or select the text. Now there is a selectable text widget to enable that, but things just might feel kind of weird. This makes the end result harder to understand, which means you really have to rely on Flutter's magic to work perfectly or dig into how it works internally to address more complex issues. The most important thing to consider is where your primary where customers will be consuming your app. If 90% of your customers are on iOS and Android, then Flutter web is probably an acceptable experience for the other 10%, and being able to deploy that app to the web with 0 effort is a huge advantage. Now, here's the other big issue that cross platform developers face. You need plugins or packages to interact with native APIs on the different platforms. In this demo, we used shared preferences which works on all 5, but many packages out there may only work for iOS or Android, and the functionality in those packages may be far more limited than the native platforms themselves. Now, if there isn't already a package for what trying to do, then you've got a big challenge ahead of yourself. Flutter has a mechanism called platform channels that allows you to interact with code written in different languages on different platforms, but it's not beginner friendly at all, and you'll need to understand the underlying native code written in languages like Objective C or Java. So before you go and used Flutter for 5 different platforms. You should have a good understanding of what native features you need and make sure that they're well supported with different packages. If it does meet your needs, Flutter can be an absolute joy to work with and save you 1,000,000, if not 1,000,000,000 of dollars in development work when adjusted for future inflation. Currently, I'm working on a brand new Flutter course for pro members. So stay tuned for updates on that over the next few weeks. Thanks for watching and I will see you in the next one.
Write
write
once,
once
run
run
anywhere
anywhere
is
is
actually
actually
a
a
Java
java
catchphrase
catchphrase
that
that
goes
goes
back
back
to
to
the
the
nineties
nineties
and
and
has
has
nothing
nothing
to
to
do
do
with
with
Flutter,
flutter
but
but
it
it
should
should
because
because
Flutter
flutter
is
is
a
a
tool
tool
that
that
allows
allows
you
you
to
to
write
write
one
one
code
code
base,
base
then
then
deploy
deploy
to
to
multiple
multiple
platforms
platforms
like
like
iOS,
ios
Android,
android
the
the
web,
web
macOS,
macos
and
and
Windows.
windows
And
and
we
we
could
could
even
even
throw
throw
Linux
linux
and
and
Fuchsia
fuchsia
in
in
there
there
as
as
well.
well
If
if
that
that
sounds
sounds
too
too
good
good
to
to
be
be
true,
true
then
then
it
it
might
might
be
be
because
because
cross
cross
platform
platform
development
development
is
is
not
not
all
all
rainbows
rainbows
and
and
butterflies.
butterflies
It's
it's
extremely
extremely
important
important
to
to
understand
understand
the
the
trade
trade
offs
offs
with
with
Flutter
flutter
or
or
any
any
cross
cross
a
a
platform
platform
tool.
tool
Today,
today
we'll
we'll
build
build
5
5
apps
apps
in
in
5
5
minutes
minutes
from
from
a
a
single
single
code
code
base,
base
but
but
afterwards,
afterwards
we'll
we'll
examine
examine
the
the
pros
pros
and
and
cons
cons
of
of
this
this
approach
approach
and
and
ask
ask
the
the
question,
question
can
can
you
you
really
really
build
build
a
a
successful
successful
app
app
on
on
all
all
these
these
platforms
platforms
from
from
a
a
single
single
code
code
base.
base
The
the
app
app
we're
we're
building
building
today
today
has
has
a
a
few
few
buttons
buttons
where
where
the
the
user
user
can
can
pick
pick
their
their
favorite
favorite
color.
color
But
but
the
the
special
special
thing
thing
about
about
it
it
is
is
that
that
it
it
will
will
save
save
that
that
color
color
on
on
the
the
device's
device's
local
local
storage
storage
allowing
allowing
the
the
selected
selected
color
color
to
to
stay
stay
active
active
between
between
sessions.
sessions
And,
and
it
it
works
works
from
from
a
a
single
single
API
api
across
across
all
all
platforms
platforms
even
even
though
though
they
they
have
have
their
their
own
own
different
different
local
local
storage
storage
systems.
systems
Like,
like
iOS
ios
has
has
NS
ns
user
user
defaults,
defaults
Android
android
has
has
shared
shared
preferences,
preferences
the
the
web
web
has
has
local
local
storage,
storage
and
and
I
i
don't
don't
even
even
know
know
what
what
Windows
windows
or
or
Mac
mac
use,
use
but
but
the
the
beauty
beauty
of
of
Flutter
flutter
is
is
that
that
I
i
don't
don't
have
have
to
to
care.
care
Make
make
sure
sure
to
to
hit
hit
the
the
like
like
button
button
and
and
subscribe,
subscribe
then
then
let's
let's
set
set
a
a
timer
timer
for
for
5
5
minutes.
minutes
After
after
installing
installing
Flutter,
flutter
we
we
can
can
create
create
a
a
new
new
app
app
by
by
going
going
to
to
the
the
command
command
line
line
and
and
running
running
flutter
flutter
create.
create
That'll
that'll
give
give
us
us
some
some
starter
starter
code
code
in
in
the
the
main
main
Dart
dart
file,
file
which
which
we
we
can
can
run
run
with
with
the
the
Flutter
flutter
run
run
command.
command
In
in
the
the
background,
background
the
the
framework
framework
will
will
build
build
your
your
code
code
in
in
debug
debug
mode
mode
for
for
whatever
whatever
device
device
you're
you're
currently
currently
targeting.
targeting
In
in
Versus
versus
Code,
code
the
the
Flutter
flutter
extension
extension
gives
gives
you
you
the
the
option
option
to
to
choose
choose
different
different
devices
devices
based
based
on
on
how
how
your
your
a
a
system
system
that's
that's
configured.
configured
In
in
my
my
case,
case
I
i
have
have
a
a
couple
couple
of
of
browsers
browsers
and
and
also
also
a
a
couple
couple
of
of
Android
android
emulators.
emulators
I'll
i'll
develop
develop
the
the
app
app
on
on
Android
android
and
and
then
then
bring
bring
it
it
over
over
a
a
new
new
other
other
platforms
platforms
later.
later
After
after
running
running
the
the
app,
app
it
it
should
should
be
be
displayed
displayed
in
in
the
the
Android
android
Emulator,
emulator
and
and
we
we
can
can
hot
hot
reload
reload
it
it
by
by
typing
typing
r
r
into
into
the
the
command
command
AMLion
amlion
and
and
it
it
also
also
provides
provides
a
a
couple
couple
of
of
links
links
in
in
the
the
browser
browser
with
with
additional
additional
debug
debug
tools
tools
for
for
us.
us
One
one
thing
thing
this
this
app
app
needs
needs
to
to
do
do
is
is
store
store
data
data
on
on
the
the
local
local
device
device
when
when
the
the
user
user
picks
picks
their
their
favorite
favorite
color.
color
And
and
in
in
order
order
to
to
do
do
that,
that
we'll
we'll
install
install
the
the
shared
shared
preferences
preferences
plugin
plugin
in
in
our
our
pubspec.
pubspec
Yaml
yaml
file.
file
The
the
package
package
is
is
just
just
a
a
basic
basic
key
key
value
value
store
store
that
that
can
can
work
work
with
with
the
the
native
native
storage
storage
mechanism
mechanism
on
on
any
any
device.
device
Now
now
if
if
we
we
go
go
over
over
to
to
our
our
source
source
code,
code
I'm
i'm
just
just
going
going
to
to
build
build
this
this
thing
thing
out
out
very
very
quickly.
quickly
In
in
in
in
my
my
stateful
stateful
widget.
widget
I
i
have
have
a
a
map
map
of
of
different
different
colors,
colors
and
and
then
then
the
the
user
user
can
can
click
click
a
a
button
button
to
to
select
select
one
one
of
of
those
those
colors
colors
as
as
their
their
primary
primary
or
or
preferred
preferred
color.
color
We
we
can
can
render
render
the
the
buttons
buttons
used
used
to
to
the
the
UI
ui
by
by
looping
looping
over
over
the
the
map
map
and
and
including
including
an
an
elevated
elevated
button
button
for
for
each
each
one
one
of
of
the
the
colors.
colors
The
the
selected
selected
color
color
will
will
be
be
used
used
for
for
the
the
background
background
in
in
the
the
appBar,
appbar
so
so
we
we
create
create
a
a
method
method
that
that
updates
updates
the
the
state
state
of
of
the
the
component
component
whenever
whenever
a
a
button
button
is
is
clicked.
clicked
If
if
we
we
go
go
ahead
ahead
and
and
run
run
the
the
app
app
and
and
click
click
a
a
button,
button
the
the
color
color
of
of
the
the
app
app
bar
bar
should
should
change.
change
However,
however
if
if
we
we
do
do
a
a
full
full
restart,
restart
you'll
you'll
notice
notice
that
that
state
state
is
is
lost
lost
and
and
the
the
preferred
preferred
color
color
goes
goes
back
back
a
a
default.
default
To
to
address
address
that,
that
we
we
need
need
to
to
store
store
a
a
small
small
amount
amount
of
of
data
data
on
on
device
device
itself
itself
that
that
can
can
be
be
accessed
accessed
between
between
sessions.
sessions
The
the
way
way
that's
that's
possible
possible
able
able
is
is
by
by
creating
creating
a
a
method
method
that
that
not
not
only
only
updates
updates
the
the
state
state
on
on
the
the
widget
widget
itself,
itself
but
but
also
also
saves
saves
that
that
value
value
with
with
shared
shared
preferences
preferences
using
using
a
a
key
key
of
of
color.
color
Once
once
that
that
data
data
has
has
been
been
saved
saved
on
on
the
the
device,
device
we
we
can
can
then
then
create
create
another
another
method
method
that
that
reads
reads
it
it
and
and
can
can
update
update
the
the
state
state
automatically
automatically
if
if
we
we
call
call
the
the
method
method
and
and
initState.
initstate
Now
now
one
one
other
other
thing
thing
you'll
you'll
notice
notice
about
about
this
this
app
app
is
is
that
that
we're
we're
showing
showing
the
the
end
end
user
user
the
the
platform
platform
that
that
they're
they're
currently
currently
running
running
on.
on
We
we
can
can
do
do
that
that
easily
easily
by
by
importing
importing
the
the
dart.
dart
Io
io
package,
package
which
which
has
has
a
a
platform
platform
class.
class
It
it
allows
allows
us
us
to
to
access
access
the
the
operating
operating
system,
system
which
which
we
we
can
can
just
just
interpolate
interpolate
into
into
a
a
string.
string
When
when
you
you
target
target
multiple
multiple
platforms,
platforms
you'll
you'll
often
often
have
have
UI
ui
elements
elements
or
or
logic
logic
that
that
needs
needs
to
to
be
be
different
different
on
on
different
different
platforms.
platforms
That
that
kind
kind
of
of
defeats
defeats
the
the
whole
whole
purpose
purpose
of
of
cross
cross
platform
platform
development,
development
but
but
it's
it's
often
often
unavoidable.
unavoidable
Avoidable.
avoidable
You
you
can
can
use
use
conditional
conditional
logic
logic
to
to
check
check
the
the
platform
platform
you're
you're
on
on
and
and
then
then
run
run
different
different
code
code
based
based
on
on
that
that
platform.
platform
If
if
you're
you're
only
only
targeting
targeting
iOS
ios
and
and
Android,
android
it's
it's
usually
usually
not
not
a
a
big
big
deal.
deal
A
a
but
but
if
if
you're
you're
also
also
targeting
targeting
the
the
web
web
and
and
desktop,
desktop
your
your
platform
platform
checking
checking
requirements
requirements
might
might
get
get
pretty
pretty
crazy.
crazy
Now
now
that
that
we
we
have
have
a
a
fully
fully
polished
polished
app
app
on
on
Android,
android
let's
let's
bring
bring
it
it
over
over
to
to
other
other
platforms
platforms
starting
starting
with
with
iOS.
ios
To
to
run
run
the
the
code
code
on
on
an
an
iOS
ios
emulator,
emulator
I've
i've
just
just
cloned
cloned
the
the
project
project
over
over
to
to
my
my
MacBook,
macbook
which
which
already
already
has
has
an
an
emulator
emulator
set
set
up
up
in
in
Xcode,
xcode
a
a
so
so
all
all
I
i
have
have
to
to
do
do
is
is
hit
hit
Flutter
flutter
run
run
and
and
we're
we're
already
already
up
up
and
and
running
running
on
on
iOS.
ios
That's
that's
2
2
mobile
mobile
platforms
platforms
down.
down
Now,
now
let's
let's
shift
shift
our
our
attention
attention
over
over
to
to
the
the
web.
web
In
in
the
the
file
file
explorer,
explorer
you'll
you'll
notice
notice
a
a
a
a
directory
directory
called
called
web,
web
and
and
inside
inside
that
that
directory,
directory
we
we
have
have
an
an
index
index
HTML
html
file.
file
Flutter
flutter
takes
takes
your
your
Dart
dart
code
code
and
and
converts
converts
it
it
to
to
JavaScript
javascript
that
that
injects
injects
it
it
into
into
this
this
HTML
html
page.
page
If
if
we
we
go
go
ahead
ahead
and
and
change
change
our
our
device
device
to
to
Chrome
chrome
and
and
Versus
versus
Code
code
and
and
then
then
run
run
the
the
app
app
again,
again
it
it
should
should
automatically
automatically
pull
pull
it
it
up
up
in
in
the
the
browser.
browser
But
but
as
as
you
you
can
can
see
see
here,
here
we
we
get
get
a
a
red
red
error
error
screen
screen
because
because
platform
platform
is
is
not
not
supported
supported
on
on
the
the
web.
web
To
to
do
do
platform
platform
checking
checking
on
on
the
the
web,
web
we
we
need
need
to
to
import
import
a
a
different
different
variable
variable
called
called
k
k
as
as
web,
web
then
then
we'll
we'll
update
update
our
our
expression
expression
with
with
it
it
to
to
be
be
a
a
ternary
ternary
so
so
we
we
can
can
show
show
the
the
proper
proper
text
text
when
when
we're
we're
on
on
the
the
web.
web
Everything
everything
looks
looks
good
good
now,
now
and
and
if
if
we
we
open
open
up
up
the
the
browser
browser
dev
dev
tools
tools
and
and
type
type
in
in
local
local
storage,
storage
a
a
you
you
can
can
see
see
that
that
it
it
has
has
our
our
color
color
stored
stored
there.
there
That's
that's
pretty
pretty
cool,
cool
but
but
now
now
it's
it's
time
time
to
to
build
build
our
our
desktop
desktop
apps.
apps
Desktop
desktop
support
support
is
is
a
a
beta
beta
feature,
feature
so
so
we
we
need
need
to
to
enable
enable
it
it
from
from
the
the
command
command
line.
line
Once
once
enabled,
enabled
we
we
can
can
then
then
add
add
desktop
desktop
support
support
to
to
our
our
existing
existing
project.
project
We
we
can
can
just
just
run
run
flutter
flutter
create
create
with
with
the
the
platforms
platforms
of
of
Mac
mac
OS
os
s
s
and
and
Windows
windows
from
from
the
the
root
root
directory
directory
of
of
our
our
existing
existing
project.
project
From
from
there,
there
I
i
recommend
recommend
running
running
Flutter
flutter
doctor
doctor
to
to
see
see
if
if
there's
there's
anything
anything
else
else
you
you
need
need
installed
installed
on
on
your
your
machine
machine
to
to
build
build
for
for
desktop.
desktop
I
i
had
had
had
had
to
to
install
install
Visual
visual
Studio
studio
along
along
with
with
its
its
c
c
plus
plus
plus
plus
tooling.
tooling
At
at
this
this
point,
point
you
you
should
should
be
be
able
able
to
to
run
run
Flutter
flutter
run
run
Windows
windows
or
or
macOS
macos
from
from
your
your
Mac
mac
and
and
get
get
a
a
native
native
desktop
desktop
app
app
up
up
and
and
running
running
on
on
your
your
machine.
machine
Or
or
you
you
could
could
use
use
the
the
flutter
flutter
build
build
command
command
to
to
create
create
the
the
actual
actual
executable
executable
that
that
you
you
would
would
install
install
on
on
a
a
machine.
machine
If
if
we
we
do
do
that
that
on
on
in
in
Windows
windows
and
and
then
then
go
go
into
into
the
the
build
build
directory,
directory
you'll
you'll
notice
notice
a
a
dot
dot
exe
exe
file
file
in
in
the
the
runner
runner
directory,
directory
and
and
the
the
process
process
is
is
basically
basically
identical
identical
for
for
macOS.
macos
The
the
only
only
difference
difference
is
is
that
that
I'm
i'm
running
running
it
it
on
on
a
a
MacBook.
macbook
And
and
that's
that's
how
how
easy
easy
it
it
is
is
with
with
Flutter
flutter
to
to
get
get
a
a
single
single
code
code
base
base
running
running
apps
apps
on
on
5
5
different
different
platforms.
platforms
And
and
we
we
can
can
actually
actually
add
add
Linux
linux
and
and
Fuchsia
fuchsia
to
to
the
the
mix
mix
to
to
make
make
it
it
7.
7
Before
before
we
we
wrap
wrap
up
up
the
the
video,
video
I
i
want
want
to
to
talk
talk
about
about
some
some
of
of
the
the
limitations
limitations
of
of
cross
cross
platform
platform
development.
development
There
there
are
are
many
many
other
other
cross
cross
platform
platform
tools
tools
out
out
there
there
like
like
a
a
React
react
Native,
native
Ionic,
ionic
Xamarin,
xamarin
NativeScript,
nativescript
and
and
so
so
on.
on
The
the
one
one
thing
thing
that
that
they
they
all
all
have
have
in
in
common
common
is
is
a
a
blue
blue
logo.
logo
While
while
it's
it's
amazing
amazing
to
to
build
build
an
an
app
app
for
for
multiple
multiple
platforms
platforms
from
from
a
a
single
single
database.
database
If
if
you're
you're
looking
looking
for
for
the
the
absolute
absolute
maximum
maximum
quality,
quality
nothing
nothing
beats
beats
building
building
an
an
app
app
on
on
the
the
native
native
platform
platform
itself.
itself
Like,
like
if
if
your
your
goal
goal
is
is
to
to
build
build
a
a
killer
killer
iOS
ios
app,
app
you
you
probably
probably
want
want
to
to
use
use
Swift.
swift
A
a
Or
or
if
if
you
you
want
want
to
to
build
build
a
a
killer
killer
web
web
app,
app
use
use
a
a
JavaScript
javascript
framework.
framework
But
but
if
if
you
you
want
want
to
to
build
build
an
an
extremely
extremely
high
high
quality
quality
app
app
on
on
every
every
platform,
platform
the
the
cost
cost
and
and
effort
effort
is
is
going
going
to
to
be
be
astronomical.
astronomical
One
one
of
of
the
the
biggest
biggest
issues
issues
with
with
cross
cross
platform
platform
development
development
in
in
general,
general
in
in
my
my
opinion,
opinion
is
is
that
that
it's
it's
very
very
hard
hard
to
to
create
create
a
a
unified
unified
experience
experience
across
across
mobile,
mobile
desktop,
desktop
and
and
the
the
web.
web
In
in
fact,
fact
I'm
i'm
not
not
aware
aware
of
of
any
any
apps
apps
out
out
in
in
the
the
world
world
that
that
target
target
all
all
5
5
platforms
platforms
and
and
maintain
maintain
a
a
large
large
user
user
base
base
across
across
all
all
of
of
them.
them
It's
it's
pretty
pretty
easy
easy
to
to
create
create
a
a
unified
unified
experience
experience
between
between
iOS
ios
and
and
Android
android
or
or
macOS
macos
and
and
Windows.
windows
But
but
delivering
delivering
an
an
app
app
that
that
feels
feels
perfect
perfect
on
on
all
all
platforms
platforms
from
from
a
a
single
single
codebase
codebase
is
is
often
often
easier
easier
said
said
than
than
done,
done
but
but
having
having
the
the
option
option
efficient
efficient
to
to
do
do
so
so
is
is
very
very
nice.
nice
Many
many
clients
clients
that
that
I've
i've
worked
worked
with
with
have
have
opted
opted
for
for
a
a
JavaScript
javascript
framework
framework
to
to
build
build
their
their
web
web
application
application
and
and
Flutter
flutter
for
for
their
their
native
native
apps,
apps
because
because
it
it
can
can
create
create
really
really
beautiful
beautiful
iOS
ios
and
and
Android
android
apps.
apps
But
but
those
those
apps
apps
don't
don't
feel
feel
nearly
nearly
as
as
good
good
when
when
you
you
try
try
to
to
translate
translate
them
them
to
to
the
the
web,
web
and
and
the
the
end
end
result
result
produced
produced
by
by
Flutter
flutter
web
web
is
is
much
much
different
different
than
than
your
your
ordinary
ordinary
web
web
app.
app
Instead
instead
of
of
semantic
semantic
HTML,
html
we
we
have
have
the
the
UI
ui
organized
organized
in
in
into
into
a
a
canvas.
canvas
There's
there's
nothing
nothing
wrong
wrong
with
with
that
that
for
for
certain
certain
types
types
of
of
apps,
apps
but
but
if
if
you
you
have
have
something
something
very
very
content
content
rich,
rich
you'll
you'll
notice
notice
that
that
by
by
default,
default
you
you
can't
can't
a
a
highlight
highlight
or
or
select
select
the
the
text.
text
Now
now
there
there
is
is
a
a
selectable
selectable
text
text
widget
widget
to
to
enable
enable
that,
that
but
but
things
things
just
just
might
might
feel
feel
kind
kind
of
of
weird.
weird
This
this
makes
makes
the
the
end
end
result
result
harder
harder
to
to
understand,
understand
which
which
means
means
you
you
really
really
have
have
to
to
rely
rely
on
on
Flutter's
flutter's
magic
magic
to
to
work
work
perfectly
perfectly
or
or
dig
dig
into
into
how
how
it
it
works
works
internally
internally
to
to
address
address
more
more
complex
complex
issues.
issues
The
the
most
most
important
important
thing
thing
to
to
consider
consider
is
is
where
where
your
your
primary
primary
where
where
customers
customers
will
will
be
be
consuming
consuming
your
your
app.
app
If
if
90%
90%
of
of
your
your
customers
customers
are
are
on
on
iOS
ios
and
and
Android,
android
then
then
Flutter
flutter
web
web
is
is
probably
probably
an
an
acceptable
acceptable
experience
experience
for
for
the
the
other
other
10%,
10%
and
and
being
being
able
able
to
to
deploy
deploy
that
that
app
app
to
to
the
the
web
web
with
with
0
0
effort
effort
is
is
a
a
huge
huge
advantage.
advantage
Now,
now
here's
here's
the
the
other
other
big
big
issue
issue
that
that
cross
cross
platform
platform
developers
developers
face.
face
You
you
need
need
plugins
plugins
or
or
packages
packages
to
to
interact
interact
with
with
native
native
APIs
apis
on
on
the
the
different
different
platforms.
platforms
In
in
this
this
demo,
demo
we
we
used
used
shared
shared
preferences
preferences
which
which
works
works
on
on
all
all
5,
5
but
but
many
many
packages
packages
out
out
there
there
may
may
only
only
work
work
for
for
iOS
ios
or
or
Android,
android
and
and
the
the
functionality
functionality
in
in
those
those
packages
packages
may
may
be
be
far
far
more
more
limited
limited
than
than
the
the
native
native
platforms
platforms
themselves.
themselves
Now,
now
if
if
there
there
isn't
isn't
already
already
a
a
package
package
for
for
what
what
trying
trying
to
to
do,
do
then
then
you've
you've
got
got
a
a
big
big
challenge
challenge
ahead
ahead
of
of
yourself.
yourself
Flutter
flutter
has
has
a
a
mechanism
mechanism
called
called
platform
platform
channels
channels
that
that
allows
allows
you
you
to
to
interact
interact
with
with
code
code
written
written
in
in
different
different
languages
languages
on
on
different
different
platforms,
platforms
but
but
it's
it's
not
not
beginner
beginner
friendly
friendly
at
at
all,
all
and
and
you'll
you'll
need
need
to
to
understand
understand
the
the
underlying
underlying
native
native
code
code
written
written
in
in
languages
languages
like
like
Objective
objective
C
c
or
or
Java.
java
So
so
before
before
you
you
go
go
and
and
used
used
Flutter
flutter
for
for
5
5
different
different
platforms.
platforms
You
you
should
should
have
have
a
a
good
good
understanding
understanding
of
of
what
what
native
native
features
features
you
you
need
need
and
and
make
make
sure
sure
that
that
they're
they're
well
well
supported
supported
with
with
different
different
packages.
packages
If
if
it
it
does
does
meet
meet
your
your
needs,
needs
Flutter
flutter
can
can
be
be
an
an
absolute
absolute
joy
joy
to
to
work
work
with
with
and
and
save
save
you
you
1,000,000,
1,000,000
if
if
not
not
1,000,000,000
1,000,000,000
of
of
dollars
dollars
in
in
development
development
work
work
when
when
adjusted
adjusted
for
for
future
future
inflation.
inflation
Currently,
currently
I'm
i'm
working
working
on
on
a
a
brand
brand
new
new
Flutter
flutter
course
course
for
for
pro
pro
members.
members
So
so
stay
stay
tuned
tuned
for
for
updates
updates
on
on
that
that
over
over
the
the
next
next
few
few
weeks.
weeks
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss the use of Flutter, a tool that allows users to write code on multiple platforms and save colors on devices. They also explain how to update state on devices and store data on devices using the Flutter extension for updates. The use of Flutter run and Flutter build command creates a unified experience across multiple platforms, but it is not supported on the web. The limitations of cross platform development lead to issues with the unified experience and a new Flutter course is available for pro members.
Build 5 Apps in 5 Minutes with Flutter… But should you?
Write once, run anywhere is actually a Java catchphrase that goes back to the nineties and has nothing to do with Flutter, but it should because Flutter is a tool that allows you to write one code base, then deploy to multiple platforms like iOS, Android, the web, macOS, and Windows. And we could even throw Linux and Fuchsia in there as well. If that sounds too good to be true, then it might be because cross platform development is not all rainbows and butterflies. It's extremely important to understand the trade offs with Flutter or any cross a platform tool. Today, we'll build 5 apps in 5 minutes from a single code base, but afterwards, we'll examine the pros and cons of this approach and ask the question, can you really build a successful app on all these platforms from a single code base. The app we're building today has a few buttons where the user can pick their favorite color. But the special thing about it is that it will save that color on the device's local storage allowing the selected color to stay active between sessions. And, it works from a single API across all platforms even though they have their own different local storage systems. Like, iOS has NS user defaults, Android has shared preferences, the web has local storage, and I don't even know what Windows or Mac use, but the beauty of Flutter is that I don't have to care. Make sure to hit the like button and subscribe, then let's set a timer for 5 minutes. After installing Flutter, we can create a new app by going to the command line and running flutter create. That'll give us some starter code in the main Dart file, which we can run with the Flutter run command. In the background, the framework will build your code in debug mode for whatever device you're currently targeting. In Versus Code, the Flutter extension gives you the option to choose different devices based on how your a system that's configured. In my case, I have a couple of browsers and also a couple of Android emulators. I'll develop the app on Android and then bring it over a new other platforms later. After running the app, it should be displayed in the Android Emulator, and we can hot reload it by typing r into the command AMLion and it also provides a couple of links in the browser with additional debug tools for us. One thing this app needs to do is store data on the local device when the user picks their favorite color. And in order to do that, we'll install the shared preferences plugin in our pubspec. Yaml file. The package is just a basic key value store that can work with the native storage mechanism on any device. Now if we go over to our source code, I'm just going to build this thing out very quickly. In in my stateful widget. I have a map of different colors, and then the user can click a button to select one of those colors as their primary or preferred color. We can render the buttons used to the UI by looping over the map and including an elevated button for each one of the colors. The selected color will be used for the background in the appBar, so we create a method that updates the state of the component whenever a button is clicked. If we go ahead and run the app and click a button, the color of the app bar should change. However, if we do a full restart, you'll notice that state is lost and the preferred color goes back a default. To address that, we need to store a small amount of data on device itself that can be accessed between sessions. The way that's possible able is by creating a method that not only updates the state on the widget itself, but also saves that value with shared preferences using a key of color. Once that data has been saved on the device, we can then create another method that reads it and can update the state automatically if we call the method and initState. Now one other thing you'll notice about this app is that we're showing the end user the platform that they're currently running on. We can do that easily by importing the dart. Io package, which has a platform class. It allows us to access the operating system, which we can just interpolate into a string. When you target multiple platforms, you'll often have UI elements or logic that needs to be different on different platforms. That kind of defeats the whole purpose of cross platform development, but it's often unavoidable. Avoidable. You can use conditional logic to check the platform you're on and then run different code based on that platform. If you're only targeting iOS and Android, it's usually not a big deal. A but if you're also targeting the web and desktop, your platform checking requirements might get pretty crazy. Now that we have a fully polished app on Android, let's bring it over to other platforms starting with iOS. To run the code on an iOS emulator, I've just cloned the project over to my MacBook, which already has an emulator set up in Xcode, a so all I have to do is hit Flutter run and we're already up and running on iOS. That's 2 mobile platforms down. Now, let's shift our attention over to the web. In the file explorer, you'll notice a a directory called web, and inside that directory, we have an index HTML file. Flutter takes your Dart code and converts it to JavaScript that injects it into this HTML page. If we go ahead and change our device to Chrome and Versus Code and then run the app again, it should automatically pull it up in the browser. But as you can see here, we get a red error screen because platform is not supported on the web. To do platform checking on the web, we need to import a different variable called k as web, then we'll update our expression with it to be a ternary so we can show the proper text when we're on the web. Everything looks good now, and if we open up the browser dev tools and type in local storage, a you can see that it has our color stored there. That's pretty cool, but now it's time to build our desktop apps. Desktop support is a beta feature, so we need to enable it from the command line. Once enabled, we can then add desktop support to our existing project. We can just run flutter create with the platforms of Mac OS s and Windows from the root directory of our existing project. From there, I recommend running Flutter doctor to see if there's anything else you need installed on your machine to build for desktop. I had had to install Visual Studio along with its c plus plus tooling. At this point, you should be able to run Flutter run Windows or macOS from your Mac and get a native desktop app up and running on your machine. Or you could use the flutter build command to create the actual executable that you would install on a machine. If we do that on in Windows and then go into the build directory, you'll notice a dot exe file in the runner directory, and the process is basically identical for macOS. The only difference is that I'm running it on a MacBook. And that's how easy it is with Flutter to get a single code base running apps on 5 different platforms. And we can actually add Linux and Fuchsia to the mix to make it 7. Before we wrap up the video, I want to talk about some of the limitations of cross platform development. There are many other cross platform tools out there like a React Native, Ionic, Xamarin, NativeScript, and so on. The one thing that they all have in common is a blue logo. While it's amazing to build an app for multiple platforms from a single database. If you're looking for the absolute maximum quality, nothing beats building an app on the native platform itself. Like, if your goal is to build a killer iOS app, you probably want to use Swift. A Or if you want to build a killer web app, use a JavaScript framework. But if you want to build an extremely high quality app on every platform, the cost and effort is going to be astronomical. One of the biggest issues with cross platform development in general, in my opinion, is that it's very hard to create a unified experience across mobile, desktop, and the web. In fact, I'm not aware of any apps out in the world that target all 5 platforms and maintain a large user base across all of them. It's pretty easy to create a unified experience between iOS and Android or macOS and Windows. But delivering an app that feels perfect on all platforms from a single codebase is often easier said than done, but having the option efficient to do so is very nice. Many clients that I've worked with have opted for a JavaScript framework to build their web application and Flutter for their native apps, because it can create really beautiful iOS and Android apps. But those apps don't feel nearly as good when you try to translate them to the web, and the end result produced by Flutter web is much different than your ordinary web app. Instead of semantic HTML, we have the UI organized in into a canvas. There's nothing wrong with that for certain types of apps, but if you have something very content rich, you'll notice that by default, you can't a highlight or select the text. Now there is a selectable text widget to enable that, but things just might feel kind of weird. This makes the end result harder to understand, which means you really have to rely on Flutter's magic to work perfectly or dig into how it works internally to address more complex issues. The most important thing to consider is where your primary where customers will be consuming your app. If 90% of your customers are on iOS and Android, then Flutter web is probably an acceptable experience for the other 10%, and being able to deploy that app to the web with 0 effort is a huge advantage. Now, here's the other big issue that cross platform developers face. You need plugins or packages to interact with native APIs on the different platforms. In this demo, we used shared preferences which works on all 5, but many packages out there may only work for iOS or Android, and the functionality in those packages may be far more limited than the native platforms themselves. Now, if there isn't already a package for what trying to do, then you've got a big challenge ahead of yourself. Flutter has a mechanism called platform channels that allows you to interact with code written in different languages on different platforms, but it's not beginner friendly at all, and you'll need to understand the underlying native code written in languages like Objective C or Java. So before you go and used Flutter for 5 different platforms. You should have a good understanding of what native features you need and make sure that they're well supported with different packages. If it does meet your needs, Flutter can be an absolute joy to work with and save you 1,000,000, if not 1,000,000,000 of dollars in development work when adjusted for future inflation. Currently, I'm working on a brand new Flutter course for pro members. So stay tuned for updates on that over the next few weeks. Thanks for watching and I will see you in the next one.
The speakers discuss the use of Flutter, a tool that allows users to write code on multiple platforms and save colors on devices. They also explain how to update state on devices and store data on devices using the Flutter extension for updates. The use of Flutter run and Flutter build command creates a unified experience across multiple platforms, but it is not supported on the web. The limitations of cross platform development lead to issues with the unified experience and a new Flutter course is available for pro members.