Ashutosh SinghIntroducing the Power of Wear OS in Flutter App Development Wearable technology has become integral to our lives, offering convenience and seamless integration with our daily activities. Smartwatches, in particular, have gained immense popularity, offering users a compact yet powerful platform for staying connected and accessing essential information on the go.
For developers, crafting applications for these smart gadgets requires a versatile and efficient development framework. Flutter, Google’s acclaimed open-source UI software development kit, has emerged as a game-changer in cross-platform app development. Flutter’s ability to create natively compiled applications for various platforms, including Android, iOS, web, and desktop, opens up exciting possibilities for Wear OS app development.
In this article, we will explore the powerful combination of Wear OS and Flutter, uncovering the seamless integration of these technologies and the endless potential it brings to building exceptional Wear OS apps. Whether you are a seasoned developer or a newcomer to Wear OS app development, this comprehensive guide will equip you with the necessary knowledge and skills to embark on an exciting journey of creating innovative and feature-rich wearable applications using Flutter. So, let’s dive into the world of Wear OS in Flutter and unlock the possibilities for wearable technology like never before.
Understanding Wear OS
Wear OS, Google’s smartwatch operating system, caters specifically to wearable devices, optimizing the user interface for small screens. It integrates Google Assistant, fitness tracking sensors, and customizable watch faces. Wear OS seamlessly syncs with smartphones, displaying app notifications and enabling voice commands.
For developers, Wear OS provides a rich set of tools and APIs to create user-friendly apps. From designing interfaces to leveraging Google services, the development process is streamlined. Thorough testing ensures smooth functionality before deploying apps to the Google Play Store.
As wearable technology evolves, Wear OS remains at the forefront of innovation. Its dynamic and feature-rich platform offers limitless possibilities for apps that redefine smartwatch interactions, empowering users with convenience and connectivity at their wrists.
In this article, we are going to learn how to enable Wear OS capabilities using Flutter and build a simple app that converts the current date and time into different time zones by selecting a time zone from a dropdown menu.
I am Assuming you already have hands-on experience with Flutter and have already set up the Flutter environment on your system.
Demo Of The App
Create a Flutter Project:
Open your system terminal and run the following command:
~flutter create <your-project-name>
Add a Wear package in pubspec.yaml to enable Wear OS support:
flutter:
sdk: flutter
….
wear: ^1.1.0
To use this plugin, you must set your minSdkVersion to 23.
defaultConfig {
……
minSdkVersion 23 //update this
……
}
Create a Wear OS Emulator:
To develop and test Wear OS apps effectively, setting up the Wear OS emulator in Android Studio is essential after installing Android Studio and updating SDK packages, Enable components like “Google APIs Intel x86 Atom System Image,” “Android Emulator,” and “Android SDK Platform-Tools” through the SDK Manager. Create a virtual device in the AVD Manager, selecting “Wear OS” as the device type, and customize emulator settings like orientation and RAM allocation. With the emulator ready, use the provided controls to simulate touch gestures and test Wear OS apps seamlessly before deployment to actual smartwatches.
Understanding Wear OS Mode:
The Flutter platform’s support for Wear OS can be assessed through the “wear” plugin, which introduces three distinct types of widgets:
1.WatchShape: This widget plays a role in discerning the shape of the wearable device, specifically whether it possesses a square or round form. It serves as a fundamental determinant for adjusting the layout and appearance of your app’s interface to fit the watch’s design.
2.InheritedShape: Functioning as an InheritedWidget, this component facilitates the seamless transmission of the watch’s shape information throughout the widget hierarchy. By utilizing InheritedShape, you can ensure that all relevant components of your app remain in sync with the watch’s shape, enabling consistent and appropriate rendering.
3. Ambient Mode: This widget introduces a builder that offers insights into the current operational mode of the watch, whether it’s in standard mode or ambient mode. By utilizing AmbientMode, you can create a widget that dynamically rebuilds itself in response to changes in the watch’s operational mode, allowing your app’s interface to adapt accordingly.
By leveraging these widgets effectively, Flutter developers can better address the nuances of Wear OS devices, optimizing their apps for different watch shapes and modes, and consequently providing a more tailored and immersive experience for users.
WatchShape(
builder: (BuildContext context, WearShape shape, Widget? child) {
return AmbientMode(
builder: (BuildContext context, WearMode mode, Widget? child) {
return mode == WearMode.active
? const ActiveMode() //in the active mode we show the app functionality
: const Text(“Time Converter”) //in Ambient we just showing app name ;
},
);
Add Timezone Package- timezone: ^0.9.2
This package provides the IANA time zone database and time zone-aware DateTime class, TZDateTime.
Add this package in pubspec.yaml file
flutter:
sdk: flutter
….
Now import the package and initialize
import ‘package:timezone/browser.dart’ as tz;
await tz.initializeTimeZone();
Implementing a dropdown and showing converted time in the selected timezone
Implement Dropdown using the timezone database from the timezone package –
Center(
child: DropdownButton<String>(
style: const TextStyle (fontSize: 10, color: Colors.black),
value: _selectedTimezone,
onChanged: _onTimezoneChanged,
items: tz.timeZoneDatabase.locations.keys
.map((String timezone) {
return DropdownMenuItem<String>(
value: timezone,
child: Text(timezone),
);
}).toList(),
),
),
onChanged Method-
_onTimezoneChanged(String? newTimezone) {
setState(() {
_selectedTimezone = newTimezone!; //get selected time zone
});
}
Format _selectedTimezone
var fromatDate=
DateFormat(‘yyyy-MMMM-dd hh:mm a’).format(tz.TZDateTime.from(DateTime.now(), tz.getLocation(_selectedTimezone)
)
)
Now In the Text widget, it just shows the format date-
Text(
‘Converted Time in $fromatDate’
style: const TextStyle(fontSize: 10),
),
Here is the source code for the project you just worked on.
https://github.com/ashut08/WatchTimeConverter
Add comment