How To Create Watch App Using Flutter

Suraj Chauhan

10 October 2024

In this blog we will learn about how to create Watch app using Flutter. With help of Flutter we can easily build Watch app.

A Watch app typically refers to an application or app designed specifically for smartwatches.

Smartwatches are wearable devices with computing capabilities. They often act as an extension of a user’s smartphone, providing quick access to information and various functions right on the wrist.

Watch apps are designed specifically for the small screen and the unique interaction patterns of smartwatches.

Characteristics of Watch app

1) Notification

Smartwatche’s excel at delivering notifications directly to the user’s wrist. Watch app may leverage notifications to keep users informed about messages, alerts, and update form other application.

2) Health and Fitness Tracking

Wear OS devices come with built-in sensors to track health and fitness metrics.

Fitness app development services often include features like workout tracking, heart-rate monitoring, and other health-related tools.

3) Quick Interactions

Watch apps are designed for quick interaction, often replying on gestures, taps, and swipe.

They are optimised for scenario where users may not want to take out there smartphone for a more extended interaction.

4) Voice Commands

Voice command and dictation are common features in Watch apps. Users can interact with the apps by speaking commands or dictating messages.

You may also check our Flutter App development services.

Setup for Watch app

To create Watch app, we need to do lot of modifications as well as addition to the Android part of the Flutter app. For the Implementations please follows below steps.

First for all, we need to create a new Flutter project and apply the following changes to it.

Setting up App Gradle for Android

Set the minSdkVersion to 23 in app gradle file.

1	minSdkVersion 23

2. After that we need to add following Wear libraries in app gradle file.

dependency{

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'

}

3. After that we need to add following dependency in AndroidManifest.xml file.

<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-feature android:name="android.hardware.type.watch" />

<meta-data

android:name="com.google.android.wearable.standalone"

android:value="true" />

</application>

WAKE_LOCK permission is helpful to indicate that your application needs to have the device stay on.

Implementation

We are going to implement Watch app in Flutter.

For implementation please follow below mention steps.

We need to add following dependency in pubspec.yaml file. Add latest version in your Flutter project.

1	wear: ^1.1.0

wear: This dependency is use for Wear OS optimized widgets.

After that, we need to create StatefulWidget(WatchApp) and call from main.dart and import below mention package.

1	import 'package:wear/wear.dart';

After Importing library and packages, we need to add following code inside WatchApp class.

class WatchApp extends StatefulWidget {
  const WatchApp({Key? key}) : super(key: key);

@override
  State<WatchApp> createState() => _WatchAppState();
}

class _WatchAppState extends State<WatchApp> {
  bool isVisibleData = false;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor:Theme.of(context).colorScheme.background,
      body: Container(
          decoration: BoxDecoration(
              border: Border.all(
                  color: Theme.of(context).colorScheme.background
              ),
              borderRadius: const BorderRadius.all(Radius.circular(40))

),
          child: _buildUI()
      ),
    );
  }

Widget _buildUI(){
    return WatchShape(
      builder: (BuildContext context, WearShape shape, Widget? child) {
        return Center(
            child: SingleChildScrollView(
              child: Padding(
                  padding: const EdgeInsets.only(left: 4,right: 4),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("Mobikul Watch app"),
                      ElevatedButton(onPressed: (){
                        setState(() {
                          isVisibleData = !isVisibleData;

});
                      }, child:Text("Click")
                      ),
                      Visibility(
                        visible: isVisibleData,
                          child: Text("Hi , Hello")
                      )
                    ],
                  )
              ),
            ),
          );
      },
    );
  }
}

class WatchApp extends StatefulWidget {

const WatchApp({Key? key}) : super(key: key);

@override

State<WatchApp> createState() => _WatchAppState();

}

class _WatchAppState extends State<WatchApp> {

bool isVisibleData = false;

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor:Theme.of(context).colorScheme.background,

body: Container(

decoration: BoxDecoration(

border: Border.all(

color: Theme.of(context).colorScheme.background

borderRadius: const BorderRadius.all(Radius.circular(40))

child: _buildUI()

);

}

Widget _buildUI(){

return WatchShape(

builder: (BuildContext context, WearShape shape, Widget? child) {

return Center(

child: SingleChildScrollView(

child: Padding(

padding: const EdgeInsets.only(left: 4,right: 4),

child: Column(

crossAxisAlignment: CrossAxisAlignment.center,

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text("Mobikul Watch app"),

ElevatedButton(onPressed: (){

setState(() {

isVisibleData = !isVisibleData;

});

}, child:Text("Click")

Visibility(

visible: isVisibleData,

child: Text("Hi , Hello")

)

);

}

Output

Mobikul Watch App

Conclusion

Thanks for joining me on this exploration of How To Create Watch App Using Flutter. I hope this is helpful in creating Watch app using Flutter.

You can also check other blogs from here for more knowledge.

Thanks for reading this article.