1. ভূমিকা
উইজেট কি?
Flutter ডেভেলপারদের জন্য, উইজেটের সাধারণ সংজ্ঞা Flutter ফ্রেমওয়ার্ক ব্যবহার করে তৈরি UI উপাদানগুলিকে বোঝায়। এই কোডল্যাবের পরিপ্রেক্ষিতে, একটি উইজেট একটি অ্যাপের একটি মিনি সংস্করণকে বোঝায় যা অ্যাপটি না খুলেই অ্যাপের তথ্যের একটি দৃশ্য প্রদান করে। অ্যান্ড্রয়েডে, উইজেটগুলি হোম স্ক্রিনে লাইভ। iOS-এ, সেগুলি হোম স্ক্রীন, লক স্ক্রীন বা আজকের ভিউতে যোগ করা যেতে পারে।
একটি উইজেট কতটা জটিল হতে পারে?
বেশিরভাগ হোম স্ক্রীন উইজেট সহজ। এগুলিতে মৌলিক পাঠ্য, সাধারণ গ্রাফিক্স বা, Android-এ মৌলিক নিয়ন্ত্রণ থাকতে পারে। অ্যান্ড্রয়েড এবং আইওএস উভয়ই আপনি কী UI উপাদান এবং বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন তা সীমাবদ্ধ করে।
উইজেটগুলির জন্য UI তৈরি করুন
এই UI সীমাবদ্ধতার কারণে, আপনি ফ্লটার ফ্রেমওয়ার্ক ব্যবহার করে সরাসরি হোম স্ক্রীন উইজেটের UI আঁকতে পারবেন না। পরিবর্তে, আপনি আপনার ফ্লাটার অ্যাপে জেটপ্যাক কম্পোজ বা SwiftUI-এর মতো প্ল্যাটফর্ম ফ্রেমওয়ার্ক দিয়ে তৈরি উইজেট যোগ করতে পারেন। এই কোডল্যাব জটিল UI পুনরায় লেখা এড়াতে আপনার অ্যাপ এবং উইজেটগুলির মধ্যে সংস্থানগুলি ভাগ করার উদাহরণগুলি নিয়ে আলোচনা করে৷
আপনি কি নির্মাণ করবেন
এই কোডল্যাবে, আপনি হোম_উইজেট প্যাকেজ ব্যবহার করে একটি সাধারণ ফ্লাটার অ্যাপের জন্য অ্যান্ড্রয়েড এবং আইওএস উভয়েই হোম স্ক্রীন উইজেট তৈরি করবেন, যা ব্যবহারকারীদের নিবন্ধ পড়তে দেয়। আপনার উইজেটগুলি হবে:
- আপনার Flutter অ্যাপ থেকে ডেটা দেখান।
- Flutter অ্যাপ থেকে ভাগ করা ফন্ট সম্পদ ব্যবহার করে পাঠ্য প্রদর্শন করুন।
- একটি রেন্ডার করা ফ্লটার উইজেটের একটি চিত্র প্রদর্শন করুন৷
এই ফ্লাটার অ্যাপটিতে দুটি স্ক্রিন (বা রুট ) রয়েছে:
- প্রথমটি শিরোনাম এবং বর্ণনা সহ সংবাদ নিবন্ধগুলির একটি তালিকা প্রদর্শন করে৷
- দ্বিতীয়টি
CustomPaintব্যবহার করে তৈরি একটি চার্ট সহ সম্পূর্ণ নিবন্ধটি প্রদর্শন করে।
.
যা শিখবেন
- আইওএস এবং অ্যান্ড্রয়েডে কীভাবে হোম স্ক্রিন উইজেট তৈরি করবেন।
- আপনার হোম স্ক্রীন উইজেট এবং আপনার ফ্লাটার অ্যাপের মধ্যে ডেটা ভাগ করতে হোম_উইজেট প্যাকেজটি কীভাবে ব্যবহার করবেন।
- কীভাবে কোডের পরিমাণ কমাতে হবে তা আবার লিখতে হবে।
- আপনার ফ্লাটার অ্যাপ থেকে কীভাবে আপনার হোম স্ক্রীন উইজেট আপডেট করবেন।
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
উভয় প্ল্যাটফর্মের জন্য, আপনার প্রয়োজন Flutter SDK এবং একটি IDE । Flutter এর সাথে কাজ করার জন্য আপনি আপনার পছন্দের IDE ব্যবহার করতে পারেন। এটি ডার্ট কোড এবং ফ্লাটার এক্সটেনশন সহ ভিজ্যুয়াল স্টুডিও কোড বা ফ্লাটার এবং ডার্ট প্লাগইন ইনস্টল করা অ্যান্ড্রয়েড স্টুডিও বা ইন্টেলিজে হতে পারে।
iOS হোম স্ক্রিন উইজেট তৈরি করতে:
- আপনি একটি শারীরিক iOS ডিভাইস বা iOS সিমুলেটরে এই কোডল্যাব চালাতে পারেন।
- আপনাকে অবশ্যই Xcode IDE এর সাথে একটি macOS সিস্টেম কনফিগার করতে হবে। এটি আপনার অ্যাপের iOS সংস্করণ তৈরি করতে প্রয়োজনীয় কম্পাইলার ইনস্টল করে।
অ্যান্ড্রয়েড হোম স্ক্রিন উইজেট তৈরি করতে:
- আপনি একটি শারীরিক Android ডিভাইস বা Android এমুলেটরে এই কোডল্যাব চালাতে পারেন।
- আপনাকে অবশ্যই অ্যান্ড্রয়েড স্টুডিওর সাথে আপনার ডেভেলপমেন্ট সিস্টেম কনফিগার করতে হবে। এটি আপনার অ্যাপের অ্যান্ড্রয়েড সংস্করণ তৈরি করতে প্রয়োজনীয় কম্পাইলার ইনস্টল করে।
স্টার্টার কোড পান
GitHub থেকে আপনার প্রকল্পের প্রাথমিক সংস্করণ ডাউনলোড করুন
কমান্ড লাইন থেকে, একটি ফ্লাটার-কোডল্যাব ডিরেক্টরিতে গিটহাব সংগ্রহস্থল ক্লোন করুন:
$ 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 হোম স্ক্রীন উইজেট তৈরি করা
আপনার Flutter iOS অ্যাপে একটি অ্যাপ এক্সটেনশন যোগ করা একটি SwiftUI বা UIKit অ্যাপে একটি অ্যাপ এক্সটেনশন যোগ করার মতোই:
- আপনার ফ্লাটার প্রকল্প ডিরেক্টরি থেকে একটি টার্মিনাল উইন্ডোতে
open ios/Runner.xcworkspaceচালান। বিকল্পভাবে, VSCode থেকে ios ফোল্ডারে ডান ক্লিক করুন এবং Xcode-এ Open নির্বাচন করুন। এটি আপনার ফ্লাটার প্রকল্পে ডিফল্ট এক্সকোড ওয়ার্কস্পেস খোলে। - মেনু থেকে ফাইল → নতুন → টার্গেট নির্বাচন করুন। এটি প্রকল্পে একটি নতুন লক্ষ্য যোগ করে।
- টেমপ্লেটের একটি তালিকা প্রদর্শিত হবে। উইজেট এক্সটেনশন নির্বাচন করুন।
- এই উইজেটের জন্য পণ্যের নাম বাক্সে "NewsWidgets" টাইপ করুন। ইনক্লুড লাইভ অ্যাক্টিভিটি এবং ইনক্লুড কনফিগারেশন ইনটেন্ট চেক বক্স দুটোই সাফ করুন।
নমুনা কোড পরিদর্শন করুন
যখন আপনি একটি নতুন লক্ষ্য যোগ করেন, Xcode আপনার নির্বাচিত টেমপ্লেটের উপর ভিত্তি করে নমুনা কোড তৈরি করে। জেনারেট করা কোড এবং উইজেটকিট সম্পর্কে আরও জানতে, অ্যাপলের অ্যাপ এক্সটেনশন ডকুমেন্টেশন দেখুন।
আপনার নমুনা উইজেট ডিবাগ করুন এবং পরীক্ষা করুন
- প্রথমে আপনার Flutter অ্যাপের কনফিগারেশন আপডেট করুন। আপনি যখন আপনার Flutter অ্যাপে নতুন প্যাকেজ যোগ করেন এবং Xcode থেকে প্রকল্পে একটি লক্ষ্য চালানোর পরিকল্পনা করেন তখন আপনাকে অবশ্যই এটি করতে হবে। আপনার অ্যাপের কনফিগারেশন আপডেট করতে, আপনার Flutter অ্যাপ ডিরেক্টরিতে নিম্নলিখিত কমান্ডটি চালান:
$ flutter build ios --config-only
- লক্ষ্যগুলির একটি তালিকা আনতে রানার ক্লিক করুন। আপনি এইমাত্র তৈরি করেছেন এমন উইজেট টার্গেট নিউজউইজেট নির্বাচন করুন এবং রান এ ক্লিক করুন। আপনি যখন iOS উইজেট কোড পরিবর্তন করেন তখন Xcode থেকে উইজেট লক্ষ্য চালান।
- সিমুলেটর বা ডিভাইস স্ক্রীন একটি মৌলিক হোম স্ক্রীন উইজেট প্রদর্শন করা উচিত। আপনি যদি এটি দেখতে না পান তবে আপনি এটি স্ক্রিনে যুক্ত করতে পারেন। হোম স্ক্রিনে ক্লিক করুন এবং ধরে রাখুন তারপর উপরের বাম কোণে + ক্লিক করুন।
- অ্যাপটির নাম অনুসন্ধান করুন। এই কোডল্যাবের জন্য, "হোমস্ক্রিন উইজেট" অনুসন্ধান করুন
- একবার আপনি হোম স্ক্রীন উইজেট যোগ করলে, এটি সময় দেওয়া সাধারণ পাঠ্য প্রদর্শন করবে।
একটি বেসিক অ্যান্ড্রয়েড উইজেট তৈরি করা
- অ্যান্ড্রয়েডে একটি হোম স্ক্রিন উইজেট যোগ করতে, অ্যান্ড্রয়েড স্টুডিওতে প্রজেক্টের বিল্ড ফাইলটি খুলুন। আপনি android/build.gradle-এ এই ফাইলটি খুঁজে পেতে পারেন। বিকল্পভাবে, VSCode থেকে অ্যান্ড্রয়েড ফোল্ডারে ডান ক্লিক করুন এবং অ্যান্ড্রয়েড স্টুডিওতে খুলুন নির্বাচন করুন।
- প্রকল্পটি তৈরি হওয়ার পরে, উপরের-বাম কোণায় অ্যাপ ডিরেক্টরিটি সন্ধান করুন। এই ডিরেক্টরিতে আপনার নতুন হোম স্ক্রীন উইজেট যোগ করুন। ডিরেক্টরিতে ডান ক্লিক করুন, নতুন -> উইজেট -> অ্যাপ উইজেট নির্বাচন করুন।
- অ্যান্ড্রয়েড স্টুডিও একটি নতুন ফর্ম প্রদর্শন করে। আপনার হোম স্ক্রীন উইজেট এর ক্লাসের নাম, স্থান নির্ধারণ, আকার এবং উৎস ভাষা সহ প্রাথমিক তথ্য যোগ করুন
এই কোডল্যাবের জন্য, নিম্নলিখিত মানগুলি সেট করুন:
- নিউজউইজেটে ক্লাসের নাম বক্স
- ন্যূনতম প্রস্থ (কোষ) 3 এ ড্রপডাউন
- ন্যূনতম উচ্চতা (কোষ) 3 এ ড্রপডাউন
নমুনা কোড পরিদর্শন করুন
আপনি যখন ফর্ম জমা দেন, তখন Android স্টুডিও বেশ কিছু ফাইল তৈরি করে এবং আপডেট করে। এই কোডল্যাবের জন্য প্রাসঙ্গিক পরিবর্তনগুলি নীচের সারণীতে তালিকাভুক্ত করা হয়েছে৷
অ্যাকশন | টার্গেট ফাইল | পরিবর্তন |
আপডেট | | একটি নতুন রিসিভার যোগ করে যা নিউজউইজেট নিবন্ধন করে। |
তৈরি করুন | | হোম স্ক্রীন উইজেট UI সংজ্ঞায়িত করে। |
তৈরি করুন | | আপনার হোম স্ক্রীন উইজেট কনফিগারেশন সংজ্ঞায়িত করে। আপনি এই ফাইলে আপনার উইজেটের মাত্রা বা নাম সামঞ্জস্য করতে পারেন। |
তৈরি করুন | | আপনার হোম স্ক্রীন উইজেটে কার্যকারিতা যোগ করার জন্য আপনার কোটলিন কোড রয়েছে। |
আপনি এই কোডল্যাব জুড়ে এই ফাইলগুলিতে আরও বিস্তারিত জানতে পারেন।
আপনার নমুনা উইজেট ডিবাগ করুন এবং পরীক্ষা করুন
এখন, আপনার অ্যাপ্লিকেশন চালান এবং হোম স্ক্রীন উইজেট দেখুন। একবার আপনি অ্যাপটি তৈরি করলে, আপনার অ্যান্ড্রয়েড ডিভাইসের অ্যাপ্লিকেশন নির্বাচন স্ক্রিনে নেভিগেট করুন এবং এই ফ্লাটার প্রকল্পের জন্য আইকনটি দীর্ঘক্ষণ-টিপুন। পপআপ মেনু থেকে উইজেট নির্বাচন করুন।
Android ডিভাইস বা এমুলেটর Android এর জন্য আপনার ডিফল্ট হোম স্ক্রীন উইজেট প্রদর্শন করে।
4. আপনার ফ্লটার অ্যাপ থেকে আপনার হোম স্ক্রীন উইজেটে ডেটা পাঠান
আপনি আপনার তৈরি করা মৌলিক হোম স্ক্রীন উইজেটটি কাস্টমাইজ করতে পারেন। একটি সংবাদ নিবন্ধের জন্য একটি শিরোনাম এবং সারাংশ প্রদর্শন করতে হোম স্ক্রীন উইজেট আপডেট করুন৷ নিম্নলিখিত স্ক্রিনশটটি একটি শিরোনাম এবং সারাংশ প্রদর্শন করে হোম স্ক্রীন উইজেটের একটি উদাহরণ প্রদর্শন করে।
আপনার অ্যাপ এবং হোম স্ক্রীন উইজেটের মধ্যে ডেটা পাস করতে, আপনাকে ডার্ট এবং নেটিভ কোড লিখতে হবে। এই বিভাগটি এই প্রক্রিয়াটিকে তিনটি ভাগে ভাগ করে:
- আপনার ফ্লটার অ্যাপে ডার্ট কোড লেখা যা Android এবং iOS উভয়ই ব্যবহার করতে পারে
- নেটিভ iOS কার্যকারিতা যোগ করা হচ্ছে
- নেটিভ অ্যান্ড্রয়েড কার্যকারিতা যোগ করা হচ্ছে
iOS অ্যাপ গ্রুপ ব্যবহার করে
একটি iOS প্যারেন্ট অ্যাপ এবং একটি উইজেট এক্সটেনশনের মধ্যে ডেটা ভাগ করতে, উভয় লক্ষ্যকেই একই অ্যাপ গ্রুপের অন্তর্গত হতে হবে। অ্যাপ গ্রুপ সম্পর্কে আরও জানতে, অ্যাপলের অ্যাপ গ্রুপ ডকুমেন্টেশন দেখুন।
আপনার বান্ডিল শনাক্তকারী আপডেট করুন:
Xcode-এ, আপনার লক্ষ্যের সেটিংসে যান। সাইনিং এবং সক্ষমতা ট্যাবে, আপনার দল এবং বান্ডেল শনাক্তকারী সেট করা আছে কিনা তা পরীক্ষা করুন।
এক্সকোডে রানার টার্গেট এবং নিউজউইজেট এক্সটেনশন টার্গেট উভয়ের সাথে অ্যাপ গ্রুপ যুক্ত করুন:
+ সক্ষমতা -> অ্যাপ গ্রুপ নির্বাচন করুন এবং একটি নতুন অ্যাপ গ্রুপ যুক্ত করুন। রানার (অভিভাবক অ্যাপ) লক্ষ্য এবং উইজেট লক্ষ্য উভয়ের জন্য পুনরাবৃত্তি করুন।
ডার্ট কোড যোগ করুন
আইওএস এবং অ্যান্ড্রয়েড উভয় অ্যাপই একটি ফ্লাটার অ্যাপের সাথে কয়েকটি ভিন্ন উপায়ে ডেটা শেয়ার করতে পারে। এই অ্যাপগুলির সাথে যোগাযোগ করতে, ডিভাইসের স্থানীয় key/value স্টোরের সুবিধা নিন। iOS এই স্টোরটিকে UserDefaults বলে, এবং Android এই স্টোরটিকে SharedPreferences বলে। হোম_উইজেট প্যাকেজ এই APIগুলিকে প্ল্যাটফর্মে ডেটা সংরক্ষণকে সহজ করে এবং হোম স্ক্রীন উইজেটগুলিকে আপডেট করা ডেটা টানতে সক্ষম করে।
শিরোনাম এবং বিবরণ ডেটা 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 পরিবর্তন করুন
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 ব্যবহার করুন।
Xcode-এ NewsWidgets.swift ফাইল খুলুন:
TimelineEntry কনফিগার করুন ।
নিম্নলিখিত কোড দিয়ে SimpleEntry struct প্রতিস্থাপন করুন:
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 APP GROUP>-এর জন্য প্রতিস্থাপন করুন:
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 তিনটি ভিন্ন পদ্ধতি রয়েছে:
- যখন ব্যবহারকারী প্রথম হোম স্ক্রীন উইজেটটির পূর্বরূপ দেখেন তখন
placeholderপদ্ধতিটি একটি স্থানধারক এন্ট্রি তৈরি করে।
-
getSnapshotপদ্ধতি ব্যবহারকারীর ডিফল্ট থেকে ডেটা পড়ে এবং বর্তমান সময়ের জন্য এন্ট্রি তৈরি করে। -
getTimelineপদ্ধতি টাইমলাইন এন্ট্রি প্রদান করে। আপনার বিষয়বস্তু আপডেট করার সময় আপনার কাছে অনুমানযোগ্য পয়েন্ট থাকলে এটি সাহায্য করে। এই কোডল্যাব বর্তমান অবস্থা পেতে getSnapshot ফাংশন ব্যবহার করে।.atEndপদ্ধতি হোম স্ক্রীন উইজেটকে বর্তমান সময় অতিবাহিত করার পরে ডেটা রিফ্রেশ করতে বলে।
NewsWidgets_Previews কমেন্ট করুন
প্রিভিউ ব্যবহার করা এই কোডল্যাবের সুযোগের বাইরে। SwiftUI হোম স্ক্রীন উইজেটগুলির পূর্বরূপ দেখার বিষয়ে আরও বিশদ বিবরণের জন্য ডিবাগিং উইজেটগুলিতে অ্যাপলের ডকুমেন্টেশন দেখুন।
সমস্ত ফাইল সংরক্ষণ করুন এবং অ্যাপ এবং উইজেট লক্ষ্য পুনরায় চালান।
অ্যাপ এবং হোম স্ক্রিন উইজেট কাজ করে তা যাচাই করতে আবার লক্ষ্যগুলি চালান।
- অ্যাপ টার্গেট চালানোর জন্য Xcode-এ অ্যাপ স্কিমা নির্বাচন করুন।
- এক্সটেনশন টার্গেট চালানোর জন্য এক্সকোডে এক্সটেনশন স্কিমা নির্বাচন করুন।
- অ্যাপের একটি নিবন্ধের পৃষ্ঠায় নেভিগেট করুন।
- শিরোনাম আপডেট করতে বোতামে ক্লিক করুন। হোম স্ক্রীন উইজেট শিরোনাম আপডেট করা উচিত.
অ্যান্ড্রয়েড কোড আপডেট করুন
হোম স্ক্রীন উইজেট XML যোগ করুন।
অ্যান্ড্রয়েড স্টুডিওতে, পূর্ববর্তী ধাপে তৈরি করা ফাইলগুলি আপডেট করুন 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>
এই XML দুটি টেক্সট ভিউ সংজ্ঞায়িত করে, একটি নিবন্ধের শিরোনামের জন্য এবং অন্যটি নিবন্ধের বর্ণনার জন্য। এই পাঠ্য দৃশ্যগুলিও স্টাইলিংকে সংজ্ঞায়িত করে। আপনি এই কোডল্যাব জুড়ে এই ফাইলটিতে ফিরে আসবেন।
নিউজউইজেট কার্যকারিতা আপডেট করুন
NewsWidget.kt Kotlin সোর্স কোড ফাইলটি খুলুন। এই ফাইলটিতে NewsWidget নামে একটি জেনারেট করা ক্লাস রয়েছে যা AppWidgetProvider ক্লাসকে প্রসারিত করে।
NewsWidget ক্লাসে এর সুপারক্লাস থেকে তিনটি পদ্ধতি রয়েছে। আপনি 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 কল করা হয়, তখন অ্যান্ড্রয়েড the widgetData.getString() পদ্ধতি ব্যবহার করে স্থানীয় স্টোরেজ থেকে নতুন মান পায়, এবং তারপর হোম স্ক্রীন উইজেটে প্রদর্শিত পাঠ্য পরিবর্তন করতে setTextViewText কল করে।
আপডেট পরীক্ষা করুন
নতুন ডেটা সহ আপনার হোম স্ক্রীন উইজেট আপডেট নিশ্চিত করতে অ্যাপটি পরীক্ষা করুন। ডেটা আপডেট করতে, নিবন্ধের পাতায় আপডেট হোম স্ক্রীন FloatingActionButton ব্যবহার করুন। আপনার হোম স্ক্রীন উইজেট নিবন্ধের শিরোনামের সাথে আপডেট হওয়া উচিত।
5. আপনার iOS হোম স্ক্রীন উইজেটে 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
}
...
}
আপনার কাস্টম ফন্ট ফাইলে URL ব্যবহার করে ফন্ট নিবন্ধন করুন.
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. একটি ইমেজ হিসাবে ফ্লটার উইজেট রেন্ডারিং
এই বিভাগে, আপনি হোম স্ক্রীন উইজেট হিসাবে আপনার ফ্লটার অ্যাপ থেকে একটি গ্রাফ প্রদর্শন করবেন।
এই উইজেটটি আপনার হোমস্ক্রীনে প্রদর্শিত পাঠ্যের চেয়ে একটি বড় চ্যালেঞ্জ প্রদান করে। নেটিভ UI উপাদানগুলি ব্যবহার করে এটি পুনরায় তৈরি করার চেষ্টা করার পরিবর্তে একটি চিত্র হিসাবে ফ্লটার চার্ট প্রদর্শন করা অনেক সহজ।
আপনার ফ্লাটার চার্টকে PNG ফাইল হিসেবে রেন্ডার করতে আপনার হোম স্ক্রীন উইজেট কোড করুন। আপনার হোম স্ক্রীন উইজেট সেই ছবিটি প্রদর্শন করতে পারে।
ডার্ট কোড লিখুন
ডার্ট সাইডে, হোম_উইজেট প্যাকেজ থেকে renderFlutterWidget পদ্ধতি যোগ করুন। এই পদ্ধতিতে একটি উইজেট, একটি ফাইলের নাম এবং একটি কী লাগে। এটি ফ্লাটার উইজেটের একটি চিত্র ফেরত দেয় এবং এটি একটি ভাগ করা পাত্রে সংরক্ষণ করে। আপনার কোডে ছবির নাম দিন এবং নিশ্চিত করুন যে হোম স্ক্রীন উইজেট কন্টেইনার অ্যাক্সেস করতে পারে। key ডিভাইসের স্থানীয় স্টোরেজে একটি স্ট্রিং হিসাবে সম্পূর্ণ ফাইল পাথ সংরক্ষণ করে। এটি হোম স্ক্রীন উইজেটকে ফাইলটি খুঁজে বের করার অনুমতি দেয় যদি ডার্ট কোডে নাম পরিবর্তন হয়।
এই কোডল্যাবের জন্য, lib/article_screen.dart ফাইলের LineChart ক্লাসটি চার্টের প্রতিনিধিত্ব করে। এর বিল্ড পদ্ধতিটি একটি কাস্টমপেইন্টার প্রদান করে যা এই চার্টটি স্ক্রিনে পেইন্ট করে।
এই বৈশিষ্ট্যটি বাস্তবায়ন করতে, lib/article_screen.dart ফাইলটি খুলুন। হোম_উইজেট প্যাকেজ আমদানি করুন। এরপরে, নিম্নলিখিত কোড দিয়ে _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 উইজেট রয়েছে যা ছবিতে রেন্ডার করা হয়। এই ক্ষেত্রে, ফ্লাটার উইজেট হল কেন্দ্র যেখানে LineChart রয়েছে।
lib/article_screen.dart
class _ArticleScreenState extends State<ArticleScreen> {
...
Center(
// New: Add this key
key: _globalKey,
child: const LineChart(),
),
...
}
- উইজেটটিকে একটি চিত্র হিসাবে সংরক্ষণ করে
ব্যবহারকারী যখন 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 struct- এ 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 থেকে ফাইলের নাম পান
যখন হোম স্ক্রীন উইজেট আপডেট হয় তখন এটি userDefaults স্টোরেজের filename মানতে 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 View ডার্ট সাইডে জেনারেট করা ফাইলের বিষয়বস্তু থেকে একটি ইমেজ তৈরি করে। এখানে, আপনি আকারটি ফ্রেমের 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
}
পরিবর্তনগুলি পরীক্ষা করুন
পরিবর্তনগুলি পরীক্ষা করতে, আপনার ফ্লাটার অ্যাপ (রানার) লক্ষ্য এবং এক্সকোড থেকে আপনার এক্সটেনশন লক্ষ্য উভয়ই পুনরায় চালান। ছবিটি দেখতে, অ্যাপের নিবন্ধের পৃষ্ঠাগুলির একটিতে নেভিগেট করুন এবং হোম স্ক্রীন উইজেট আপডেট করতে বোতাম টিপুন।
অ্যান্ড্রয়েড কোড আপডেট করুন
অ্যান্ড্রয়েড কোড আইওএস কোডের মতোই কাজ করে।
-
android/app/res/layout/news_widget.xmlফাইলটি খুলুন। এতে আপনার হোম স্ক্রীন উইজেটের UI উপাদান রয়েছে। নিম্নলিখিত কোড দিয়ে এর বিষয়বস্তু প্রতিস্থাপন করুন:
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>
এই নতুন কোডটি হোম স্ক্রীন উইজেটে একটি চিত্র যুক্ত করে, যা (এখনকার জন্য) একটি সাধারণ তারকা আইকন প্রদর্শন করে। আপনি ডার্ট কোডে যে ছবিটি সংরক্ষণ করেছেন তার সাথে এই তারকা আইকনটি প্রতিস্থাপন করুন।
-
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 অবজেক্ট তৈরি করে। ইমেজটি বিদ্যমান থাকলে, ডার্ট কোড হোম স্ক্রীন উইজেটের ইমেজটিকে নতুন ইমেজ দিয়ে প্রতিস্থাপন করে।
- আপনার অ্যাপ পুনরায় লোড করুন এবং একটি নিবন্ধ স্ক্রিনে নেভিগেট করুন। হোমস্ক্রিন আপডেট করুন টিপুন। হোম স্ক্রীন উইজেট চার্ট প্রদর্শন করে।
7. পরবর্তী পদক্ষেপ
অভিনন্দন!
অভিনন্দন, আপনি আপনার Flutter iOS এবং Android অ্যাপের জন্য হোম স্ক্রিন উইজেট তৈরি করতে সফল হয়েছেন!
আপনার Flutter অ্যাপে সামগ্রীর সাথে লিঙ্ক করা
ব্যবহারকারী কোথায় ক্লিক করেন তার উপর নির্ভর করে আপনি আপনার অ্যাপের একটি নির্দিষ্ট পৃষ্ঠায় ব্যবহারকারীকে নির্দেশ করতে চাইতে পারেন। উদাহরণস্বরূপ, এই কোডল্যাবের সংবাদ অ্যাপে, আপনি ব্যবহারকারীকে প্রদর্শিত শিরোনামের জন্য সংবাদ নিবন্ধ দেখতে চাইতে পারেন।
এই বৈশিষ্ট্যটি এই কোডল্যাবের সুযোগের বাইরে পড়ে। আপনি হোম স্ক্রীন উইজেট থেকে অ্যাপ লঞ্চ শনাক্ত করতে এবং URL এর মাধ্যমে হোম স্ক্রীন উইজেট থেকে বার্তা পাঠাতে হোম_উইজেট প্যাকেজ প্রদান করে এমন একটি স্ট্রিম ব্যবহার করার উদাহরণ খুঁজে পেতে পারেন। আরও জানতে, docs.flutter.dev-এ ডিপ লিঙ্কিং ডকুমেন্টেশন দেখুন।
পটভূমিতে আপনার উইজেট আপডেট করা হচ্ছে
এই কোডল্যাবে, আপনি একটি বোতাম ব্যবহার করে হোম স্ক্রীন উইজেটের একটি আপডেট ট্রিগার করেছেন৷ যদিও এটি পরীক্ষার জন্য যুক্তিসঙ্গত, উত্পাদন কোডে আপনি আপনার অ্যাপটিকে পটভূমিতে হোম স্ক্রীন উইজেট আপডেট করতে চাইতে পারেন। হোম স্ক্রীন উইজেটের প্রয়োজনীয় সংস্থানগুলি আপডেট করতে আপনি ব্যাকগ্রাউন্ড টাস্ক তৈরি করতে ওয়ার্কম্যানেজার প্লাগইন ব্যবহার করতে পারেন। আরও জানতে, হোম_উইজেট প্যাকেজের পটভূমি আপডেট বিভাগটি দেখুন।
iOS-এর জন্য, আপনি হোম স্ক্রীন উইজেটকে তার UI আপডেট করার জন্য একটি নেটওয়ার্ক অনুরোধ করতেও পারেন। সেই অনুরোধের শর্ত বা ফ্রিকোয়েন্সি নিয়ন্ত্রণ করতে, টাইমলাইন ব্যবহার করুন। টাইমলাইন ব্যবহার সম্পর্কে আরও জানতে, অ্যাপলের "একটি উইজেট আপ টু ডেট রাখা" ডকুমেন্টেশন দেখুন।