[Flutter] home_widget 구현

Widget

홈 위젯(Home Widget)은 스마트폰이나 태블릿의 홈 화면에 배치할 수 있는 작은 응용 프로그램 또는 UI 구성 요소이다.

사용자가 앱을 직접 열지 않아도 실시간 정보나 간단한 기능을 빠르게 확인하고 사용할 수 있도록 도와준다.

위젯은 보통 다양한 크기와 형태로 제공되며, 유저 인터페이스를 통해 사용자가 쉽게 상호작용할 수 있는 방식으로 디자인된다.

Android

IOS

 

 

https://pub.dev/packages/home_widget

home_widget | Flutter package

 

1. 패키지설치

$ flutter pub add home_widget

 

2. pubspec.yaml 확인 : 패키지설치가 정상적이라면, 아래 라인이 추가될것이다.

dependencies: home_widget: ^0.7.0

 

3. 사용법 (import문)

import 'package:home_widget/home_widget.dart';

 

4. 코드 작업 ( 문서의 예제)

import 'dart:async';
import 'dart:io';
import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:home_widget/home_widget.dart';
import 'package:workmanager/workmanager.dart';

/// Used for Background Updates using Workmanager Plugin
@pragma("vm:entry-point")
void callbackDispatcher() async {
  Workmanager().executeTask((taskName, inputData) {
    final now = DateTime.now();
    return Future.wait<bool?>([
      HomeWidget.saveWidgetData(
        'title',
        'Updated from Background',
      ),
      HomeWidget.saveWidgetData(
        'message',
        '${now.hour.toString().padLeft(2, '0')}:${now.minute.toString().padLeft(2, '0')}',
      ),
    ]).then((value) async {
      Future.wait<bool?>([
        HomeWidget.updateWidget(
          name: 'HomeWidgetExampleProvider',
          iOSName: 'HomeWidgetExample',
        ),
        if (Platform.isAndroid)
          HomeWidget.updateWidget(
            qualifiedAndroidName:
            'es.antonborri.home_widget_example.glance.HomeWidgetReceiver',
          ),
      ]);
      return !value.contains(false);
    });
  });
}

/// Called when Doing Background Work initiated from Widget
@pragma("vm:entry-point")
Future<void> interactiveCallback(Uri? data) async {
  if (data?.host == 'titleclicked') {
    final greetings = [
      'Hello',
      'Hallo',
      'Bonjour',
      'Hola',
      'Ciao',
      '哈洛',
      '안녕하세요',
      'xin chào',
    ];
    final selectedGreeting = greetings[Random().nextInt(greetings.length)];
    await HomeWidget.setAppGroupId('YOUR_GROUP_ID');
    await HomeWidget.saveWidgetData<String>('title', selectedGreeting);
    await HomeWidget.updateWidget(
      name: 'HomeWidgetExampleProvider',
      iOSName: 'HomeWidgetExample',
    );
    if (Platform.isAndroid) {
      await HomeWidget.updateWidget(
        qualifiedAndroidName:
        'es.antonborri.home_widget_example.glance.HomeWidgetReceiver',
      );
    }
  }
}

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Workmanager().initialize(callbackDispatcher, isInDebugMode: kDebugMode);
  runApp(const MaterialApp(home: MyApp()));
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _titleController = TextEditingController();
  final TextEditingController _messageController = TextEditingController();

  bool _isRequestPinWidgetSupported = false;

  @override
  void initState() {
    super.initState();
    HomeWidget.setAppGroupId('YOUR_GROUP_ID');
    HomeWidget.registerInteractivityCallback(interactiveCallback);
    _checkPinability();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _checkForWidgetLaunch();
    HomeWidget.widgetClicked.listen(_launchedFromWidget);
  }

  @override
  void dispose() {
    _titleController.dispose();
    _messageController.dispose();
    super.dispose();
  }

  Future _sendData() async {
    try {
      return Future.wait([
        HomeWidget.saveWidgetData<String>('title', _titleController.text),
        HomeWidget.saveWidgetData<String>('message', _messageController.text),
        HomeWidget.renderFlutterWidget(
          const Icon(
            Icons.flutter_dash,
            size: 200,
          ),
          logicalSize: const Size(200, 200),
          key: 'dashIcon',
        ),
      ]);
    } on PlatformException catch (exception) {
      debugPrint('Error Sending Data. $exception');
    }
  }

  Future _updateWidget() async {
    try {
      return Future.wait([
        HomeWidget.updateWidget(
          name: 'HomeWidgetExampleProvider',
          iOSName: 'HomeWidgetExample',
        ),
        if (Platform.isAndroid)
          HomeWidget.updateWidget(
            qualifiedAndroidName:
            'es.antonborri.home_widget_example.glance.HomeWidgetReceiver',
          ),
      ]);
    } on PlatformException catch (exception) {
      debugPrint('Error Updating Widget. $exception');
    }
  }

  Future _loadData() async {
    try {
      return Future.wait([
        HomeWidget.getWidgetData<String>('title', defaultValue: 'Default Title')
            .then((value) => _titleController.text = value ?? ''),
        HomeWidget.getWidgetData<String>(
          'message',
          defaultValue: 'Default Message',
        ).then((value) => _messageController.text = value ?? ''),
      ]);
    } on PlatformException catch (exception) {
      debugPrint('Error Getting Data. $exception');
    }
  }

  Future<void> _sendAndUpdate() async {
    await _sendData();
    await _updateWidget();
  }

  void _checkForWidgetLaunch() {
    HomeWidget.initiallyLaunchedFromHomeWidget().then(_launchedFromWidget);
  }

  void _launchedFromWidget(Uri? uri) {
    if (uri != null) {
      showDialog(
        context: context,
        builder: (buildContext) => AlertDialog(
          title: const Text('App started from HomeScreenWidget'),
          content: Text('Here is the URI: $uri'),
        ),
      );
    }
  }

  void _startBackgroundUpdate() {
    Workmanager().registerPeriodicTask(
      '1',
      'widgetBackgroundUpdate',
      frequency: const Duration(minutes: 15),
    );
  }

  void _stopBackgroundUpdate() {
    Workmanager().cancelByUniqueName('1');
  }

  Future<void> _getInstalledWidgets() async {
    try {
      final widgets = await HomeWidget.getInstalledWidgets();
      if (!mounted) return;

      String getText(HomeWidgetInfo widget) {
        if (Platform.isIOS) {
          return 'iOS Family: ${widget.iOSFamily}, iOS Kind: ${widget.iOSKind}';
        } else {
          return 'Android Widget id: ${widget.androidWidgetId}, '
              'Android Class Name: ${widget.androidClassName}, '
              'Android Label: ${widget.androidLabel}';
        }
      }

      await showDialog(
        context: context,
        builder: (buildContext) => AlertDialog(
          title: const Text('Installed Widgets'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Number of widgets: ${widgets.length}'),
              const Divider(),
              for (final widget in widgets)
                Text(
                  getText(widget),
                ),
            ],
          ),
        ),
      );
    } on PlatformException catch (exception) {
      debugPrint('Error getting widget information. $exception');
    }
  }

  Future<void> _checkPinability() async {
    final isRequestPinWidgetSupported =
    await HomeWidget.isRequestPinWidgetSupported();
    if (mounted) {
      setState(() {
        _isRequestPinWidgetSupported = isRequestPinWidgetSupported ?? false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeWidget Example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: const InputDecoration(
                  hintText: 'Title',
                ),
                controller: _titleController,
              ),
              TextField(
                decoration: const InputDecoration(
                  hintText: 'Body',
                ),
                controller: _messageController,
              ),
              ElevatedButton(
                onPressed: _sendAndUpdate,
                child: const Text('Send Data to Widget'),
              ),
              ElevatedButton(
                onPressed: _loadData,
                child: const Text('Load Data'),
              ),
              ElevatedButton(
                onPressed: _checkForWidgetLaunch,
                child: const Text('Check For Widget Launch'),
              ),
              if (Platform.isAndroid)
                ElevatedButton(
                  onPressed: _startBackgroundUpdate,
                  child: const Text('Update in background'),
                ),
              if (Platform.isAndroid)
                ElevatedButton(
                  onPressed: _stopBackgroundUpdate,
                  child: const Text('Stop updating in background'),
                ),
              ElevatedButton(
                onPressed: _getInstalledWidgets,
                child: const Text('Get Installed Widgets'),
              ),
              if (_isRequestPinWidgetSupported)
                ElevatedButton(
                  onPressed: () => HomeWidget.requestPinWidget(
                    qualifiedAndroidName:
                    'es.antonborri.home_widget_example.glance.HomeWidgetReceiver',
                  ),
                  child: const Text('Pin Widget'),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

Workmanager().initialize(callbackDispatcher, isInDebugMode: kDebugMode);

callbackDispatcher는 최상위에 선언된 함수이다.

 

HomeWidget.setAppGroupId('YOUR_GROUP_ID');

AppGroupId는 Android, IOS설정과 동일하게 사용해야한다.

 

Flutter에서 홈위젯을 그리는것은 불가능하므로 아래 문서에 따라서 Android, IOS 처리를 별로도 진행한다.

https://docs.page/abausg/home_widget

home_widget Docs

 

 

데이터이동은 로컬스토리지를 통한이동이다.

dart코드로 setData를하며, 네이티브코드로 getData및 화면업데이트를 하는셈이다.

 

데이터 저장

HomeWidget.saveWidgetData<String>('id', data);

 

위젯 업데이트

HomeWidget.updateWidget( name: 'HomeWidgetExampleProvider', );

 

백그라운드에서 처리방식은 Android, IOS에 차이가 좀 컸다. (WorkManager 설정이 정상적이라는 가정하에)

 

IOS는 아래 코드로 백그라운드 작업을 생성한다.

Workmanager().registerOneOffTask

 

Android는 아래 코드로 백그라운드 작업을 생성한다. 취소 코드도 별도로 존재한다.

void _startBackgroundUpdate() { Workmanager().registerPeriodicTask( '1', 'widgetBackgroundUpdate', frequency: const Duration(minutes: 15), ); }

 

 

이것까지하면 Flutter에서는 원하는대로 커스텀해서 사용이 가능하다.

이제 데이터를 받아서 위젯을 업데이트하는것은 각각 kotlin, swift의 몫이다.

kotlin은 xml, compose를 사용가능하며, swift는 swift UI만 사용이 가능하다.