더 많은
Flutter에서 HomeWidget 및 Back4App으로 홈 화면 위젯 만들기 방법

30min
소개
홈 화면 위젯을 사용하면 사용자가 앱을 열지 않고도 장치의 홈 화면에서 앱의 실시간 정보에 직접 접근할 수 있습니다. Flutter를 사용하여 이러한 위젯을 만들려면 일부 플랫폼별 코드가 필요합니다. 그러나 home_widget 패키지가 이 격차를 해소하여 Dart 코드를 사용하여 Flutter 앱과 홈 화면 위젯 간의 데이터 교환을 가능하게 합니다.
이 튜토리얼에서는 home_widget 패키지를 사용하여 Flutter에서 홈 화면 위젯을 만드는 방법과 이를 Parse Server 기반의 백엔드 서비스인 Back4App과 통합하는 방법을 배웁니다. 이 튜토리얼이 끝나면 Back4App의 데이터를 홈 화면 위젯에 표시하는 Flutter 앱을 갖게 될 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Flutter SDK가 당신의 컴퓨터에 설치되어 있습니다. 공식 Flutter 설치 가이드를 따라 운영 체제에 맞게 설치하세요.
Flutter와 Dart에 대한 기본 지식. Flutter가 처음이라면 Flutter 문서를 검토하여 기본 사항에 익숙해지세요.
IDE 또는 텍스트 편집기(예: Visual Studio Code 또는 Android Studio).
 Back4App 계정. Back4App에서 무료 계정을 등록하세요.
Flutter용 Parse Server SDK가 프로젝트에 추가되어야 합니다. Back4App Flutter SDK 가이드를 따라 설정 방법을 배울 수 있습니다.
플랫폼별 설정이 Android 및 iOS 홈 화면 위젯에 필요합니다.
1단계 – Flutter 프로젝트 설정
1.1. 새 Flutter 프로젝트 만들기
터미널을 열고 다음을 실행하세요:
Bash
flutter create home_widget_app
flutter create home_widget_app
﻿
프로젝트 디렉토리로 이동:
Bash
cd home_widget_app
cd home_widget_app
﻿
1.2. 의존성 추가
열기 pubspec.yaml 및 다음 의존성을 추가:
YAML
dependencies:
  flutter:
    sdk: flutter
  home_widget: ^0.2.4
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  home_widget: ^0.2.4
  parse_server_sdk_flutter: ^4.0.1
﻿
다음 명령어를 실행하여 flutter pub get 패키지를 설치합니다.
2단계 – Back4App 설정
2.1. 새로운 Back4App 애플리케이션 만들기
당신의 Back4App 대시보드에 로그인합니다.
"새 앱 만들기"를 클릭합니다.
애플리케이션 이름을 입력합니다. 예: "HomeWidgetApp", 그리고 "생성"을 클릭합니다.
2.2. 데이터 모델 설정
애플리케이션 대시보드에서 "Database" 섹션으로 이동합니다.
 "Create a class"를 클릭합니다.
모달에서:
 "Custom"을 선택합니다.
클래스 이름으로 "Message"을 입력합니다.
 "Create class"를 클릭합니다.
2.3. 클래스에 열 추가하기
 "Message" 클래스에서 "+"를 클릭하여 새 열을 추가합니다.
다음 열을 추가합니다:
title: 유형 String
content: 유형 String
 "Message" 클래스에 샘플 데이터를 추가합니다. 예를 들어:
2.4. 애플리케이션 자격 증명 얻기
 App Settings > Security & Keys로 이동합니다.
 Application ID와 Client Key를 기록해 둡니다.
3단계 – Flutter 앱에서 Parse 초기화하기
열기 lib/main.dart 그리고 다음과 같이 수정하세요:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}
﻿
다음으로 교체하세요 'YOUR_APPLICATION_ID' 및 'YOUR_CLIENT_KEY'를 실제 Back4App 자격 증명으로.
4단계 – Back4App에서 데이터 가져오기
새 파일 만들기 lib/home_page.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Message {
  final String title;
  final String content;

  Message(this.title, this.content);
}

class _HomePageState extends State<HomePage> {
  Message? message;

  @override
  void initState() {
    super.initState();
    fetchMessage();
  }

  Future<void> fetchMessage() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Message'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      final data = apiResponse.results!.first;
      final title = data.get<String>('title') ?? '';
      final content = data.get<String>('content') ?? '';
      setState(() {
        message = Message(title, content);
      });
      updateHomeWidget(title, content);
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  Future<void> updateHomeWidget(String title, String content) async {
    await HomeWidget.saveWidgetData<String>('title', title);
    await HomeWidget.saveWidgetData<String>('content', content);
    await HomeWidget.updateWidget(
        name: 'HomeWidgetProvider', // Name of your HomeWidgetProvider
        iOSName: 'HomeWidget');     // Used in iOS
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Widget App'),
      ),
      body: Center(
        child: message == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    message!.title,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 10),
                  Text(
                    message!.content,
                    style: TextStyle(fontSize: 18),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: fetchMessage,
                    child: Text('Refresh Message'),
                  ),
                ],
              ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Message {
  final String title;
  final String content;

  Message(this.title, this.content);
}

class _HomePageState extends State<HomePage> {
  Message? message;

  @override
  void initState() {
    super.initState();
    fetchMessage();
  }

  Future<void> fetchMessage() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Message'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      final data = apiResponse.results!.first;
      final title = data.get<String>('title') ?? '';
      final content = data.get<String>('content') ?? '';
      setState(() {
        message = Message(title, content);
      });
      updateHomeWidget(title, content);
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  Future<void> updateHomeWidget(String title, String content) async {
    await HomeWidget.saveWidgetData<String>('title', title);
    await HomeWidget.saveWidgetData<String>('content', content);
    await HomeWidget.updateWidget(
        name: 'HomeWidgetProvider', // Name of your HomeWidgetProvider
        iOSName: 'HomeWidget');     // Used in iOS
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Widget App'),
      ),
      body: Center(
        child: message == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    message!.title,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 10),
                  Text(
                    message!.content,
                    style: TextStyle(fontSize: 18),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: fetchMessage,
                    child: Text('Refresh Message'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
설명
메시지 클래스: 메시지 데이터를 보유하기 위한 간단한 모델 클래스입니다.
fetchMessage(): Back4App의 메시지 클래스에서 데이터를 가져오고 message 변수를 업데이트합니다.
updateHomeWidget(): 가져온 데이터를 홈 화면 위젯에 저장하고 HomeWidget.saveWidgetData를 사용하여 업데이트를 트리거합니다.HomeWidget.updateWidget.
build(): 메시지 데이터를 표시하고 메시지를 새로 고치는 버튼을 제공합니다.
단계 5 – 홈 화면 위젯 설정
5.1. 안드로이드 설정
5.1.1. 위젯 레이아웃 만들기
새 XML 레이아웃 파일을 android/app/src/main/res/layout/에 생성하고 home_widget.xml:
XML
<!-- android/app/src/main/res/layout/home_widget.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/widget_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal|top"
        android:paddingTop="16dp"/>

    <TextView
        android:id="@+id/widget_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content"
        android:textSize="14sp"
        android:layout_gravity="center"
        android:paddingTop="8dp"/>

</FrameLayout>
<!-- android/app/src/main/res/layout/home_widget.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/widget_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal|top"
        android:paddingTop="16dp"/>

    <TextView
        android:id="@+id/widget_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content"
        android:textSize="14sp"
        android:layout_gravity="center"
        android:paddingTop="8dp"/>

</FrameLayout>
﻿
5.1.2. 위젯 제공자 만들기
새로운 Java 클래스를 생성합니다 android/app/src/main/java/your/package/name/ 이름은 HomeWidgetProvider.java:
Java
// android/app/src/main/java/your/package/name/HomeWidgetProvider.java
package your.package.name;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;

public class HomeWidgetProvider extends AppWidgetProvider {
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // The HomeWidget package handles the update
    }
}
// android/app/src/main/java/your/package/name/HomeWidgetProvider.java
package your.package.name;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;

public class HomeWidgetProvider extends AppWidgetProvider {
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // The HomeWidget package handles the update
    }
}
﻿
다음으로 교체합니다 your.package.name 실제 패키지 이름으로.
5.1.3. Android 매니페스트 업데이트
위젯 제공자를 추가합니다 AndroidManifest.xml:
XML
<!-- Add inside the <application> tag -->
<receiver android:name=".HomeWidgetProvider">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
    </intent-filter>

    <meta-data android:name="android.appwidget.provider"
        android:resource="@xml/home_widget_info"/>
</receiver>
<!-- Add inside the <application> tag -->
<receiver android:name=".HomeWidgetProvider">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
    </intent-filter>

    <meta-data android:name="android.appwidget.provider"
        android:resource="@xml/home_widget_info"/>
</receiver>
﻿
5.1.4. 위젯 정보 XML 생성
새로운 XML 파일을 생성합니다 android/app/src/main/res/xml/ 이름은 home_widget_info.xml:
XML
<!-- android/app/src/main/res/xml/home_widget_info.xml -->
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/home_widget"
    android:minWidth="180dp"
    android:minHeight="110dp"
    android:updatePeriodMillis="0"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>
<!-- android/app/src/main/res/xml/home_widget_info.xml -->
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/home_widget"
    android:minWidth="180dp"
    android:minHeight="110dp"
    android:updatePeriodMillis="0"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>
﻿
5.2. iOS 설정
5.2.1. 위젯 확장 만들기
Xcode에서 Flutter 프로젝트를 열려면 ios/Runner.xcworkspace를 엽니다.
클릭 파일 > 새로 만들기 > 타겟.
선택 위젯 확장을 클릭하고 다음을 클릭합니다.
제품 이름으로 HomeWidget을 입력하고 구성 의도 포함이 선택 해제되어 있는지 확인합니다.
클릭 완료하고 활성화합니다.
5.2.2. 위젯 코드 업데이트
HomeWidget 확장 프로그램에서 HomeWidget.swift를 열고 수정합니다:
Swift
import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), title: "Title", content: "Content")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), title: "Title", content: "Content")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        let sharedDefaults = UserDefaults(suiteName: "YOUR_GROUP_ID")
        let title = sharedDefaults?.string(forKey: "title") ?? "Title"
        let content = sharedDefaults?.string(forKey: "content") ?? "Content"

        let entryDate = Date()
        let entry = SimpleEntry(date: entryDate, title: title, content: content)
        entries.append(entry)

        let timeline = Timeline(entries: entries, policy: .never)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let title: String
    let content: String
}

struct HomeWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text(entry.title)
                .font(.headline)
            Text(entry.content)
                .font(.body)
        }
    }
}

@main
struct HomeWidget: Widget {
    let kind: String = "HomeWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            HomeWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Home Widget")
        .description("This is a home screen widget.")
    }
}
import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), title: "Title", content: "Content")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), title: "Title", content: "Content")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        let sharedDefaults = UserDefaults(suiteName: "YOUR_GROUP_ID")
        let title = sharedDefaults?.string(forKey: "title") ?? "Title"
        let content = sharedDefaults?.string(forKey: "content") ?? "Content"

        let entryDate = Date()
        let entry = SimpleEntry(date: entryDate, title: title, content: content)
        entries.append(entry)

        let timeline = Timeline(entries: entries, policy: .never)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let title: String
    let content: String
}

struct HomeWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text(entry.title)
                .font(.headline)
            Text(entry.content)
                .font(.body)
        }
    }
}

@main
struct HomeWidget: Widget {
    let kind: String = "HomeWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            HomeWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Home Widget")
        .description("This is a home screen widget.")
    }
}
﻿
"YOUR_GROUP_ID"를 YOUR_GROUP_ID로 바꾸세요 (예: group.com.example.homeWidgetApp).
5.2.3. 앱 그룹 설정하기
Xcode에서 프로젝트를 선택하고 Signing & Capabilities로 이동하세요.
주 앱 타겟과 위젯 확장 모두에 "App Groups"를 추가하세요.
새로운 앱 그룹을 생성하세요 (예: group.com.example.homeWidgetApp).
두 타겟 모두 동일한 앱 그룹이 활성화되어 있는지 확인하세요.
5.3. 플랫폼별 구성을 위한 Flutter 코드 업데이트
당신의 updateHomeWidget() 메서드에서 home_page.dart, 위젯 이름을 업데이트하세요:
Dart
await HomeWidget.updateWidget(
    name: 'HomeWidgetProvider', // For Android, the class name of your AppWidgetProvider
    iOSName: 'HomeWidget',      // For iOS, the name of your Widget Extension
);
await HomeWidget.updateWidget(
    name: 'HomeWidgetProvider', // For Android, the class name of your AppWidgetProvider
    iOSName: 'HomeWidget',      // For iOS, the name of your Widget Extension
);
﻿
6단계 – 앱 실행 및 위젯 테스트
6.1. 앱 실행
터미널에서 다음을 실행하세요:
Bash
flutter run
flutter run
﻿
6.2. 홈 화면에 위젯 추가
안드로이드
홈 화면을 길게 눌러 "위젯"을 선택하세요.
위젯 목록에서 앱을 찾으세요.
위젯을 홈 화면으로 드래그 앤 드롭하세요.
iOS
홈 화면을 길게 눌러 진동 모드로 들어가세요.
왼쪽 상단의 "+" 버튼을 누르세요.
이름으로 위젯을 검색하세요.
위젯을 홈 화면에 추가하세요.
6.3. 테스트 데이터 업데이트
앱에서 "메시지 새로 고침" 버튼을 눌러 Back4App에서 새로운 데이터를 가져옵니다.
홈 화면의 위젯이 새로운 데이터로 업데이트되어야 합니다.
결론
이 튜토리얼에서는 home_widget 패키지를 사용하여 Flutter에서 홈 화면 위젯을 만드는 방법과 Back4App과 통합하여 동적 데이터를 표시하는 방법을 배웠습니다. 이를 통해 사용자는 홈 화면에서 최신 정보를 제공받아 참여도와 사용자 경험을 향상시킬 수 있습니다.
다음 단계
동적 데이터: Back4App의 실시간 쿼리를 사용하여 실시간 데이터 업데이트를 구현합니다.
상호작용성: 위젯에 클릭 동작을 추가하여 앱의 특정 페이지를 엽니다.
사용자 정의: 위젯을 앱의 테마와 디자인에 맞게 스타일링합니다.
추가 리소스
﻿Back4App 문서﻿
﻿pub.dev의 home_widget 패키지﻿
﻿Flutter 가이드용 Parse SDK﻿
﻿Flutter 공식 문서﻿
행복한 코딩!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter에서 Back4App의 Parse를 사용한 타사 인증 완벽 가이드
Flutter에서 CallbackShortcuts와 Back4App을 사용하여 키보드 단축키를 구현하는 방법