अपने Flutter ऐप्लिकेशन में होम स्क्रीन विजेट जोड़ना

1. परिचय

विजेट क्या होता है?

Flutter डेवलपर के लिए विजेट का मतलब यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट से है, जिन्हें Flutter फ़्रेमवर्क का इस्तेमाल करके बनाया गया है. इस कोडलैब के हिसाब से, विजेट का मतलब होता है ऐप्लिकेशन का छोटा वर्शन. यह वर्शन, ऐप्लिकेशन बिना खोले ऐप्लिकेशन की जानकारी दिखाता है. Android पर, विजेट होम स्क्रीन पर होते हैं. iOS पर, उन्हें होम स्क्रीन, लॉक स्क्रीन या 'आज के व्यू' में जोड़ा जा सकता है.

कोई विजेट कितना मुश्किल हो सकता है?

होम स्क्रीन के ज़्यादातर विजेट सामान्य होते हैं. इनमें सामान्य टेक्स्ट, सामान्य ग्राफ़िक या Android पर बेसिक कंट्रोल शामिल हो सकते हैं. Android और iOS, दोनों ही यह तय करते हैं कि आपके पास किन यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट और सुविधाएं हैं.

विजेट के लिए यूज़र इंटरफ़ेस (यूआई) बनाना

यूज़र इंटरफ़ेस (यूआई) की इन सीमाओं की वजह से, Flutter फ़्रेमवर्क का इस्तेमाल करके सीधे होम स्क्रीन विजेट का यूज़र इंटरफ़ेस (यूआई) नहीं बनाया जा सकता. इसके बजाय, आपके पास अपने Flutter ऐप्लिकेशन में Jetpack Compose या SwiftUI जैसे प्लैटफ़ॉर्म फ़्रेमवर्क के साथ बनाए गए विजेट जोड़ने का विकल्प है. यह कोडलैब आपके ऐप्लिकेशन और विजेट के बीच संसाधन शेयर करने के उदाहरणों पर चर्चा करता है, ताकि जटिल यूज़र इंटरफ़ेस (यूआई) को फिर से न लिखा जा सके.

आपको क्या बनाना होगा

इस कोडलैब में, Android और iOS, दोनों पर होम स्क्रीन के विजेट बनाए जा सकते हैं. इससे आपको आसानी से Flutter ऐप्लिकेशन बनाने के लिए इस्तेमाल किया जा सकता है. इसके लिए Home_widget पैकेज का इस्तेमाल करना होगा, ताकि लोग लेख पढ़ सकें. आपके विजेट:

• अपने Flutter ऐप्लिकेशन से डेटा दिखाएं.
• Flutter ऐप्लिकेशन से शेयर किए गए फ़ॉन्ट एसेट का इस्तेमाल करके टेक्स्ट दिखाएं.
• रेंडर किए गए Flutter विजेट की इमेज दिखाएं.

इस Flutter ऐप्लिकेशन में दो स्क्रीन (या रूट) शामिल हैं:

• पहले नतीजे में, हेडलाइन और जानकारी के साथ समाचार लेखों की सूची दिखती है.
• दूसरा पेज, पूरा लेख दिखाता है. इसमें CustomPaint का इस्तेमाल करके बनाए गए चार्ट का इस्तेमाल किया जाता है.

.

आपको इनके बारे में जानकारी मिलेगी

• iOS और Android पर होम स्क्रीन विजेट बनाने का तरीका.
• अपने होम स्क्रीन विजेट और Flutter ऐप्लिकेशन के बीच डेटा शेयर करने के लिए, home_widget पैकेज इस्तेमाल करने का तरीका.
• दोबारा लिखे जाने वाले कोड को कम करने का तरीका.
• Flutter ऐप्लिकेशन से होम स्क्रीन के विजेट को अपडेट करने का तरीका.

ध्यान दें: यह कोडलैब, होम स्क्रीन के विजेट बनाने पर फ़ोकस करता है. यह Flutter ऐप्लिकेशन कोड पर चमकता है. Flutter का इस्तेमाल शुरू करने के बारे में ज़्यादा जानने के लिए, कोडलैब का आपका पहला Flutter ऐप्लिकेशन देखें.

2. अपना डेवलपमेंट एनवायरमेंट सेट अप करें

दोनों प्लैटफ़ॉर्म के लिए, आपके पास Flutter का SDK टूल और एक IDE होना चाहिए. Flutter के साथ काम करने के लिए, अपने पसंदीदा IDE का इस्तेमाल किया जा सकता है. यह Dart Code और Flutter एक्सटेंशन वाला विज़ुअल स्टूडियो कोड हो सकता है. इसके अलावा, यह Android Studio या IntelliJ हो सकता है, जिसमें Flutter और Dart प्लगिन इंस्टॉल किया गया हो.

iOS की होम स्क्रीन का विजेट बनाने के लिए:

• इस कोडलैब को किसी iOS डिवाइस या iOS सिम्युलेटर पर चलाया जा सकता है.
• आपको macOS सिस्टम को Xcode IDE के साथ कॉन्फ़िगर करना होगा. इससे आपके ऐप्लिकेशन का iOS वर्शन बनाने के लिए ज़रूरी कंपाइलर इंस्टॉल हो जाता है.

Android होम स्क्रीन का विजेट बनाने के लिए:

• इस कोडलैब को किसी Android डिवाइस या Android एम्युलेटर पर चलाया जा सकता है.
• आपको अपने डेवलपमेंट सिस्टम को Android Studio के साथ कॉन्फ़िगर करना होगा. इससे आपके ऐप्लिकेशन का Android वर्शन बनाने के लिए ज़रूरी कंपाइलर इंस्टॉल हो जाता है.

स्टार्टर कोड पाएं

GitHub से अपने प्रोजेक्ट का शुरुआती वर्शन डाउनलोड करें

कमांड लाइन से, GitHub रिपॉज़िटरी को एक flutter-codelabs डायरेक्ट्री में क्लोन करें:

$ git clone https://github.com/flutter/codelabs.git flutter-codelabs

रेपो को क्लोन करने के बाद, आपको flutter-codelabs/homescreen_codelab डायरेक्ट्री में इस कोडलैब का कोड मिल सकता है. इस डायरेक्ट्री में, कोडलैब के हर चरण में पूरा किया गया प्रोजेक्ट कोड शामिल होता है.

स्टार्टर ऐप्लिकेशन खोलें

अपने पसंदीदा IDE में flutter-codelabs/homescreen_codelab/step_03 डायरेक्ट्री खोलें.

पैकेज इंस्टॉल करना

प्रोजेक्ट की pubspec.yaml फ़ाइल में सभी ज़रूरी पैकेज जोड़ दिए गए थे. प्रोजेक्ट डिपेंडेंसी को फिर से पाने के लिए, नीचे दिया गया कमांड चलाएं:

$ flutter pub get

3. होम स्क्रीन पर एक सामान्य विजेट जोड़ें

सबसे पहले, नेटिव प्लैटफ़ॉर्म टूल का इस्तेमाल करके होम स्क्रीन विजेट जोड़ें.

ध्यान दें: इस कोडलैब के iOS और Android हिस्से एक और दूसरे से अलग होते हैं और डार्ट कोड से अलग होते हैं. अगर आपकी दिलचस्पी सिर्फ़ iOS में है, तो Android वर्शन को स्किप किया जा सकता है. अगर आपको सिर्फ़ iOS में दिलचस्पी है, तो Android वर्शन को स्किप किया जा सकता है.

iOS की होम स्क्रीन का सामान्य विजेट बनाना

अपने Flutter iOS ऐप्लिकेशन में ऐप्लिकेशन एक्सटेंशन जोड़ना, SwiftUI या UIKit ऐप्लिकेशन में ऐप्लिकेशन एक्सटेंशन जोड़ने जैसा ही है:

1. open ios/Runner.xcworkspace को अपनी Flutter प्रोजेक्ट डायरेक्ट्री से टर्मिनल विंडो में चलाएं. इसके अलावा, VSCode से iOS फ़ोल्डर पर राइट क्लिक करके, Xcode में खोलें को भी चुना जा सकता है. इससे आपके Flutter प्रोजेक्ट में डिफ़ॉल्ट Xcode फ़ाइल फ़ोल्डर खुल जाएगा.
2. मेन्यू से फ़ाइल → नया → टारगेट चुनें. इससे प्रोजेक्ट में एक नया टारगेट जुड़ जाता है.
3. टेंप्लेट की सूची दिखेगी. विजेट एक्सटेंशन चुनें.
4. "Newsविजेट" टाइप करें इस विजेट के लिए प्रॉडक्ट का नाम बॉक्स में डालें. लाइव गतिविधि शामिल करें और कॉन्फ़िगरेशन इंटेंट शामिल करें, दोनों चेक बॉक्स से सही का निशान हटाएं.

सैंपल कोड की जांच करना

कोई नया टारगेट जोड़ने पर, Xcode आपके चुने गए टेंप्लेट के आधार पर सैंपल कोड जनरेट करता है. जनरेट किए गए कोड और WidgetKit के बारे में ज़्यादा जानने के लिए, Apple के ऐप्लिकेशन एक्सटेंशन से जुड़े दस्तावेज़ देखें.

सैंपल विजेट को डीबग और टेस्ट करना

1. सबसे पहले, अपने Flutter ऐप्लिकेशन का कॉन्फ़िगरेशन अपडेट करें. आपको ऐसा तब करना होगा, जब आपको अपने Flutter ऐप्लिकेशन में नए पैकेज जोड़ने हों और Xcode की मदद से प्रोजेक्ट में टारगेट चलाने की योजना हो. अपने ऐप्लिकेशन के कॉन्फ़िगरेशन को अपडेट करने के लिए, अपनी Flutter ऐप्लिकेशन डायरेक्ट्री में नीचे दिया गया निर्देश चलाएं:

$ flutter build ios --config-only

2. टारगेट की सूची देखने के लिए, रनर पर क्लिक करें. उस विजेट टारगेट को चुनें जिसे आपने अभी-अभी बनाया है. इसके बाद, NewsWidgets को चुनें और Run पर क्लिक करें. iOS विजेट कोड बदलने पर, Xcode से विजेट टारगेट चलाएं.

3. सिम्युलेटर या डिवाइस की स्क्रीन पर, एक बेसिक होम स्क्रीन विजेट दिखना चाहिए. अगर आपको यह नहीं दिखता है, तो इसे स्क्रीन पर जोड़ें. होम स्क्रीन पर क्लिक करके रखें. इसके बाद, सबसे ऊपर बाएं कोने में मौजूद + पर क्लिक करें.

4. ऐप्लिकेशन का नाम खोजें. इस कोडलैब के लिए, "होमस्क्रीन विजेट" खोजें

5. होम स्क्रीन विजेट को जोड़ने के बाद, इस पर समय बताने वाला आसान टेक्स्ट दिखेगा.

ध्यान दें: Xcode 14.1 प्रॉडक्ट की जानकारी में डीबग करने वाले विजेट से जुड़ी गड़बड़ी के बारे में बताया गया है. StackOverflow में आपको डीबग करने के लिए मददगार सलाह मिल सकती है.

सामान्य Android विजेट बनाना

1. Android में होम स्क्रीन का विजेट जोड़ने के लिए, प्रोजेक्ट की बिल्ड फ़ाइल को Android Studio में खोलें. यह फ़ाइल आपको android/build.gradle पर ऐक्सेस की जा सकती है. इसके अलावा, VSCode से android फ़ोल्डर पर राइट क्लिक करके, Android Studio में खोलें को भी चुना जा सकता है.
2. प्रोजेक्ट बनने के बाद, सबसे ऊपर बाएं कोने में ऐप्लिकेशन डायरेक्ट्री पर जाएं. इस डायरेक्ट्री में नया होम स्क्रीन विजेट जोड़ें. डायरेक्ट्री पर राइट क्लिक करें, नया -> चुनें विजेट -> ऐप्लिकेशन विजेट.

3. Android Studio पर एक नया फ़ॉर्म दिख रहा है. अपने होम स्क्रीन विजेट के बारे में बुनियादी जानकारी जोड़ें. इसमें क्लास का नाम, प्लेसमेंट, साइज़, और सोर्स भाषा की जानकारी शामिल है

इस कोडलैब के लिए, ये वैल्यू सेट करें:

• NewsWidget के लिए क्लास का नाम बॉक्स
• कम से कम चौड़ाई (सेल) ड्रॉपडाउन से 3 करें
• कम से कम ऊंचाई (सेल) ड्रॉपडाउन से 3 करें

ध्यान दें: ऊंचाई और विजेट की प्रॉपर्टी से यह तय होता है कि विजेट, होमस्क्रीन पर कितनी जगह लेगा. Android इन्हें सेल में दिखाता है. एक सेल उस जगह के बराबर है जो कोई ऐप्लिकेशन आइकॉन ले सकता है. इस वैल्यू को बाद में बदला जा सकता है.

सैंपल कोड की जांच करना

फ़ॉर्म सबमिट करने के बाद, Android Studio कई फ़ाइलें बनाता है और उन्हें अपडेट करता है. इस कोडलैब के लिए काम के बदलाव नीचे दी गई टेबल में दिए गए हैं

कार्रवाई	टारगेट फ़ाइल	बदलें
अपडेट करें	AndroidManifest.xml	NewsWidget को रजिस्टर करने के लिए, एक नया रिसीवर जोड़ा जाता है.
बनाएं	res/layout/news_widget.xml	होम स्क्रीन विजेट यूज़र इंटरफ़ेस (यूआई) के बारे में बताता है.
बनाएं	res/xml/news_widget_info.xml	आपके होम स्क्रीन विजेट का कॉन्फ़िगरेशन तय करता है. इस फ़ाइल में, अपने विजेट के डाइमेंशन या नाम में बदलाव किया जा सकता है.
बनाएं	java/com/example/homescreen_widgets/NewsWidget.kt	इसमें आपके Kotlin कोड को शामिल किया जाता है, ताकि आपके होम स्क्रीन विजेट में फ़ंक्शन जोड़े जा सकें.

आपको इस पूरे कोडलैब में, इन फ़ाइलों के बारे में ज़्यादा जानकारी मिल सकती है.

सैंपल विजेट को डीबग और टेस्ट करना

अब, अपना ऐप्लिकेशन चलाएं और होम स्क्रीन विजेट देखें. ऐप्लिकेशन बनाने के बाद, अपने Android डिवाइस की ऐप्लिकेशन चुनने वाली स्क्रीन पर जाएं और इस Flutter प्रोजेक्ट के आइकॉन को दबाकर रखें. पॉप-अप मेन्यू से विजेट चुनें.

Android डिवाइस या एम्युलेटर, Android के लिए आपका डिफ़ॉल्ट होम स्क्रीन विजेट दिखाता है.

4. अपने Flutter ऐप्लिकेशन से होम स्क्रीन विजेट पर डेटा भेजें

अपने बनाए गए बेसिक होम स्क्रीन विजेट को अपनी पसंद के मुताबिक बनाया जा सकता है. किसी समाचार लेख की हेडलाइन और खास जानकारी दिखाने के लिए, होम स्क्रीन विजेट को अपडेट करें. नीचे दिया गया स्क्रीनशॉट, होम स्क्रीन विजेट का एक उदाहरण दिखाता है. इसमें हेडलाइन और खास जानकारी दिखती है.

अपने ऐप्लिकेशन और होम स्क्रीन विजेट के बीच डेटा पास करने के लिए, आपको Dart और नेटिव कोड लिखना होगा. इस सेक्शन में इस प्रोसेस को तीन हिस्सों में बांटा गया है:

1. अपने Flutter ऐप्लिकेशन में Dart कोड लिखना जिसे Android और iOS, दोनों इस्तेमाल कर सकते हैं
2. iOS के साथ काम करने वाले मूल फ़ंक्शन जोड़ना
3. Android की खास सुविधाएं जोड़ना

iOS ऐप्लिकेशन ग्रुप का इस्तेमाल करना

iOS पैरंट ऐप्लिकेशन और विजेट एक्सटेंशन के बीच डेटा शेयर करने के लिए, दोनों टारगेट एक ही ऐप्लिकेशन ग्रुप से जुड़े होने चाहिए. ऐप्लिकेशन ग्रुप के बारे में ज़्यादा जानने के लिए, Apple के ऐप्लिकेशन ग्रुप से जुड़े दस्तावेज़ देखें.

ध्यान दें: ऐप्लिकेशन ग्रुप जोड़ने के लिए, आपको अपने Apple डेवलपर खाते में साइन इन करना होगा.

अपना बंडल आइडेंटिफ़ायर अपडेट करें:

Xcode में, अपने टारगेट की सेटिंग पर जाएं. साइनिंग & क्षमताएं टैब पर जाकर, देखें कि आपकी टीम और बंडल आइडेंटिफ़ायर सेट हो गए हैं या नहीं.

ऐप्लिकेशन ग्रुप को Xcode में रनर टारगेट और NewsWidgetExtension टारगेट दोनों से जोड़ें:

+ क्षमता -> चुनें ऐप्लिकेशन के ग्रुप पर क्लिक करें और नया ऐप्लिकेशन ग्रुप जोड़ें. रनर (पैरंट ऐप्लिकेशन) टारगेट और विजेट टारगेट, दोनों के लिए दोहराएं.

ध्यान दें: आपके विजेट के लिए बंडल आइडेंटिफ़ायर, प्रीफ़िक्स के तौर पर पैरंट ऐप्लिकेशन के बंडल आइडेंटिफ़ायर का इस्तेमाल करना चाहिए.

डार्ट कोड जोड़ना

iOS और Android, दोनों ऐप्लिकेशन, कुछ अलग-अलग तरीकों से Flutter ऐप्लिकेशन के साथ डेटा शेयर कर सकते हैं.इन ऐप्लिकेशन से संपर्क करने के लिए, डिवाइस के लोकल key/value स्टोर का इस्तेमाल करें. iOS इस स्टोर को UserDefaults कॉल करता है और Android इस स्टोर को SharedPreferences कॉल करता है. home_widget पैकेज में इन एपीआई को रैप किया जाता है, ताकि किसी भी प्लैटफ़ॉर्म पर डेटा को आसानी से सेव किया जा सके. साथ ही, होम स्क्रीन विजेट को अपडेट किया गया डेटा पाने के लिए चालू किया जा सके.

हेडलाइन और ब्यौरे का डेटा, news_data.dart फ़ाइल से लिया जाता है. इस फ़ाइल में मॉक डेटा और NewsArticle डेटा क्लास है.

lib/news_data.dart

class NewsArticle {
  final String title;
  final String description;
  final String? articleText;

  NewsArticle({
    required this.title,
    required this.description,
    this.articleText = loremIpsum,
  });
}

हेडलाइन और ब्यौरे की वैल्यू अपडेट करना

अपने Flutter ऐप्लिकेशन से होम स्क्रीन विजेट को अपडेट करने की सुविधा जोड़ने के लिए, lib/home_screen.dart फ़ाइल पर जाएं. फ़ाइल की सामग्री को नीचे दिए गए कोड से बदलें. इसके बाद, <YOUR APP GROUP> को अपने ऐप्लिकेशन ग्रुप के आइडेंटिफ़ायर से बदलें.

lib/home_screen.dart

import 'package:flutter/material.dart';
import 'package:home_widget/home_widget.dart';             // Add this import

import 'article_screen.dart';
import 'news_data.dart';

// TODO: Replace with your App Group ID
const String appGroupId = '<YOUR APP GROUP>';              // Add from here
const String iOSWidgetName = 'NewsWidgets';
const String androidWidgetName = 'NewsWidget';             // To here.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

void updateHeadline(NewsArticle newHeadline) {             // Add from here
  // Save the headline data to the widget
  HomeWidget.saveWidgetData<String>('headline_title', newHeadline.title);
  HomeWidget.saveWidgetData<String>(
      'headline_description', newHeadline.description);
  HomeWidget.updateWidget(
    iOSName: iOSWidgetName,
    androidName: androidWidgetName,
  );
}                                                          // To here.

class _MyHomePageState extends State<MyHomePage> {

  @override                                                // Add from here
  void initState() {
    super.initState();

    HomeWidget.setAppGroupId(appGroupId);

    // Mock read in some data and update the headline
    final newHeadline = getNewsStories()[0];
    updateHeadline(newHeadline);
  }                                                        // To here.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text('Top Stories'),
            centerTitle: false,
            titleTextStyle: const TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.black)),
        body: ListView.separated(
          separatorBuilder: (context, idx) {
            return const Divider();
          },
          itemCount: getNewsStories().length,
          itemBuilder: (context, idx) {
            final article = getNewsStories()[idx];
            return ListTile(
              key: Key('$idx ${article.hashCode}'),
              title: Text(article.title!),
              subtitle: Text(article.description!),
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) {
                      return ArticleScreen(article: article);
                    },
                  ),
                );
              },
            );
          },
        ));
  }
}

updateHeadline फ़ंक्शन, कुंजी/वैल्यू पेयर को आपके डिवाइस के लोकल स्टोरेज में सेव करता है. headline_title कुंजी में newHeadline.title की वैल्यू होती है. headline_description कुंजी में newHeadline.description की वैल्यू होती है. यह फ़ंक्शन, नेटिव प्लैटफ़ॉर्म को यह सूचना भी देता है कि होम स्क्रीन वाले विजेट का नया डेटा हासिल और रेंडर किया जा सकता है.

फ़्लोटिंग ऐक्शन बटन में बदलाव करें

floatingActionButton को दिखाए गए तरीके से दबाए जाने पर, updateHeadline फ़ंक्शन को कॉल करें:

lib/article_screen.dart

// New: import the updateHeadline function
import 'home_screen.dart';

...

floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
            content: Text('Updating home screen widget...'),
          ));
          // New: call updateHeadline
          updateHeadline(widget.article);
        },
        label: const Text('Update Homescreen'),
      ),
...

इस बदलाव के बाद, जब कोई उपयोगकर्ता लेख वाले किसी पेज से हेडलाइन अपडेट करें बटन दबाता है, तब होम स्क्रीन पर विजेट की जानकारी अपडेट हो जाती है.

ध्यान दें: अगर आपके डिवाइस की लोकल स्टोरेज में ये कुंजियां मौजूद हैं, तो यह विजेट मौजूदा वैल्यू की जगह नई वैल्यू डाल देता है.

लेख का डेटा दिखाने के लिए iOS कोड को अपडेट करना

iOS के लिए होम स्क्रीन विजेट को अपडेट करने के लिए, Xcode का इस्तेमाल करें.

NewsWidgets.swift फ़ाइल को Xcode में खोलें:

TimelineEntry को कॉन्फ़िगर करें.

SimpleEntry स्ट्रक्चर को इस कोड से बदलें:

ios/NewsWidgets/NewsWidgets.swift

// The date and any data you want to pass into your app must conform to TimelineEntry
struct NewsArticleEntry: TimelineEntry {
    let date: Date
    let title: String
    let description:String
}

यह NewsArticleEntry स्ट्रक्चर, अपडेट होने पर होम स्क्रीन विजेट में भेजे जाने वाले इनकमिंग डेटा के बारे में बताता है. TimelineEntry टाइप के लिए, तारीख पैरामीटर की ज़रूरत होती है.TimelineEntry प्रोटोकॉल के बारे में ज़्यादा जानने के लिए, Apple का TimelineEntry दस्तावेज़ देखें.

उस View में बदलाव करें जो कॉन्टेंट दिखाता है

समाचार रिपोर्ट की हेडलाइन और जानकारी दिखाने के लिए, होम स्क्रीन के विजेट में बदलाव करें SwiftUI में टेक्स्ट दिखाने के लिए, Text व्यू का इस्तेमाल करें. SwiftUI में व्यू को एक-दूसरे के ऊपर स्टैक करने के लिए, VStack व्यू का इस्तेमाल करें.

जनरेट किए गए NewsWidgetEntryView व्यू को इस कोड से बदलें:

ios/NewsWidgets/NewsWidgets.swift

//View that holds the contents of the widget
struct NewsWidgetsEntryView : View {
    var entry: Provider.Entry

    var body: some View {
      VStack {
        Text(entry.title)
        Text(entry.description)
      }
    }
}

होम स्क्रीन विजेट को कब और कैसे अपडेट करना है, यह बताने के लिए ऐप्लिकेशन की सेवा देने वाली कंपनी की जानकारी में बदलाव करें

मौजूदा Provider को इस कोड से बदलें. इसके बाद, अपने ऐप्लिकेशन ग्रुप के आइडेंटिफ़ायर को <YOUR ऐप्लिकेशन ग्रुप> से बदलें:

ios/NewsWidgets/NewsWidgets.swift

struct Provider: TimelineProvider {

// Placeholder is used as a placeholder when the widget is first displayed
    func placeholder(in context: Context) -> NewsArticleEntry {
//      Add some placeholder title and description, and get the current date
      NewsArticleEntry(date: Date(), title: "Placeholder Title", description: "Placeholder description")
    }

// Snapshot entry represents the current time and state
    func getSnapshot(in context: Context, completion: @escaping (NewsArticleEntry) -> ()) {
      let entry: NewsArticleEntry
      if context.isPreview{
        entry = placeholder(in: context)
      }
      else{
        //      Get the data from the user defaults to display
        let userDefaults = UserDefaults(suiteName: <YOUR APP GROUP>)
        let title = userDefaults?.string(forKey: "headline_title") ?? "No Title Set"
        let description = userDefaults?.string(forKey: "headline_description") ?? "No Description Set"
        entry = NewsArticleEntry(date: Date(), title: title, description: description)
      }
        completion(entry)
    }

//    getTimeline is called for the current and optionally future times to update the widget
    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
//      This just uses the snapshot function you defined earlier
      getSnapshot(in: context) { (entry) in
// atEnd policy tells widgetkit to request a new entry after the date has passed
        let timeline = Timeline(entries: [entry], policy: .atEnd)
                  completion(timeline)
              }
    }
}

पिछले कोड में मौजूद Provider, TimelineProvider के मुताबिक है. Provider के लिए तीन अलग-अलग तरीके हैं:

1. जब उपयोगकर्ता पहली बार होम स्क्रीन के विजेट की झलक देखता है, तो placeholder तरीका एक प्लेसहोल्डर एंट्री जनरेट करता है.

2. getSnapshot तरीका, उपयोगकर्ता के डिफ़ॉल्ट डेटा को पढ़ता है और मौजूदा समय के लिए एंट्री जनरेट करता है.
3. getTimeline तरीका, टाइमलाइन की एंट्री दिखाता है. इससे आपको कॉन्टेंट को अपडेट करने के लिए, अनुमानित समय तय करने में मदद मिलती है. यह कोडलैब मौजूदा स्थिति पाने के लिए getSnapshot फ़ंक्शन का इस्तेमाल करता है. .atEnd तरीका, होम स्क्रीन विजेट को मौजूदा समय बीतने के बाद डेटा को रीफ़्रेश करने के लिए कहता है.

NewsWidgets_Previews के बारे में अपनी राय दें

इस कोडलैब के लिए, झलक का इस्तेमाल नहीं किया जा सकता. SwiftUI होम स्क्रीन विजेट की झलक देखने के बारे में ज़्यादा जानकारी के लिए, विजेट को डीबग करने के बारे में Apple के दस्तावेज़ देखें.

सभी फ़ाइलें सेव करें और ऐप्लिकेशन और विजेट टारगेट को फिर से चलाएं.

यह पुष्टि करने के लिए कि ऐप्लिकेशन और होम स्क्रीन विजेट काम कर रहे हैं, टारगेट को फिर से चलाएं.

1. ऐप्लिकेशन टारगेट चलाने के लिए, Xcode में ऐप्लिकेशन स्कीमा चुनें.
2. एक्सटेंशन टारगेट चलाने के लिए Xcode में एक्सटेंशन स्कीमा चुनें.
3. ऐप्लिकेशन में लेख वाले पेज पर जाएं.
4. हेडलाइन अपडेट करने के लिए बटन पर क्लिक करें. होम स्क्रीन के विजेट को भी हेडलाइन अपडेट करनी चाहिए.

Android कोड को अपडेट करना

होम स्क्रीन के विजेट को एक्सएमएल जोड़ें.

Android Studio में, पिछले चरण में जनरेट की गई फ़ाइलों को अपडेट करें.res/layout/news_widget.xml फ़ाइल खोलें. यह आपके होम स्क्रीन विजेट की बनावट और लेआउट के बारे में बताता है. सबसे ऊपर दाएं कोने में कोड चुनें और उस फ़ाइल के कॉन्टेंट को नीचे दिए गए कोड से बदलें:

android/app/res/layout/news_widget.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/widget_container"
   style="@style/Widget.Android.AppWidget.Container"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   android:background="@android:color/white"
   android:theme="@style/Theme.Android.AppWidgetContainer">
   
   <TextView
       android:id="@+id/headline_title"
       style="@style/Widget.Android.AppWidget.InnerView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentStart="true"
       android:layout_alignParentLeft="true"
       android:layout_marginStart="8dp"
       android:layout_marginLeft="8dp"
       android:background="@android:color/white"
       android:text="Title"
       android:textSize="20sp"
       android:textStyle="bold" />

   <TextView
       android:id="@+id/headline_description"
       style="@style/Widget.Android.AppWidget.InnerView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/headline_title"
       android:layout_alignParentStart="true"
       android:layout_alignParentLeft="true"
       android:layout_marginStart="8dp"
       android:layout_marginLeft="8dp"
       android:layout_marginTop="4dp"
       android:background="@android:color/white"
       android:text="Title"
       android:textSize="16sp" />

</RelativeLayout>

इस एक्सएमएल में दो टेक्स्ट व्यू के बारे में बताया गया है, एक लेख की हेडलाइन के लिए और दूसरा लेख के ब्यौरे के लिए. इन टेक्स्ट व्यू से स्टाइलिंग भी तय होती है. पूरे कोडलैब के दौरान, आपको इस फ़ाइल पर रीडायरेक्ट किया जाएगा.

ध्यान दें: यह एक्सएमएल फ़ाइल, स्टैंडर्ड Android कोड बेस से जुड़ी है. यह होम स्क्रीन विजेट के यूज़र इंटरफ़ेस (यूआई) के बारे में बताता है. हालांकि, इसके फ़ंक्शन के बारे में ज़्यादा जानकारी देने से, इस कोडलैब के स्कोप का इस्तेमाल नहीं किया जा सकता. Android डेवलपमेंट के बारे में ज़्यादा जानकारी के लिए, Android की डेवलपर गाइड का दस्तावेज़ देखें.

NewsWidget की सुविधाओं को अपडेट करना

NewsWidget.kt Kotlin सोर्स कोड फ़ाइल खोलें. इस फ़ाइल में NewsWidget नाम की जनरेट की गई क्लास मौजूद है, जो AppWidgetProvider क्लास को बढ़ाती है.

NewsWidget क्लास की सुपर क्लास में तीन मेथड शामिल होते हैं. आपको onUpdate तरीके में बदलाव करना होगा. Android, विजेट के लिए यह तरीका तय अंतराल पर करता है.

ध्यान दें: Android अनुरोध करता है कि विजेट "खुद को अपडेट करें" तय इंटरवल में onUpdate पर कॉल करके. डिफ़ॉल्ट इंटरवल 8,64,00, 000 मिलीसेकंड या 24 घंटे होता है. प्रोग्राम के हिसाब से भी ऐसा किया जा सकता है. जब आप डार्ट कोड में updateWidget को कॉल करते हैं, तो home_widget पैकेज Android को onUpdate पर कॉल करने का निर्देश देता है.

NewsWidget.kt फ़ाइल की सामग्री को इस कोड से बदलें:

android/app/java/com.mydomain.homescreen_widgets/NewsWidget.kt

// Import will depend on App ID.
package com.mydomain.homescreen_widgets

import android.appwidget.AppWidgetManager
import android.appwidget.AppWidgetProvider
import android.content.Context
import android.widget.RemoteViews

// New import.
import es.antonborri.home_widget.HomeWidgetPlugin


/**
 * Implementation of App Widget functionality.
 */
class NewsWidget : AppWidgetProvider() {
    override fun onUpdate(
            context: Context,
            appWidgetManager: AppWidgetManager,
            appWidgetIds: IntArray,
    ) {
        for (appWidgetId in appWidgetIds) {
            // Get reference to SharedPreferences
            val widgetData = HomeWidgetPlugin.getData(context)
            val views = RemoteViews(context.packageName, R.layout.news_widget).apply {

                val title = widgetData.getString("headline_title", null)
                setTextViewText(R.id.headline_title, title ?: "No title set")

                val description = widgetData.getString("headline_description", null)
                setTextViewText(R.id.headline_description, description ?: "No description set")
            }

            appWidgetManager.updateAppWidget(appWidgetId, views)
        }
    }
}

अब onUpdate शुरू होने पर, Android the widgetData.getString() तरीके का इस्तेमाल करके, लोकल स्टोरेज से नई वैल्यू लेता है. इसके बाद, Android डिवाइस setTextViewText को कॉल करके, होम स्क्रीन के विजेट पर दिखने वाले टेक्स्ट में बदलाव करता है.

अपडेट की जांच करना

यह पक्का करने के लिए कि आपके होम स्क्रीन विजेट नए डेटा के साथ अपडेट हो गए हैं, ऐप्लिकेशन को टेस्ट करें. डेटा अपडेट करने के लिए, लेख के पेजों पर होम स्क्रीन अपडेट करें FloatingActionButton का इस्तेमाल करें. आपका होम स्क्रीन विजेट, लेख के शीर्षक के हिसाब से अपडेट होना चाहिए.

5. iOS के होम स्क्रीन विजेट में, Flutter ऐप्लिकेशन में पसंद के मुताबिक फ़ॉन्ट इस्तेमाल करना

अब तक आपने Flutter ऐप्लिकेशन से मिलने वाले डेटा को पढ़ने के लिए, होम स्क्रीन विजेट को कॉन्फ़िगर किया है. Flutter ऐप्लिकेशन में पसंद के मुताबिक बनाया गया फ़ॉन्ट शामिल है. इसे होम स्क्रीन के विजेट में इस्तेमाल किया जा सकता है. आप iOS के होम स्क्रीन विजेट में पसंद के मुताबिक फ़ॉन्ट का इस्तेमाल कर सकते हैं. होम स्क्रीन विजेट में पसंद के मुताबिक फ़ॉन्ट इस्तेमाल करने की सुविधा Android पर उपलब्ध नहीं है.

iOS कोड को अपडेट करना

Flutter, iOS ऐप्लिकेशन के मुख्य बंडल में अपनी ऐसेट सेव करता है. इस बंडल में मौजूद ऐसेट को, अपने होम स्क्रीन के विजेट कोड से ऐक्सेस किया जा सकता है.

अपनी NewsWidgets.swift फ़ाइल में NewsWidgetsEntryView संरचना में, ये बदलाव करें

Flutter ऐसेट डायरेक्ट्री का पाथ पाने के लिए, हेल्पर फ़ंक्शन बनाएं:

ios/NewsWidgets/NewsWidgets.swift

struct NewsWidgetsEntryView : View {
   ...

   // New: Add the helper function.
   var bundle: URL {
           let bundle = Bundle.main
           if bundle.bundleURL.pathExtension == "appex" {
               // Peel off two directory levels - MY_APP.app/PlugIns/MY_APP_EXTENSION.appex
               var url = bundle.bundleURL.deletingLastPathComponent().deletingLastPathComponent()
               url.append(component: "Frameworks/App.framework/flutter_assets")
               return url
           }
           return bundle.bundleURL
       }
   ...
}

अपनी पसंद के मुताबिक बनाई गई फ़ॉन्ट फ़ाइल के यूआरएल का इस्तेमाल करके, फ़ॉन्ट को रजिस्टर करें.

ios/NewsWidgets/NewsWidgets.swift

struct NewsWidgetsEntryView : View {
   ...

   // New: Register the font.
   init(entry: Provider.Entry){
     self.entry = entry
     CTFontManagerRegisterFontsForURL(bundle.appending(path: "/fonts/Chewy-Regular.ttf") as CFURL, CTFontManagerScope.process, nil)
   }
   ...
}

अपनी पसंद के फ़ॉन्ट का इस्तेमाल करने के लिए, हेडलाइन टेक्स्ट व्यू को अपडेट करें.

ios/NewsWidgets/NewsWidgets.swift

struct NewsWidgetsEntryView : View {
   ...


   var body: some View {
    VStack {
      // Update the following line.
      Text(entry.title).font(Font.custom("Chewy", size: 13))
      Text(entry.description)
    }
   }
   ...
}

जब होम स्क्रीन विजेट चलाया जाता है, तो वह अब हेडलाइन के लिए पसंद के मुताबिक फ़ॉन्ट का इस्तेमाल करता है, जैसा कि इस इमेज में दिखाया गया है:

6. Flutter विजेट को इमेज के तौर पर रेंडर करना

इस सेक्शन में, आपको अपने Flutter ऐप्लिकेशन से होम स्क्रीन के विजेट के तौर पर एक ग्राफ़ दिखाना होगा.

यह विजेट आपके होमस्क्रीन पर दिखाए गए टेक्स्ट से ज़्यादा चुनौती भरा है. नेटिव यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का इस्तेमाल करके, Flutter चार्ट को इमेज के तौर पर दिखाने के बजाय उसे फिर से बनाना ज़्यादा आसान होता है.

अपने Flutter चार्ट को PNG फ़ाइल के तौर पर रेंडर करने के लिए, होम स्क्रीन विजेट को कोड करें. आपका होम स्क्रीन विजेट वह इमेज दिखा सकता है.

ध्यान दें: SwiftUI व्यू, Flutter विजेट में कैसे मैप किए जाते हैं, इस बारे में ज़्यादा जानने के लिए SwiftUI डेवलपर के तौर पर Flutter को सीखना लेख पढ़ें. Android फ़्रेमवर्क, Flutter विजेट में कैसे मैप होता है, इस बारे में ज़्यादा जानने के लिए Flutter को Android डेवलपर के तौर पर सीखना लेख पढ़ें.

डार्ट कोड लिखें

Dart साइड में, home_widget पैकेज से renderFlutterWidget तरीका जोड़ें. इस तरीके में एक विजेट, फ़ाइल का नाम, और एक कुंजी की ज़रूरत होती है. यह Flutter विजेट की इमेज दिखाता है और उसे शेयर किए गए कंटेनर में सेव करता है. अपने कोड में इमेज का नाम डालें. साथ ही, पक्का करें कि होम स्क्रीन के विजेट को कंटेनर को ऐक्सेस किया जा सकता हो. key, फ़ाइल के पूरे पाथ को डिवाइस के लोकल स्टोरेज में स्ट्रिंग के तौर पर सेव करता है. अगर डार्ट कोड में नाम बदलता है, तो होम स्क्रीन विजेट को फ़ाइल ढूंढने की अनुमति मिलती है.

इस कोडलैब के लिए, lib/article_screen.dart फ़ाइल में मौजूद LineChart क्लास, चार्ट को दिखाती है. इसके बनाने का तरीका एक CustomPainter दिखाता है, जो इस चार्ट को स्क्रीन पर पेंट करता है.

इस सुविधा को लागू करने के लिए, lib/article_screen.dart फ़ाइल खोलें. Home_widget पैकेज इंपोर्ट करें. इसके बाद, _ArticleScreenState क्लास में कोड को इस कोड से बदलें:

lib/article_screen.dart

import 'package:flutter/material.dart';
// New: import the home_widget package.
import 'package:home_widget/home_widget.dart';

import 'home_screen.dart';
import 'news_data.dart';

...

class _ArticleScreenState extends State<ArticleScreen> {
  // New: add this GlobalKey
  final _globalKey = GlobalKey();
  String? imagePath;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.article.title!),
      ),
      // New: add this FloatingActionButton
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () async {
          if (_globalKey.currentContext != null) {
            var path = await HomeWidget.renderFlutterWidget(
              const LineChart(),
              fileName: 'screenshot',
              key: 'filename',
              logicalSize: _globalKey.currentContext!.size,
              pixelRatio:
                  MediaQuery.of(_globalKey.currentContext!).devicePixelRatio,
            );
            setState(() {
              imagePath = path as String?;
            });
          }
          updateHeadline(widget.article);
        },
        label: const Text('Update Homescreen'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          Text(
            widget.article.description!,
            style: Theme.of(context).textTheme.titleMedium,
          ),
          const SizedBox(height: 20.0),
          Text(widget.article.articleText!),
          const SizedBox(height: 20.0),
          Center(
            // New: Add this key
            key: _globalKey,
            child: const LineChart(),
          ),
          const SizedBox(height: 20.0),
          Text(widget.article.articleText!),
        ],
      ),
    );
  }
}

इस उदाहरण में, _ArticleScreenState क्लास में तीन बदलाव किए गए हैं.

GlobalKey बनाता है

GlobalKey को किसी खास विजेट के बारे में जानकारी मिलती है, जो उस विजेट का साइज़ पाने के लिए ज़रूरी होता है .

lib/article_screen.dart

class _ArticleScreenState extends State<ArticleScreen> {
   // New: add this GlobalKey
   final _globalKey = GlobalKey();
   ...
}

imagePath जोड़ता है

imagePath प्रॉपर्टी में, इमेज की उस जगह की जानकारी सेव की जाती है जहां Flutter विजेट रेंडर किया जाता है.

lib/article_screen.dart

class _ArticleScreenState extends State<ArticleScreen> {
   ...
   // New: add this imagePath
   String? imagePath;
   ...
}

रेंडर करने के लिए विजेट में कुंजी जोड़ता है

_globalKey में, इमेज में रेंडर किया गया Flutter विजेट शामिल होता है. इस मामले में, Flutter विजेट वह केंद्र है जिसमें LineChart शामिल है.

lib/article_screen.dart

class _ArticleScreenState extends State<ArticleScreen> {
   ...
   Center(
      // New: Add this key
 key: _globalKey,
 child: const LineChart(),
   ),
   ...
}

4. विजेट को इमेज के तौर पर सेव करता है

जब उपयोगकर्ता floatingActionButton पर क्लिक करता है, तो renderFlutterWidget तरीका कॉल किया जाता है. यह तरीका, PNG फ़ाइल को "स्क्रीनशॉट" के तौर पर सेव करता है को शेयर की गई कंटेनर डायरेक्ट्री में जोड़ा जा सकता है. इस तरीके से इमेज का पूरा पाथ, डिवाइस के स्टोरेज में फ़ाइल नाम की कुंजी के तौर पर भी सेव होता है.

lib/article_screen.dart

class _ArticleScreenState extends State<ArticleScreen> {
   ...
   floatingActionButton: FloatingActionButton.extended(
 onPressed: () async {
   if (_globalKey.currentContext != null) {
     var path = await HomeWidget.renderFlutterWidget(
       LineChart(),
       fileName: 'screenshot',
       key: 'filename',
       logicalSize: _globalKey.currentContext!.size,
       pixelRatio:
         MediaQuery.of(_globalKey.currentContext!).devicePixelRatio,
     );
     setState(() {
        imagePath = path as String?;
     });
    }
  updateHeadline(widget.article);
  },
   ...
}

iOS कोड अपडेट करना

iOS के लिए, स्टोरेज से फ़ाइल पाथ पाने के लिए कोड अपडेट करें और SwiftUI का इस्तेमाल करके फ़ाइल को इमेज के तौर पर दिखाएं.

ये बदलाव करने के लिए, NewsWidgets.swift फ़ाइल खोलें:

NewsArticleEntry के स्ट्रक्चर में filename और displaySize जोड़ें

filename प्रॉपर्टी में वह स्ट्रिंग होती है जो इमेज फ़ाइल का पाथ दिखाती है. displaySize प्रॉपर्टी में, उपयोगकर्ता के डिवाइस की होम स्क्रीन के विजेट का साइज़ तय होता है. होम स्क्रीन विजेट का साइज़, context से मिलता है.

ios/NewsWidgets/NewsWidgets.swift

struct NewsArticleEntry: TimelineEntry {
   ...

   // New: add the filename and displaySize.
   let filename: String
   let displaySize: CGSize
}

placeholder फ़ंक्शन अपडेट करें

एक प्लेसहोल्डर filename और displaySize शामिल करें.

ios/NewsWidgets/NewsWidgets.swift

func placeholder(in context: Context) -> NewsArticleEntry {
      NewsArticleEntry(date: Date(), title: "Placeholder Title", description: "Placeholder description", filename: "No screenshot available",  displaySize: context.displaySize)
    }

getSnapshot में userDefaults से फ़ाइल नाम पाएं

यह होम स्क्रीन विजेट के अपडेट होने पर, filename वैरिएबल को userDefaults स्टोरेज में filename वैल्यू पर सेट करता है.

ios/NewsWidgets/NewsWidgets.swift

func getSnapshot(
   ...

   let title = userDefaults?.string(forKey: "headline_title") ?? "No Title Set"
   let description = userDefaults?.string(forKey: "headline_description") ?? "No Description Set"
   // New: get fileName from key/value store
   let filename = userDefaults?.string(forKey: "filename") ?? "No screenshot available"
   ...
)

ऐसी ChartImage बनाएं जो किसी पाथ से इमेज दिखाती हो

ChartImage व्यू, Dart साइड पर जनरेट की गई फ़ाइल के कॉन्टेंट से इमेज बनाता है. यहां, आप साइज़ को फ़्रेम के 50% पर सेट करते हैं.

ios/NewsWidgets/NewsWidgets.swift

struct NewsWidgetsEntryView : View {
   ...

   // New: create the ChartImage view
   var ChartImage: some View {
        if let uiImage = UIImage(contentsOfFile: entry.filename) {
            let image = Image(uiImage: uiImage)
                .resizable()
                .frame(width: entry.displaySize.height*0.5, height: entry.displaySize.height*0.5, alignment: .center)
            return AnyView(image)
        }
        print("The image file could not be loaded")
        return AnyView(EmptyView())
    }
   ...
}

NewsWidgetsEntryView के मुख्य हिस्से में ChartImage का इस्तेमाल करें

होम स्क्रीन विजेट में ChartImage दिखाने के लिए, NewsWidgetsEntryView के मुख्य भाग में ChartImage व्यू जोड़ें.

ios/NewsWidgets/NewsWidgets.swift

VStack {
   Text(entry.title).font(Font.custom("Chewy", size: 13))
   Text(entry.description).font(.system(size: 12)).padding(10)
   // New: add the ChartImage to the NewsWidgetEntryView
   ChartImage
}

बदलावों की जांच करना

बदलावों की जांच करने के लिए, अपने Flutter ऐप्लिकेशन (रनर) टारगेट और Xcode से एक्सटेंशन टारगेट, दोनों को फिर से चलाएं. इमेज देखने के लिए, ऐप्लिकेशन में लेख के किसी पेज पर जाएं और होम स्क्रीन के विजेट को अपडेट करने के लिए बटन दबाएं.

Android कोड को अपडेट करना

Android कोड, iOS कोड की तरह ही काम करता है.

1. android/app/res/layout/news_widget.xml फ़ाइल खोलें. इसमें आपके होम स्क्रीन विजेट के यूज़र इंटरफ़ेस (यूआई) एलिमेंट शामिल होते हैं. इसकी सामग्री को इस कोड से बदलें:

android/app/res/layout/news_widget.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/widget_container"
   style="@style/Widget.Android.AppWidget.Container"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   android:background="@android:color/white"
   android:theme="@style/Theme.Android.AppWidgetContainer">

   <TextView
       android:id="@+id/headline_title"
       style="@style/Widget.Android.AppWidget.InnerView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentStart="true"
       android:layout_alignParentLeft="true"
       android:layout_marginStart="8dp"
       android:layout_marginLeft="8dp"
       android:background="@android:color/white"
       android:text="Title"
       android:textSize="20sp"
       android:textStyle="bold" />

   <TextView
       android:id="@+id/headline_description"
       style="@style/Widget.Android.AppWidget.InnerView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@+id/headline_title"
       android:layout_alignParentStart="true"
       android:layout_alignParentLeft="true"
       android:layout_marginStart="8dp"
       android:layout_marginLeft="8dp"
       android:layout_marginTop="4dp"
       android:background="@android:color/white"
       android:text="Title"
       android:textSize="16sp" />
   
   <!--New: add this image view -->
   <ImageView
       android:id="@+id/widget_image"
       android:layout_width="200dp"
       android:layout_height="200dp"
       android:layout_below="@+id/headline_description"
       android:layout_alignBottom="@+id/headline_title"
       android:layout_alignParentStart="true"
       android:layout_alignParentLeft="true"
       android:layout_marginStart="8dp"
       android:layout_marginLeft="8dp"
       android:layout_marginTop="6dp"
       android:layout_marginBottom="-134dp"
       android:layout_weight="1"
       android:adjustViewBounds="true"
       android:background="@android:color/white"
       android:scaleType="fitCenter"
       android:src="@android:drawable/star_big_on"
       android:visibility="visible"
       tools:visibility="visible" />

</RelativeLayout>

यह नया कोड, होम स्क्रीन विजेट में एक इमेज जोड़ता है, जिस पर (अभी के लिए) एक सामान्य स्टार आइकॉन दिखता है. इस स्टार आइकॉन को उस इमेज से बदलें जिसे आपने डार्ट कोड में सेव किया है.

2. NewsWidget.kt फ़ाइल खोलें. इसके कॉन्टेंट को इस कोड से बदलें:

android/app/java/com.mydomain.homescreen_widgets/NewsWidget.kt

// Import will depend on App ID.
package com.mydomain.homescreen_widgets

import android.appwidget.AppWidgetManager
import android.appwidget.AppWidgetProvider
import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.widget.RemoteViews
import java.io.File
import es.antonborri.home_widget.HomeWidgetPlugin


/**
 * Implementation of App Widget functionality.
 */
class NewsWidget : AppWidgetProvider() {
    override fun onUpdate(
            context: Context,
            appWidgetManager: AppWidgetManager,
            appWidgetIds: IntArray,
    ) {
        for (appWidgetId in appWidgetIds) {
            val widgetData = HomeWidgetPlugin.getData(context)
            val views = RemoteViews(context.packageName, R.layout.news_widget).apply {

                val title = widgetData.getString("headline_title", null)
                setTextViewText(R.id.headline_title, title ?: "No title set")

                val description = widgetData.getString("headline_description", null)
                setTextViewText(R.id.headline_description, description ?: "No description set")

                // New: Add the section below
               // Get chart image and put it in the widget, if it exists
                val imageName = widgetData.getString("filename", null)
                val imageFile = File(imageName)
                val imageExists = imageFile.exists()
                if (imageExists) {
                    val myBitmap: Bitmap = BitmapFactory.decodeFile(imageFile.absolutePath)
                    setImageViewBitmap(R.id.widget_image, myBitmap)
                } else {
                    println("image not found!, looked @: ${imageName}")
                }
                // End new code
            }

            appWidgetManager.updateAppWidget(appWidgetId, views)
        }
    }
}

यह डार्ट कोड filename कुंजी का इस्तेमाल करके, स्क्रीनशॉट को डिवाइस के स्टोरेज में सेव करता है. यह इमेज का पूरा पाथ भी लेता है और उससे File ऑब्जेक्ट बनाता है. अगर इमेज मौजूद है, तो डार्ट कोड होम स्क्रीन विजेट में मौजूद इमेज को नई इमेज से बदल देता है.

3. अपने ऐप्लिकेशन को फिर से लोड करें और लेख वाली किसी स्क्रीन पर जाएं. होमस्क्रीन अपडेट करें को दबाएं. होम स्क्रीन विजेट, चार्ट दिखाता है.

7. अगले चरण

बधाई हो!

बधाई हो, आपने अपने Flutter iOS और Android ऐप्लिकेशन के लिए होम स्क्रीन विजेट बना लिए हैं!

अपने Flutter ऐप्लिकेशन में कॉन्टेंट से लिंक करना

उपयोगकर्ता कहां क्लिक करता है, इसके आधार पर हो सकता है कि आप उपयोगकर्ता को अपने ऐप्लिकेशन में किसी खास पेज पर भेजना चाहें. उदाहरण के लिए, इस कोडलैब के समाचार ऐप्लिकेशन में, हो सकता है कि आप उपयोगकर्ता को दिखाई गई हेडलाइन का समाचार लेख दिखाना चाहें.

यह सुविधा, इस कोडलैब के स्कोप के दायरे में नहीं आती. होम स्क्रीन विजेट से लॉन्च हुए ऐप्लिकेशन की पहचान करने और यूआरएल के ज़रिए होम स्क्रीन विजेट से मैसेज भेजने के लिए, आपको Home_widget पैकेज से मिलने वाली स्ट्रीम का इस्तेमाल करने के उदाहरण मिल सकते हैं. ज़्यादा जानने के लिए, docs.flutter.dev पर डीप लिंकिंग से जुड़ा दस्तावेज़ देखें.

बैकग्राउंड में विजेट अपडेट करना

इस कोडलैब में, आपने एक बटन का इस्तेमाल करके, होम स्क्रीन के विजेट को अपडेट किया था. हालांकि, यह जांच के लिए सही है, लेकिन हो सकता है कि प्रोडक्शन कोड में ऐप्लिकेशन को होम स्क्रीन के विजेट को बैकग्राउंड में अपडेट करने की ज़रूरत पड़े. बैकग्राउंड टास्क बनाने के लिए, Workmanager प्लगिन का इस्तेमाल किया जा सकता है. इससे, होम स्क्रीन के विजेट के लिए ज़रूरी संसाधनों को अपडेट किया जा सकता है. ज़्यादा जानने के लिए, Home_widget पैकेज में बैकग्राउंड अपडेट सेक्शन देखें.

iOS के लिए, होम स्क्रीन विजेट का यूज़र इंटरफ़ेस अपडेट करने के लिए नेटवर्क का अनुरोध भी किया जा सकता है. उस अनुरोध की शर्तों या फ़्रीक्वेंसी को कंट्रोल करने के लिए, टाइमलाइन का इस्तेमाल करें. टाइमलाइन का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, Apple का "विजेट को अप-टू-डेट रखना" पढ़ें दस्तावेज़.

इसके बारे में और पढ़ें

• iOS ऐप्लिकेशन एक्सटेंशन