WearOS [Flutter & WearOS] - WearOS 공부 기록 [Series 03]

[김건우]

안녕하세요.

저번 시간에 진행했었던 Series 02 편에 이어 오늘은 Series 03 편에 관한 내용을 작성해보도록 하겠습니다.

https://cafe.daum.net/vincentarnold/siqS/106?svc=cafeapi

[Flutter & WearOS] - WearOS 공부 기록 [Series 02]

이번 시간에는 새로 만든 WearOS Emulator 와 그리고 새로 만든 Project 의 내용을 꾸미는 작업을 진행해보도록 하겠습니다.

이전에 처음 WearOS Project Setting 부터 WearOS Emulator 상에서 진행한 Build 까지 성공한 Project 의 GitHub Repository 를 공유하도록 하겠습니다.

https://github.com/GeonwooVincentKim/Flutter_First_WearOS_App

GitHub - GeonwooVincentKim/Flutter_First_WearOS_App: This is the First application that display on WearOS using Flutter

여기에서 우선적으로 Code 를 Clone 또는 Zip File 로 Download 받은 후, 이 Repository 에 따라 File Directory 및 각 Dart File 들의 위치를 잘 구성해주시기 바랍니다.

Flutter Project 에 필요한 Packages Download 받기

우선 가장 필요한 Package 들을 Download 받도록 하겠습니다.

Ctrl + Shift + P 를 누른 후, Pubspec Assist: Add/update dependencies 를 클릭합니다.

그 다음, wear 를 입력한 후, Enter Key 를 누릅니다.

그러면 다음과 같이 wear package 가 자동으로 pubspec.yaml File 에 추가됩니다.

그리고 난 후, flutter pub get 을 입력하여 Project 에 새로 반영한 Package 목록들을 동기화시킵니다.

Flutter Project File Setting 하기

Dart File Setting 하기

만들어야 하는 File 들 목록입니다.

우선 main.dart File 부터 만들어보도록 하겠습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyWearOSApp());

class MyWearOSApp extends StatelessWidget {
    const MyWearOSApp({super.key});
   
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: "Wear OS App",
            theme: ThemeData(brightness: Brightness.light),
            home: const Home(),
            debugShowCheckedModeBanner: false,
        );
    }
}

Wear OS 가 기본적으로 연동이 되는 환경은 Android 입니다. 따라서 MaterialApp 을 사용합니다.

그 다음은 home.dart File 입니다.

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
    const Home({super.key});

    @override
    State<Home> createState() => HomeController();
}

class HomeController extends State<Home> {
    @override
    Widget build(BuildContext context) {
        return LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
                 return ViewWatch(state: this);
            },
        );
    }
}

StatefulWidget 으로 보통 하나의 Class 를 만들면 FileName, _FileNameState 와 같은 형태로 만들어집니다.

그러나 _FileNameState 로 Class File 이 만들어지면 Compiler 가 인식하기에 Private 환경에서 사용한다고 인식하고, _FileNameState 라는 Class 명을 불러올 수 없기 때문에 HomeController 라는 이름을 사용합니다.

그 다음은 view_watch.dart File 입니다.

import 'package:flutter/material.dart';
import 'package:flutter_second_wearos_app/app_screens/home.dart';
import 'package:wear/wear.dart';

class ViewWatch extends StatelessWidget {
    final HomeController state;
    const ViewWatch({super.key, required this.state});
   
    @override
    Widget build(BuildContext context) {
        return WatchShape(
            builder: (BuildContext context, WearShape shape, Widget? child) {
                return AmbientMode(
                    builder: (context, mode, child) {
                        return mode == WearMode.active
                            ? ViewWatchActive(state: state)
                            : ViewWatchAmbient(state: state);
                    },
                );
            },
         );
     }
}

Wear OS 에 기본적으로 필요한 WatchShape 와 AmbientMode 입니다.

WatchShape 은 Wear OS 를 사용하는 Galaxy Watch 나 Wear OS Emulator 의 모양을 결정합니다. 모양은 사각형인지, 원형인지 정할 수 있습니다.

AmbientMode 는 Watch 에 어떤 Mode 에 있는지에 관한 내용을 제공하는 Builder 입니다. Watch 가 mode 를 Update 할 때마다 widget 을 다시 Build 합니다.

그 다음은 view_watch_active.dart File 입니다.

import 'package:flutter/material.dart';
import 'package:flutter_second_wearos_app/app_screens/home.dart';

class ViewWatchActive extends StatelessWidget {
    final HomeController state;
    const ViewWatchActive({super.key, required this.state});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Colors.white,
            body: Center(
                child: Text("Hello World~!!!!"),
            ),
        );
    }
}

WearMode 가 active 일 때 view_watch_active.dart File 의 내용이 표출됩니다.

그 다음은 view_watch_ambient.dart File 입니다.

import 'package:flutter/material.dart';
import 'package:flutter_second_wearos_app/app_screens/home.dart';

class ViewWatchAmbient extends StatelessWidget {
    final HomeController state;
    const ViewWatchAmbient({super.key, required this.state});
   
    @override Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Colors.white,
            body: Center(
                child: Text("Good Bye World~!!!"),
            ),
        );
     }
}

WearMode 가 active 가 아닐 때, view_watch_ambient.dart File 의 내용이 표출됩니다.

build.gradle, pubspec.yaml Setting 하기

이번엔 Build.gradle, pubspec.yaml File 을 Setting 을 한 번 해보겠습니다.

만약 이 단계를 건너뛰고 바로 실행한다면 하단의 Error 가 발생합니다.

이 Error 를 피하기 위해선 먼저 build.gradle File, 즉, 여기선 android > build.gradle File 의 Version 을 Downgrade해야 합니다.

buildscript {
    ext.kotlin_version = '1.6.10'
    repositories {
            google()
            mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:7.1.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

여기서 말하는 Version 은 ext.kotlin_version 을 말하며, 이 Code 의 역할은 Flutter 내에서 실행되는 Android 와 관련된 Code 들의 Version 을 조절해주는 역할을 합니다.

Wear OS 에서 실행이 가능한 Android (Kotlin) Version 은 1.6.10 까지 Cover 해줍니다. 또한 dependencies 의 android build gradle 의 version 또한 7.1.2 로 설정해주는 것이 좋습니다.

그 다음, android > app > build.gradle File 을 수정해보겠습니다.

defaultConfig {
    // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).              applicationId "com.example.flutter_second_wearos_app"
    // You can update the following values to match your application needs.
    // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
    minSdkVersion 23
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

Wear OS 가 인식할 수 있는 최소한의 SDK Version 은 23 입니다. 그러므로, minSdkVersion 을 23 으로 설정해줍니다.

이제 한 번 실행해보도록 하겠습니다.

이제 간신히 Error 의 늪을 탈출하였는데, 또 다른 Error 가 발생했습니다.

괜찮습니다. 기존 Error 가 아닌 새로운 Error 가 발생했다는 뜻은 좋은 징조를 의미합니다. 아마도 그럴 겁니다.

이 Error 를 해결하는 방법은 그렇게 어렵지 않습니다.

1. main() 함수 존재 여부

2. Emulator 상에 이미 만들어진 App 삭제

Unknown or invalid session 1 은 main() 함수를 빼먹고 적었거나 그럴 때 발생할 수 있는 문제이므로, main 함수를 적어두고, 2번 방법 해결을 해보도록 하겠습니다.

Emulator 에서 1번 버튼을 클릭합니다.

그 다음, Settings 을 선택합니다.

가운데 Wheel Scroller 를 통해 아래로 내린 후, Apps & notifications 라는 Menu 가 있는데, 이 Menu 를 클릭합니다.

똑같이 Wheel Scroller 를 아래로 내린 후, App info 를 클릭합니다.

여기서 방금 작업했던 App 의 이름을 찾은 다음, Click 합니다.

그리고 Uninstall Button 을 Click 합니다.

그리고 여기서 Check Button 을 그대로 Click 합니다.

그리고 다시 실행합니다.

그럼 다음과 같이 잘 실행되는 것을 보실 수 있습니다.

이상 WearOS 공부기록 Series 03 을 여기서 마치도록 하겠습니다.

감사합니다~!!