This article will help you to build a Flutter Wear OS (Android Wear) app from scratch.
I was working on Wear OS apps using Flutter for the past few days, as inspiration from Matt Sullivan article “Experimenting with Flutter on Wear OS”. The plugin, “wear”, created by Matt helped me a lot in managing the screen size of the watch across different screens.
In this app, I have tried to optimize the “Relax” app created by Erin Morrissey (made as a Flutter Create Submission 2019, which got nominated for Visual Beauty), to run on Wear OS devices.
Some screenshots of the final app are given below:
Screenshots:
App In Action:
To build a Wear OS app, we also have to do a lot to modifications as well as additions to the android part of the Flutter app, which is really a very tedious process, so bear with me.
Matt has already discussed, in his GitHub project of flutter_wear_plugin, how to set up the project for Flutter Wear OS apps. But, I faced a lot of difficulties while following the steps. So, I recommend that you clone my project or Matt’s example project and then work on it, after deleting the UI files which you don’t require, because in this way you do not need to set up the whole project which consumes a huge amount of time and you will face a lot of challenges.
I am again stating the setup process below (not recommended):
App Gradle File
Change the min SDK version to API 23:
minSdkVersion 23Then, add the following dependencies to the Android Gradle file for the app:
dependencies {
// Wear libraries
implementation 'com.android.support:wear:27.1.1'
implementation 'com.google.android.support:wearable:2.3.0'
compileOnly 'com.google.android.wearable:wearable:2.3.0'
}Manifest File
Add the following to your AndroidManifest.xml file:
Update Android’s MainActivity
The ambient mode widget needs some initialization in Android’s MainActivity code. Update your code as follows:
So, after the setup is complete let’s dive into the best part that is coding.
Before diving into the real coding part, let’s see what are the plugins required and also import the assets required in this project.
Plugins:
The plugins used for this project are:
- wear (for using the Wear OS optimized widgets)
- audioplayers (to use audio playback in the app)
Assets:
The images, icons, audio files, as well as the system material icons, are included in the assets folder, which you can download by going to the Google Drive link below:
I will tell you in a minute why I have included the system material icons in the assets folder by downloading them from the Material Design Website, although as you might know all of the material design icons are integrated with Flutter for direct use.
Don’t forget to import these in your “pubspec.yaml” file.
main.dart
First of all, import the packages that are required in the “main.dart” file.
The wear plugin gives three types of widgets:
- WatchShape: determines whether the watch is square or round.
- InheritedShape: an InheritedWidget that can be used to pass the shape of the watch down the widget tree.
- AmbientMode: builder that provides what mode the watch is in. The widget will rebuild whenever the watch changes mode.
We will require all these widgets in the “main.dart” file.
The Wear OS has two modes:
- Normal Mode
- Ambient Mode
So, when the Wear OS is in the normal mode we will show the real content of the app and when it is in the ambient mode we will show a screen with a dark background, which will help to save battery.
After adding all these, our “main.dart” file will look like this:
ambient_screen.dart
Next, we will design the UI of the ambient screen of the watch.
The final Ambient screen will look like this:
As you can tell from the screenshot that we have to add a Scaffold (set the background color to black) with a Column containing two widgets:
- Text widget (set text color to blue)
- FlutterLogo widget
So, the completed ambient screen code will look like this:
start_screen.dart
In this file, we have to determine the screen size of the watch so that all the components properly fit within the screen. To determine the size and shape of the watch face we have to use the “WatchShape” widget which we get from the wear plugin.
We can determine the screen height and screen width by following this:
Now, we can build the UI using the screen size which will look like this:
It again contains a Column with two widgets:
- FlutterLogo
- RaisedButton (Inside which we have to define a route, which will take us to the next screen, i.e., “name_screen.dart”)
I had to wrap the Column widget with a Container and specified its height and width so that the contents of the column fits perfectly onto the screen.
The code for the start_screen is given below:
In the above code snippet, you can see that I have used a method “boxInsetLength” (in line number 17 &18). Actually, it is defined inside the “utils.dart” file, that’s why we had to import “utils.dart” (in line number 3). This method measures the screen size when the watch face is round by taking the radius as the input.
name_screen.dart
We have passed the screen height and screen width to the “name_screen.dart” file, so that we do not need to calculate the screen size again.
The final “name_screen.dart” file looks like this:
I don’t have to elaborate on anything in this file. The code for building this UI is given below:
One thing that I want you to notice is that in line number 39 I have used the image of a material arrow icon by importing it from the assets, but we know that all the material icons are integrated with Flutter.
Why have I imported the material icons externally?
I used the Icons integrated with Flutter during the initial build of the UI, but these icons were not displaying on the screen rather they were replaced by a Placeholder icon. So, I had to import them externally from the Material Design Website.
For the rest of my app, I have tried to use as much of the original code of the “Relax” app as I could. But to properly use the small screen real estate of the watch I had to tweak the code.
relax_menu.dart
In this screen, I have used a Column with SingleChildScrollView to show the list of different relax sound screens.
The final screen looks like this:
The code for building this UI is given below:
sound_screen.dart
In this screen, mostly the audio playback is handled by using the plugin “audioplayers” and a beautiful background animation is added, which transitions between two images for each screen.
Erin Morrissey has handled the audio playback and the background animation perfectly in this screen.
The only thing that I had to do is to properly fit the contents in such a small screen. I have used “BoxFit.fill” with the background images and I have centered the Column containing two widgets:
- Text widget (Heading of the screen)
- Play/Pause icon button
The final screens look like this:
The code used for building this UI is given below:
So finally, we have completed our Wear OS project, rather you can call it as a FlutterOS.
After creating this project, I admit that Flutter is not optimized for Wear OS devices till now as many of the simple things are not working on Wear OS like all material Icons which are included in Flutter are not displaying on Wear OS devices.
The most important thing is that Flutter being a cross-platform app building tool does not work on watchOS devices until now. I hope that watchOS support is added to Flutter as soon as possible.
You can find the GitHub repo for this project in the following link:
If you like this project, please give “Star” ⭐️ to my GitHub repo.
Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap button (👏)!
You can Sign Up to the blog on my website:
If you want to support me and want me to continue writing Flutter articles, please contribute to my Patreon page below:
Happy coding…
Souvik Biswas
FAQs
Can you build full app with Flutter? ›
Flutter is a cross-platform solution, which means that you can build apps with a single codebase that runs on multiple platforms. Additionally, flutter framework serves as the primary platform for Fuchsia, a new Google operating system expected to replace Android eventually.
How long does Flutter app take to develop? ›3) Design & Validation of Idea
It takes around a month or so to prepare the whole designs & wireframe of the app.
Compared to others, Flutter has the mildest learning curve and a growing community that allows developers with limited programming knowledge to prototyping and building app can also get started with Flutter.
Are Flutter apps fast? ›Flutter apps are already highly optimized for speed and are known to perform better than existing cross-platform application development platforms, such as React Native or Apache Cordova.
Is Flutter good for heavy apps? ›Flutter is one of the best solutions to develop apps for Android and iOS, without having to write in a different codebase for each platform. The smartphone versions of these apps function as true, native apps on Apple and Android devices and are compiled for the respective platform before publication.
Is 8gb RAM enough for Flutter? ›I think i have to upgrade my ram too, just confuse because people says 8gb ram is enough for flutter with emulator. As you can see, we are left with almost no memory. So, 8 GB is not enough.
Is Flutter good enough for production? ›Of course, you can also create your own components, and for this, Flutter is truly excellent. Creating good looking custom UI elements is very easy, and you will have them working on both Android and iOS. This makes Flutter a perfect choice for mobile apps with advanced, custom UI designs.
Can I learn Flutter in 2 weeks? ›Bought Angela Yu's course, finished it in two weeks, started working on the third week. But,.. I had HTML, CSS, some js, some php experience beforehand. Especially HTML & CSS was there to help me to decide to go with Flutter and not with React Native.
Why is Flutter so hard to learn? ›Although flutter is not that difficult to pick up and code, it can be quite difficult if you want to do fine details with it. Since flutter is a whole lot different from native Android development, it would help to learn them both at the same time, rather than focusing on what you want to learn more.
Is learning Flutter worth it 2022? ›According to the survey, 42% of 31,743 developers use Flutter to create applications. Google says that 500,000 developers use Flutter daily. And in the overall picture, Flutter has 2 million users today. Its rapidly increasing market makes Flutter one of the best software to learn in 2022.
Is Flutter good for future? ›
There are a number of reasons why Flutter is a good choice for web development. Flutter apps are “much faster” than traditional web apps. This is due to the use of the LOD rendering and the ease of use of the platform.
What are the disadvantages of Flutter? ›- Large and Weighty Apps. Applications created using Flutter, and packaged with its corresponding tools, are inherently larger than apps created natively. ...
- Limited Ecosystem. ...
- Limited Community Support. ...
- Prescriptive Tooling. ...
- Dart.
Yes, you can smoothly use Android Studio with 4 GB RAM. It will not lag at all. The only problem is that you should not use Virtual device with it.
How much RAM does Flutter need? ›4 GB RAM minimum, 8 GB RAM recommended. 2 GB of available disk space minimum, 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
Do I need GPU for Flutter? ›If you are using Flutter or Kivy, a better GPU is essential. Since, both supports GPU Acceleration and the UI is rendered through that.
Is Python better than Flutter? ›Concerning your question, Python is the go-to language for people nowadays because it's a general purpose language and also the scope in this language is wider than flutter. That's why you should go for Python.
Is Flutter still relevant 2022? ›We've built mobile, web, and desktop apps with Flutter, helped guide companies in their transition from native apps to Flutter, created games using Flutter's existing capabilities, and much more. Here's why we continue to use Flutter to build high-quality multi-platform app experiences in 2022.
Is Flutter better than unity? ›Flutter is so much easier. Even if you now have to handle updating things and an update tick it's just a breath of fresh air. But there are 2 more reasons why Flutter is better than Unity for making 2D UI-based games. And those are battery and accessibility.
Is Flutter enough for front end? ›Flutter is a framework that can be used for both frontend and backend development. However, most Flutter developers use it for the former. This is because Flutter makes it easy to create beautiful, interactive user interfaces.
Does Flutter support 120 fps? ›Flutter uses its own rendering engine, Skia, and it's capable of providing a fluid 60 FPS user experience - which can get up to 120 FPS for some devices. High refresh rate is especially noticeable during animations. Rapid development.
How many GB is Flutter? ›
To install and run Flutter, your development environment must meet these minimum requirements: Operating Systems: Windows 10 or later (64-bit), x86-64 based. Disk Space: 1.64 GB (does not include disk space for IDE/tools).
How much can a Flutter developer earn? ›Flutter Developer salary in India ranges between ₹ 1.4 Lakhs to ₹ 10.3 Lakhs with an average annual salary of ₹ 4.0 Lakhs. Salary estimates are based on 715 salaries received from Flutter Developers.
Is Flutter better than react native 2022? ›Both Flutter and React Native are excellent frameworks for building cross-platform mobile apps, and it is difficult to choose any of those as superior in the Flutter vs React Native contest in 2022. Flutter has the advantage of being developed by Google and having excellent documentation.
Which is better full stack or Flutter? ›Generally these two doesn't have any co-relation in between. Flutter is purely Frontend and Full Stack contains everything including FrontEnd, Backend and Devops. It's up-to you who you want to become. I have been a full-stack all my life, but i enjoy frontend and devops more than backend.
How difficult is Flutter? ›Flutter is somewhat easy. Swift is less ugly and easier to work with ObjC so the wall between easier is much smaller. It still helps to have a strong CS background before going into Swift where as with Flutter not so much.
Which backend is best for Flutter? ›Using a Backend-as-a-Service (BaaS) solution like Firebase or Supabase is also a popular modern backend option for Flutter apps. However, with this option, you still may have to create cloud functions with a preferred backend language to run custom code for performing actions that don't belong to your frontend code.
Is Flutter beginner friendly? ›Similarly, getting started with Flutter is a good beginner's course that you can take up for free.
Why is Flutter not popular? ›One of the biggest drawbacks to Flutter is Dart, its implementation language. Dart is one of the languages you can use if you're running Google's web or back-end hosting environments. And that's pretty much it.
How did I learn Flutter so fast? ›Flutter is very easy to learn. Even you have never code in flutter you will feel familiar with flutter. Flutter can be learned by watching Videos, Reading Documentations and Blogs, and practicing example.
Is Flutter faster than react? ›Although Flutter belongs to one of the fastest cross-platform frameworks to build an app, the speed of development is lower than in React Native. The matter is that when working with Flutter, it's important to add different code files for Android and iOS systems.
Is Flutter hard to master? ›
Easy to Learn
Flutter uses the Dart programming language, which is simple to learn. It's much easier to make mobile and desktop applications with Flutter because it is a modern framework. If you've worked with Java, Swift, or React Native, you'll notice that Flutter is quite different.
First, Dart is a programming language optimized for mobile apps, while Flutter is a new platform built specifically for building mobile apps. These two factors make Dart a better choice if you want to design an app from the ground up or if you want to use existing code bases to build your app.
Is Flutter enough for Web development? ›Flutter is an ideal choice for businesses looking to develop an app for the web and mobile at the same time. With Flutter, a single codebase can be used to develop apps for different platforms. This saves time and reduces headaches typically associated with developing two apps simultaneously.
Is Flutter used in big companies? ›Realtor.com is a great example of a large company that turned to Flutter to help scale their mobile development.
Which language is best for Flutter? ›Dart is the official Flutter programming language that provides asynchronous programming using the Flutter Future class, and ensures improved application performance and responsiveness. And the extensive toolkit makes it the great pick between Flutter vs Android Studio.
Is Flutter developer in demand? ›One of the reasons why Flutter developers have a high demand in organizations that work with Flutter is that being a framework that helps develop cross-platform applications, it helps organizations cut down on development costs and save time.
Why Flutter is not good for web? ›For websites (blogs and other text-heavy sites), Flutter web isn't suitable. As you said, it has issues with SEO as it doesn't lay out the site using HTML, meaning that search engines can't really index it. Scrolling is also weird with Flutter Web as Flutter handles the scrolling, not the browser.
Is Flutter faster than native? ›As for native technologies, developers have to write two codes for Android and iOS, which inevitably takes more time. According to Surf experts, Flutter development is 20-50% faster compared to the creation of two native apps.
Can Flutter app be hacked? ›Attackers can install the Flutter app in insecure environments, like rooted or jailbroken devices. Then, using debuggers or hooking tools, they can alter the app's behavior. For example, the malicious actor could access premium content in media entertainment apps, bypassing licenses.
Is Flutter good for 2D games? ›Flutter has the capability to render at up to 60FPS. You can exploit that capability to build a simple 2D, or even 3D, game. Keep in mind that more complex games won't be a good idea to develop in Flutter, as most developers will gravitate towards native development for complex applications.
Can Flutter run on low end PC? ›
With these two software tools, I can unleash the power of flutter even from my fairly low-end PC. If any of the mentioned tools helped you, remember that you can tap the clap button 50 times.
Is Flutter full stack? ›If you are looking to build and ship a feature-rich full-stack application within record time, Flutter and Fauna is the right tool for the job.
Is 8GB RAM enough for app development? ›Android Studio requires 8GB RAM or more for Windows, Mac, and Linux. Xcode as well requires 8GB or more of RAM for a smooth workflow. If you are using Xamarin and MS Visual Studio, 8GB of RAM is recommended. This means that the minimum amount of RAM you will need for mobile application development is 8GB.
Can you make 3D games with Flutter? ›If you are interested in developing Flutter games, it is important to have a strong understanding of how the process works and what skills are needed. The complete list of Flutter packages that can be used to build 2D, 2.5D and 3D Games in Flutter provided below.
What is the average size of a Flutter app? ›Flutter.io (7.5 MB)
The release app generated by Flutter's cli contains the C/C++ engine and the Dart VM which makes up almost all the of the apk.
In this course you will learn how to make your own Artificial Intelligence Apps using Flutter (Android+iOS) with TensorFlow Lite. We will develop 15+ AI Apps with Flutter using TensorFlow Machine Learning and Deep Learning Concepts. In this course you will also learn how to train a model/machine for your apps.
Does Flutter needs coding? ›You need to write the code only once in Flutter and you can rest assured that the app will work across the other platforms. So, Flutter is cheap. Adding features to your app is fast because you only have to make code updates once in Flutter and that's all. Same Flutter app working on desktop, mobile, and web.
Is Flutter enough for app development? ›Flutter helps create a great UI for both iOS and Android. This is how Flutter-powered MVPs can be successfully presented to the initial audience. With the help of the pre-built widgets and UI features, you can design a variety of motion and animations to make your app's interface appealing and attractive.
Is Flutter best for app development? ›Flutter is the best mobile app development framework that can be used to build apps for iOS, Android, and Windows. Yes, you heard it right. With the latest launch of Flutter 3.0, Flutter extends stable support for Desktop applications as well.
Is Flutter enough for web development? ›Flutter is an ideal choice for businesses looking to develop an app for the web and mobile at the same time. With Flutter, a single codebase can be used to develop apps for different platforms. This saves time and reduces headaches typically associated with developing two apps simultaneously.
What are the three 3 disadvantages of Flutter? ›
- Large and Weighty Apps. Applications created using Flutter, and packaged with its corresponding tools, are inherently larger than apps created natively. ...
- Limited Ecosystem. ...
- Limited Community Support. ...
- Prescriptive Tooling. ...
- Dart.
Flutter for Web in 2022-23
Still, the team is adamant about offering greater value than conventional DOM frameworks. Flutter's main focus areas in 2022 for web support will include improving accessibility, performance, plugin quality, and consistency across browsers.
Flutter is easier to use as it is more resistant to system updates. It means that when iOS or Android update the OS, the app will remain the same. On the contrary, React Native depends on native elements, so when the update is released, some problems may appear in the launch app.
Does Flutter have future? ›The future of flutter development is bright. The framework is still in its early stages and has a lot of room for growth. Flutter is open source and free to use. It's also developed by Google, meaning there will be plenty of support.
Why is Flutter so complicated? ›The biggest problem with Flutter is Dart. Developers don't want to learn a language that is so exclusive. Companies don't want to invest in a niche framework when they know they won't find any developer around to maintain it.
Is Flutter website heavy? ›For websites (blogs and other text-heavy sites), Flutter web isn't suitable. As you said, it has issues with SEO as it doesn't lay out the site using HTML, meaning that search engines can't really index it. Scrolling is also weird with Flutter Web as Flutter handles the scrolling, not the browser.
Is Flutter worth learning 2022? ›According to the survey, 42% of 31,743 developers use Flutter to create applications. Google says that 500,000 developers use Flutter daily. And in the overall picture, Flutter has 2 million users today. Its rapidly increasing market makes Flutter one of the best software to learn in 2022.
Which Flutter architecture is best? ›BLoC Architecture is the best-suited architecture for most Flutter apps. It helps developers write a single codebase that can be shared across various platforms such as tvOS, iOS, Android, Web, watchOS, and more.