The Samsung Galaxy Watch is a vital gadget for contemporary health-conscious individuals. It gives health-related information that helps to stop well being points. These Galaxy Watch options are driving its speedy rise in reputation and inspiring software builders to create functions particularly for it.
The Galaxy Watch gives an amazing consumer expertise and efficiency. That is the place the Flutter framework performs a vital position. It’s a best choice with regards to a stupendous UI, good efficiency, and speedy improvement. Flutter gives cross-platform assist, which implies we will construct functions for a number of platforms utilizing a single code base. With Flutter’s sturdy neighborhood assist, builders could make production-grade functions with little effort.
This weblog outlines the steps concerned in creating an software for the Galaxy Watch utilizing Flutter, permitting you to discover the chances it gives.
Arrange your setting
Please observe the official Arrange Flutter information to put in the Flutter framework accurately in your gadget. After the set up, please examine the standing by operating the next command. It tells you if any element is lacking or suggests what to do subsequent.
flutter physician
WordIf the above command gives options or fixes, observe these to unravel any issues earlier than persevering with.
Get began with Flutter initiatives
To simplify this software instance, we’re retrieving the battery ranges from a Galaxy Watch to make it straightforward to grasp the event course of.
On this weblog, we use Android Studio because the IDE. However, in case you are comfy with VS Code, you may observe this Official Codelab to construct your first Flutter software with that as an alternative.
To begin, set up the Flutter and Dart plugins on Android Studio. These plugins make it simpler to handle Flutter improvement utilizing the UI as an alternative of the CLI.
Determine 1: Set up Flutter and Dart plugins
After finishing the setup, it’s time to create the Flutter Venture for Galaxy Watch.
- Go to File > New > New Flutter Venture. Word that this technique solely seems for those who put in the plugins talked about above.
- Choose Flutter from the left facet panel and set the Flutter SDK path the place it was put in in the course of the Flutter setup, and click on the Subsequent button.
- Enter a mission identify and placement, and select the language in response to your preferences. Uncheck all platform choices besides Android and maintain the opposite choices as they’re.
- Click on the Create button, and a brand new window ought to open with the mission.
You at the moment are performed. Subsequent, we have to modify the code for Galaxy Watch.
Break down the weather of a Flutter mission
A easy Flutter mission for the Android platform incorporates the next folders:
android/: Accommodates Android platform code and configurations.lib/: The primary folder for a Flutter software. It incorporates your Dart code. Themajor.dartfile is the entry level of a Flutter software.pubspec.yaml: A configuration file for Flutter. It manages the appliance’s dependencies and belongings.
Configure the mission to assist Galaxy Watch
-
Let’s modify the generated code to incorporate the battery degree, permitting it to be displayed. Open the
pubspec.yamlfile and add the next plugins beneath dependencies:dependencies: flutter: sdk: flutter put on: ^1.1.0 battery_plus: ^6.0.3We use the put on and battery_plus plugins for this mission. The damage plugin gives APIs for wear-related performance, and battery_plus is for accessing battery data from the OS. Each plugins have been developed by the Flutter Neighborhood. You may even get battery data or set off Put on OS native APIs utilizing the Technique Channel, which we are going to cowl in our future blogs.
-
Change the worth of minSdk to 23, which is required for the plugins that we’re utilizing. Go to android > app > construct.gradle and alter the
minSdkproperty worth beneathdefaultConfig.defaultConfig { applicationId = "com.instance.flutter_app" minSdk = 23 targetSdk = flutter.targetSdkVersion versionCode = flutterVersionCode.toInteger() versionName = flutterVersionName } -
Add the next code to your
AndroidManifest.xmlfile, above the<software>tag. This tag defines that we’re constructing the appliance for watches.<manifest xmlns:android="http://schemas.android.com/apk/res/android"> <uses-feature android:identify="android.{hardware}.sort.watch" /> <software android:label="galaxy_watch_battery_info"
Construct the watch software
The primary problem is crafting your software to suit a tiny display screen. We should pay attention to good practices relating to UI, UX, and compactness on the identical time. However as talked about, this software is a straightforward one.
Right here we work with the construct perform of the MyHomePage class, the place the UI implementation is utilized. The major() perform is the place to begin for a Flutter software. It triggers the construct perform sequentially. Confer with the next construct technique for an instance.
@override
Widget construct(BuildContext context) {
return MaterialApp(
title: 'Galaxy Watch Demo',
theme: ThemeData(
visualDensity: VisualDensity.compact,
useMaterial3: true,
colorSchemeSeed: const Coloration(0x9f4376f8),
),
residence: Scaffold(
physique: SafeArea(
baby: _getWatchView(context),
),
),
);
}
The widgets we use are:
MaterialApp: The basis widget that incorporates all of the contents of the appliance UI and gives software functionalities like residence, theming, navigations, localizations, and so forth.Scaffold: It gives a visible format construction for an software, which has choices like an app bar and physique.SafeArea: A widget that encircles its baby to make sure it avoids overlap with the OS interface.
Tailor the UI
We are able to now entry the WatchShape widget since we transformed our software to a watch software. WatchShape is the important thing widget for watch UI design. It gives the fundamental interface shapes for watches together with ambient modes of the watch. As talked about earlier, the UI has a easy button that queries the battery degree and exhibits it in a dialog.
Widget _getWatchView(BuildContext context) {
return WatchShape(
builder: (BuildContext context, WearShape form, Widget? baby) {
return Heart(
baby: Column(
mainAxisAlignment: MainAxisAlignment.middle,
crossAxisAlignment: CrossAxisAlignment.middle,
kids: [const Text("Hello from Galaxy Watch"),
ElevatedButton(onPressed: () {
_battery.batteryLevel.then((batteryLevel) {
showDialog<void>(context: context,
builder: (_) => AlertDialog(
content: Text('Battery: $batteryLevel%'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
}, child: const Text('OK'),
)
]));
});
}, baby: const Textual content('Get battery degree'))])
);
},
);
}
The widgets we use are:
WatchShape: This widget makes the UI compact to suit the watch’s small display screen.battery.batteryLevel: To entry the battery data, we have to create an occasion of theBatteryclass. Please consult with the next code for instance.
remaining Battery _battery = Battery();
Check the appliance
Now it’s time to see how your software works. Save all of the modifications and run the appliance by clicking the Run button from the “Essential Toolbar.” It is best to see a brand new UI titled “Whats up from Galaxy Watch” with a single button. You will have created a Flutter software for a Galaxy Watch. Congratulations!
Determine 2: Pattern software
Conclusion
This weblog walked you thru constructing an software for Galaxy Watch. Flutter gives an incredible toolkit for crafting stunning UIs. Inside a short while you may construct functions on a tool to perform what you need.
Don’t neglect to experiment with constructing functions and benefit from the journey of making one thing new for Galaxy Watches. For extra ideas and methods on Galaxy Watch software improvement, please maintain your eyes on the Samsung Developer portal.
