Flutter穿戴设备支持插件wear的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter Wear Plugin

Flutter Wear Plugin 提供了对 Google 的 Wear OS(Android Wear)的支持。使用这个插件时,必须将 minSdkVersion 设置为 23

教程

您可以参考以下教程来构建 Wear OS 应用:

Widgets

该插件目前提供了三个主要的 Widgets:

  • WatchShape: 用于确定手表是方形还是圆形。
  • AmbientMode: 一个 builder,提供手表当前的模式,并在模式变化时重建 widget。

示例

通常情况下,这三个 widgets 都会在应用的 widget 树根部使用。以下是一个完整的示例 demo:

import 'package:flutter/material.dart';
import 'package:wear/wear.dart';

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

class MyApp extends StatelessWidget {
  @Override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: WatchScreen(),
        ),
      ),
    );
  }
}

class WatchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WatchShape(
      builder: (BuildContext context, WearShape shape, Widget? child) {
        return AmbientMode(
          builder: (context, mode, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Shape: ${shape == WearShape.round ? 'round' : 'square'}',
                ),
                Text(
                  'Mode: ${mode == WearMode.active ? 'Active' : 'Ambient'}',
                ),
                mode == WearMode.active ? ActiveWatchFace() : AmbientWatchFace(),
              ],
            );
          },
        );
      },
    );
  }
}

class ActiveWatchFace extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Active Mode',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

class AmbientWatchFace extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Center(
        child: Text(
          'Ambient Mode',
          style: TextStyle(color: Colors.grey),
        ),
      ),
    );
  }
}

旧要求

您不再需要修改以下文件:

  1. build.gradle: 不再需要手动添加可穿戴设备依赖项。
  2. AndroidManifest.xml: 插件会自动添加所有必需的引用和设置,如 WAKE_LOCKandroid.hardware.type.watch
  3. MainActivity.ktMainActivity.java: 不再需要手动处理 AmbientMode 引用。

通过上述示例和说明,您可以轻松地在 Flutter 中集成 Wear OS 支持,并根据手表的形状和模式动态调整界面。希望这些信息对您有所帮助!


更多关于Flutter穿戴设备支持插件wear的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter穿戴设备支持插件wear的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter中使用wear插件来支持穿戴设备的代码案例。这个案例展示了如何创建一个简单的Flutter应用,该应用能够在手机和穿戴设备之间发送和接收消息。

首先,确保你已经安装了Flutter和Dart的开发环境,并且已经配置好了Android Studio或Visual Studio Code等IDE。

1. 创建Flutter项目

打开你的命令行工具,并运行以下命令来创建一个新的Flutter项目:

flutter create flutter_wear_example
cd flutter_wear_example

2. 添加wear插件依赖

pubspec.yaml文件中,添加对wear插件的依赖。注意,wear插件通常指的是与穿戴设备交互的相关功能,可能不需要一个特定的wear插件包,而是依赖于其他插件如flutter_local_notifications或者connectivity_plus等来实现特定功能。这里我们假设你需要使用flutter_local_notifications来在穿戴设备上显示通知。

dependencies:
  flutter:
    sdk: flutter
  flutter_local_notifications: ^9.0.0  # 确保版本是最新的

然后运行flutter pub get来安装依赖。

3. 配置Android项目

确保你的AndroidManifest.xml文件中包含了必要的权限和服务声明。例如,为了显示通知,你可能需要以下配置:

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

<application
    ... >
    <service
        android:name=".MyFirebaseMessagingService"
        android:exported="true">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
    
    <!-- 其他必要的服务和接收器 -->
    ...
</application>

4. 编写Flutter代码

lib目录下创建一个新的Dart文件,例如notification_handler.dart,来处理通知逻辑:

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

class NotificationHandler {
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  NotificationHandler(this.flutterLocalNotificationsPlugin);

  Future initialize() async {
    var initializationSettingsAndroid = AndroidInitializationSettings('@mipmap/ic_launcher');
    var initializationSettingsIOS = IOSInitializationSettings(requestAlertPermission: true, requestBadgePermission: true, requestSoundPermission: true);
    var initializationSettings = InitializationSettings(android: initializationSettingsAndroid, iOS: initializationSettingsIOS);

    await flutterLocalNotificationsPlugin.initialize(initializationSettings, onSelectNotification: onSelectNotification);
  }

  Future onSelectNotification(String payload) async {
    // Handle the notification payload
    showDialog(context: _findTopMostStateContext(), message: payload);
  }

  Future showDialog(BuildContext context, {String message}) async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('New Notification'),
          content: SingleChildScrollView(
            child: Text(message ?? ''),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  BuildContext? _findTopMostStateContext() {
    return MaterialApp.navigatorKey.currentState?.overlay?.context;
  }
}

然后在你的main.dart文件中使用NotificationHandler来发送和接收通知:

import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'notification_handler.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var initializationSettingsAndroid = AndroidInitializationSettings('@mipmap/ic_launcher');
    var initializationSettingsIOS = IOSInitializationSettings();
    var initializationSettings = InitializationSettings(android: initializationSettingsAndroid, iOS: initializationSettingsIOS);
    final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    flutterLocalNotificationsPlugin.initialize(initializationSettings);

    var notificationHandler = NotificationHandler(flutterLocalNotificationsPlugin);
    notificationHandler.initialize();

    return MaterialApp(
      title: 'Flutter Wear Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

  void _showNotification() {
    var androidPlatformChannelSpecifics = AndroidNotificationDetails(
      'your channel id',
      'your channel name',
      'your channel description',
      importance: Importance.Max,
      priority: Priority.High,
    );
    var iOSPlatformChannelSpecifics = IOSNotificationDetails();
    var platformChannelSpecifics = NotificationDetails(android: androidPlatformChannelSpecifics, iOS: iOSPlatformChannelSpecifics);
    flutterLocalNotificationsPlugin.show(
      0,
      'Hello, Wear!',
      'This is a notification from Flutter!',
      platformChannelSpecifics,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Wear Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showNotification,
          child: Text('Show Notification'),
        ),
      ),
    );
  }
}

5. 运行应用

确保你的手机和穿戴设备都已连接,并且穿戴设备上的开发者选项已启用。然后运行以下命令来启动应用:

flutter run

这个简单的示例展示了如何在Flutter应用中初始化通知插件,并发送一个通知到连接的穿戴设备。你可以根据需要扩展这个示例,添加更多与穿戴设备交互的功能。

回到顶部