1. ভূমিকা
উইজেট কি?
ফ্লাটার ডেভেলপারদের জন্য, উইজেটের সাধারণ সংজ্ঞা ফ্লাটার ফ্রেমওয়ার্ক ব্যবহার করে তৈরি করা UI উপাদানগুলিকে বোঝায়। এই কোডল্যাবের প্রেক্ষাপটে, একটি উইজেট বলতে একটি অ্যাপের একটি মিনি সংস্করণকে বোঝায় যা অ্যাপটি না খুলেই অ্যাপের তথ্যের একটি দৃশ্য প্রদান করে। অ্যান্ড্রয়েডে, উইজেটগুলি হোম স্ক্রিনে থাকে। iOS-এ, এগুলি হোম স্ক্রিন, লক স্ক্রিন বা আজকের ভিউতে যোগ করা যেতে পারে।
একটি উইজেট কতটা জটিল হতে পারে?
বেশিরভাগ হোম স্ক্রিন উইজেটই সহজ। এগুলিতে মৌলিক টেক্সট, সহজ গ্রাফিক্স অথবা অ্যান্ড্রয়েডে, মৌলিক নিয়ন্ত্রণ থাকতে পারে। অ্যান্ড্রয়েড এবং iOS উভয়ই আপনার UI উপাদান এবং বৈশিষ্ট্যগুলি ব্যবহার করার সীমাবদ্ধতা দেয়।
উইজেটের জন্য UI তৈরি করুন
এই UI সীমাবদ্ধতার কারণে, আপনি Flutter ফ্রেমওয়ার্ক ব্যবহার করে হোম স্ক্রিন উইজেটের UI সরাসরি আঁকতে পারবেন না। পরিবর্তে, আপনি আপনার Flutter অ্যাপে Jetpack Compose বা SwiftUI এর মতো প্ল্যাটফর্ম ফ্রেমওয়ার্ক দিয়ে তৈরি উইজেট যোগ করতে পারেন। এই কোডল্যাব জটিল UI পুনর্লিখন এড়াতে আপনার অ্যাপ এবং উইজেটের মধ্যে রিসোর্স ভাগ করে নেওয়ার উদাহরণ নিয়ে আলোচনা করে।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি home_widget প্যাকেজ ব্যবহার করে একটি সাধারণ Flutter অ্যাপের জন্য Android এবং iOS উভয় ডিভাইসেই হোম স্ক্রিন উইজেট তৈরি করবেন, যা ব্যবহারকারীদের নিবন্ধ পড়তে দেয়। আপনার উইজেটগুলি হবে:
- আপনার Flutter অ্যাপ থেকে ডেটা দেখান।
- Flutter অ্যাপ থেকে শেয়ার করা ফন্ট অ্যাসেট ব্যবহার করে টেক্সট প্রদর্শন করুন।
- একটি রেন্ডার করা ফ্লাটার উইজেটের একটি ছবি প্রদর্শন করুন।
এই ফ্লাটার অ্যাপটিতে দুটি স্ক্রিন (বা রুট ) রয়েছে:
- প্রথমটিতে শিরোনাম এবং বর্ণনা সহ সংবাদ নিবন্ধগুলির একটি তালিকা প্রদর্শিত হয়।
- দ্বিতীয়টি
CustomPaintব্যবহার করে তৈরি একটি চার্ট সহ সম্পূর্ণ নিবন্ধটি প্রদর্শন করে।
.
তুমি কি শিখবে
- iOS এবং Android এ হোম স্ক্রিন উইজেট কিভাবে তৈরি করবেন।
- আপনার হোম স্ক্রিন উইজেট এবং আপনার ফ্লটার অ্যাপের মধ্যে ডেটা ভাগ করার জন্য home_widget প্যাকেজটি কীভাবে ব্যবহার করবেন।
- পুনরায় লেখার জন্য প্রয়োজনীয় কোডের পরিমাণ কীভাবে কমানো যায়।
- আপনার Flutter অ্যাপ থেকে আপনার হোম স্ক্রিন উইজেট কীভাবে আপডেট করবেন।
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
উভয় প্ল্যাটফর্মের জন্য, আপনার Flutter SDK এবং একটি IDE প্রয়োজন। Flutter এর সাথে কাজ করার জন্য আপনি আপনার পছন্দের IDE ব্যবহার করতে পারেন। এটি হতে পারে Dart Code এবং Flutter এক্সটেনশন সহ Visual Studio Code, অথবা Flutter এবং Dart প্লাগইন ইনস্টল সহ Android Studio বা IntelliJ।
iOS হোম স্ক্রিন উইজেট তৈরি করতে:
- আপনি এই কোডল্যাবটি একটি ফিজিক্যাল iOS ডিভাইস অথবা iOS সিমুলেটরে চালাতে পারেন।
- আপনাকে Xcode IDE দিয়ে একটি macOS সিস্টেম কনফিগার করতে হবে। এটি আপনার অ্যাপের iOS সংস্করণ তৈরি করার জন্য প্রয়োজনীয় কম্পাইলার ইনস্টল করে।
অ্যান্ড্রয়েড হোম স্ক্রিন উইজেট তৈরি করতে:
- আপনি এই কোডল্যাবটি একটি ফিজিক্যাল অ্যান্ড্রয়েড ডিভাইস অথবা অ্যান্ড্রয়েড এমুলেটরে চালাতে পারেন।
- আপনার ডেভেলপমেন্ট সিস্টেমটি অ্যান্ড্রয়েড স্টুডিও দিয়ে কনফিগার করতে হবে। এটি আপনার অ্যাপের অ্যান্ড্রয়েড সংস্করণ তৈরির জন্য প্রয়োজনীয় কম্পাইলারটি ইনস্টল করে।
স্টার্টার কোডটি পান
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
৩. একটি বেসিক হোম স্ক্রিন উইজেট যোগ করুন
প্রথমে, নেটিভ প্ল্যাটফর্ম টুলিং ব্যবহার করে হোম স্ক্রিন উইজেট যোগ করুন।
একটি মৌলিক iOS হোম স্ক্রিন উইজেট তৈরি করা
আপনার Flutter iOS অ্যাপে একটি অ্যাপ এক্সটেনশন যোগ করা SwiftUI বা UIKit অ্যাপে একটি অ্যাপ এক্সটেনশন যোগ করার অনুরূপ:
- আপনার Flutter প্রজেক্ট ডিরেক্টরি থেকে একটি টার্মিনাল উইন্ডোতে
open ios/Runner.xcworkspaceচালান। অন্যথায়, VSCode থেকে ios ফোল্ডারে ডান ক্লিক করুন এবং Open in Xcode নির্বাচন করুন। এটি আপনার Flutter প্রজেক্টে ডিফল্ট Xcode ওয়ার্কস্পেস খুলবে। - মেনু থেকে ফাইল → নতুন → লক্ষ্য নির্বাচন করুন। এটি প্রকল্পে একটি নতুন লক্ষ্য যুক্ত করে।
- টেমপ্লেটের একটি তালিকা প্রদর্শিত হবে। উইজেট এক্সটেনশন নির্বাচন করুন।
- এই উইজেটের জন্য পণ্যের নাম বাক্সে "NewsWidgets" টাইপ করুন। Include Live Activity এবং Include Configuration Intent চেক বাক্স উভয়ই সাফ করুন।
নমুনা কোডটি পরীক্ষা করুন
যখন আপনি একটি নতুন টার্গেট যোগ করেন, তখন Xcode আপনার নির্বাচিত টেমপ্লেটের উপর ভিত্তি করে নমুনা কোড তৈরি করে। জেনারেট করা কোড এবং WidgetKit সম্পর্কে আরও জানতে, Apple এর অ্যাপ এক্সটেনশন ডকুমেন্টেশন দেখুন।
আপনার নমুনা উইজেটটি ডিবাগ করুন এবং পরীক্ষা করুন
- প্রথমে, আপনার Flutter অ্যাপের কনফিগারেশন আপডেট করুন। যখন আপনি আপনার Flutter অ্যাপে নতুন প্যাকেজ যোগ করবেন এবং Xcode থেকে প্রজেক্টে একটি টার্গেট চালানোর পরিকল্পনা করবেন তখন আপনাকে এটি করতে হবে। আপনার অ্যাপের কনফিগারেশন আপডেট করতে, আপনার Flutter অ্যাপ ডিরেক্টরিতে নিম্নলিখিত কমান্ডটি চালান:
$ flutter build ios --config-only
- লক্ষ্যবস্তুর তালিকা দেখতে Runner এ ক্লিক করুন। আপনার তৈরি করা উইজেট টার্গেট, NewsWidgets, নির্বাচন করুন এবং Run এ ক্লিক করুন। iOS উইজেট কোড পরিবর্তন করার সময় Xcode থেকে উইজেট টার্গেটটি চালান।
- সিমুলেটর বা ডিভাইসের স্ক্রিনে একটি বেসিক হোম স্ক্রিন উইজেট প্রদর্শিত হওয়া উচিত। যদি আপনি এটি দেখতে না পান, তাহলে আপনি এটি স্ক্রিনে যোগ করতে পারেন। হোম স্ক্রিনে ক্লিক করে ধরে রাখুন তারপর উপরের বাম কোণে + ক্লিক করুন।
- অ্যাপটির নাম খুঁজুন। এই কোডল্যাবের জন্য, "হোমস্ক্রিন উইজেট" খুঁজুন।
- একবার আপনি হোম স্ক্রিন উইজেট যোগ করলে, এটিতে সময় উল্লেখ করে সহজ টেক্সট প্রদর্শিত হবে।
একটি বেসিক অ্যান্ড্রয়েড উইজেট তৈরি করা
- অ্যান্ড্রয়েডে একটি হোম স্ক্রিন উইজেট যোগ করতে, অ্যান্ড্রয়েড স্টুডিওতে প্রোজেক্টের বিল্ড ফাইলটি খুলুন। আপনি এই ফাইলটি android/build.gradle ওয়েবসাইটে খুঁজে পেতে পারেন। অন্যথায়, VSCode থেকে অ্যান্ড্রয়েড ফোল্ডারে ডান ক্লিক করুন এবং Open in Android Studio নির্বাচন করুন।
- প্রকল্পটি তৈরি হওয়ার পরে, উপরের বাম কোণে অ্যাপ ডিরেক্টরিটি সনাক্ত করুন। এই ডিরেক্টরিতে আপনার নতুন হোম স্ক্রিন উইজেট যুক্ত করুন। ডিরেক্টরিতে ডান ক্লিক করুন, নতুন -> উইজেট -> অ্যাপ উইজেট নির্বাচন করুন।
- অ্যান্ড্রয়েড স্টুডিও একটি নতুন ফর্ম প্রদর্শন করে। আপনার হোম স্ক্রিন উইজেট সম্পর্কে প্রাথমিক তথ্য যোগ করুন যার মধ্যে এর ক্লাসের নাম, স্থান, আকার এবং উৎস ভাষা অন্তর্ভুক্ত রয়েছে।
এই কোডল্যাবের জন্য, নিম্নলিখিত মানগুলি সেট করুন:
- নিউজউইজেটে ক্লাসের নাম বাক্স
- সর্বনিম্ন প্রস্থ (কোষ) ড্রপডাউন ৩ এ
- সর্বনিম্ন উচ্চতা (কোষ) ড্রপডাউন ৩ এ
নমুনা কোডটি পরীক্ষা করুন
যখন আপনি ফর্মটি জমা দেন, তখন Android Studio বেশ কয়েকটি ফাইল তৈরি এবং আপডেট করে। এই কোডল্যাবের জন্য প্রাসঙ্গিক পরিবর্তনগুলি নীচের সারণীতে তালিকাভুক্ত করা হয়েছে।
অ্যাকশন | টার্গেট ফাইল | পরিবর্তন |
আপডেট | | একটি নতুন রিসিভার যোগ করে যা নিউজউইজেট নিবন্ধন করে। |
তৈরি করুন | | হোম স্ক্রিন উইজেট UI সংজ্ঞায়িত করে। |
তৈরি করুন | | আপনার হোম স্ক্রিন উইজেট কনফিগারেশন নির্ধারণ করে। আপনি এই ফাইলে আপনার উইজেটের মাত্রা বা নাম সামঞ্জস্য করতে পারেন। |
তৈরি করুন | | আপনার হোম স্ক্রিন উইজেটে কার্যকারিতা যোগ করার জন্য আপনার কোটলিন কোড রয়েছে। |
এই কোডল্যাব জুড়ে আপনি এই ফাইলগুলি সম্পর্কে আরও বিস্তারিত জানতে পারবেন।
আপনার নমুনা উইজেটটি ডিবাগ করুন এবং পরীক্ষা করুন
এখন, আপনার অ্যাপ্লিকেশনটি চালান এবং হোম স্ক্রিন উইজেটটি দেখুন। অ্যাপটি তৈরি হয়ে গেলে, আপনার অ্যান্ড্রয়েড ডিভাইসের অ্যাপ্লিকেশন নির্বাচন স্ক্রিনে যান এবং এই Flutter প্রকল্পের আইকনটি দীর্ঘক্ষণ টিপুন। পপআপ মেনু থেকে Widgets নির্বাচন করুন।
অ্যান্ড্রয়েড ডিভাইস বা এমুলেটরটি অ্যান্ড্রয়েডের জন্য আপনার ডিফল্ট হোম স্ক্রিন উইজেট প্রদর্শন করে।
৪. আপনার ফ্লাটার অ্যাপ থেকে আপনার হোম স্ক্রিন উইজেটে ডেটা পাঠান
আপনি আপনার তৈরি করা বেসিক হোম স্ক্রিন উইজেটটি কাস্টমাইজ করতে পারেন। একটি সংবাদ নিবন্ধের শিরোনাম এবং সারাংশ প্রদর্শনের জন্য হোম স্ক্রিন উইজেটটি আপডেট করুন। নিম্নলিখিত স্ক্রিনশটটি একটি শিরোনাম এবং সারাংশ প্রদর্শনকারী হোম স্ক্রিন উইজেটের একটি উদাহরণ প্রদর্শন করে।
আপনার অ্যাপ এবং হোম স্ক্রিন উইজেটের মধ্যে ডেটা স্থানান্তর করতে, আপনাকে ডার্ট এবং নেটিভ কোড লিখতে হবে। এই বিভাগটি এই প্রক্রিয়াটিকে তিনটি ভাগে ভাগ করে:
- আপনার Flutter অ্যাপে ডার্ট কোড লেখা যা Android এবং iOS উভয়ই ব্যবহার করতে পারে
- নেটিভ iOS কার্যকারিতা যোগ করা হচ্ছে
- নেটিভ অ্যান্ড্রয়েড কার্যকারিতা যোগ করা হচ্ছে
iOS অ্যাপ গ্রুপ ব্যবহার করা
একটি iOS প্যারেন্ট অ্যাপ এবং একটি উইজেট এক্সটেনশনের মধ্যে ডেটা শেয়ার করার জন্য, উভয় লক্ষ্য একই অ্যাপ গ্রুপের অন্তর্গত হতে হবে। অ্যাপ গ্রুপ সম্পর্কে আরও জানতে, অ্যাপলের অ্যাপ গ্রুপ ডকুমেন্টেশন দেখুন।
আপনার বান্ডেল শনাক্তকারী আপডেট করুন:
Xcode-এ, আপনার টার্গেটের সেটিংসে যান। Signing & Capabilities ট্যাবে, আপনার টিম এবং বান্ডেল আইডেন্টিফায়ার সেট করা আছে কিনা তা পরীক্ষা করুন।
Xcode-এ Runner টার্গেট এবং NewsWidgetExtension টার্গেট উভয়ের সাথেই অ্যাপ গ্রুপ যোগ করুন:
+ Capability -> App Groups নির্বাচন করুন এবং একটি নতুন App Group যোগ করুন। রানার (প্যারেন্ট অ্যাপ) টার্গেট এবং উইজেট টার্গেট উভয়ের জন্যই পুনরাবৃত্তি করুন।
ডার্ট কোড যোগ করুন
iOS এবং Android উভয় অ্যাপই Flutter অ্যাপের সাথে কয়েকটি ভিন্ন উপায়ে ডেটা শেয়ার করতে পারে। এই অ্যাপগুলির সাথে যোগাযোগ করতে, ডিভাইসের স্থানীয় key/value স্টোর ব্যবহার করুন। iOS এই স্টোরটিকে UserDefaults বলে এবং Android এই স্টোরটিকে SharedPreferences বলে। home_widget প্যাকেজটি এই 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-কে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
// 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 প্রোটোকল সম্পর্কে আরও জানতে, অ্যাপলের TimelineEntry ডকুমেন্টেশন দেখুন।
কন্টেন্ট প্রদর্শনকারী View সম্পাদনা করুন
আপনার হোম স্ক্রিন উইজেট পরিবর্তন করে তারিখের পরিবর্তে সংবাদ নিবন্ধের শিরোনাম এবং বিবরণ প্রদর্শন করুন। SwiftUI তে টেক্সট প্রদর্শন করতে, Text ভিউ ব্যবহার করুন। SwiftUI তে একে অপরের উপরে ভিউ স্ট্যাক করতে, VStack ভিউ ব্যবহার করুন।
জেনারেট করা NewsWidgetEntryView ভিউটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
//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> দিন:
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
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-এ অ্যাপ স্কিমা নির্বাচন করুন।
- এক্সটেনশন টার্গেট চালানোর জন্য Xcode-এ এক্সটেনশন স্কিমা নির্বাচন করুন।
- অ্যাপের একটি নিবন্ধ পৃষ্ঠায় নেভিগেট করুন।
- শিরোনাম আপডেট করতে বোতামে ক্লিক করুন। হোম স্ক্রিন উইজেটটিও শিরোনাম আপডেট করবে।
অ্যান্ড্রয়েড কোড আপডেট করুন
হোম স্ক্রিন উইজেট XML যোগ করুন।
অ্যান্ড্রয়েড স্টুডিওতে, পূর্ববর্তী ধাপে তৈরি করা ফাইলগুলি আপডেট করুন। 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 ফাইলের বিষয়বস্তু নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
অ্যান্ড্রয়েড/অ্যাপ/জাভা/কম.মাইডোমেন.হোমসক্রিন_উইজেটস/নিউজউইজেট.কেটি
// 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() পদ্ধতি ব্যবহার করে স্থানীয় স্টোরেজ থেকে নতুন মানগুলি পায় এবং তারপর হোম স্ক্রিন উইজেটে প্রদর্শিত টেক্সট পরিবর্তন করতে setTextViewText কল করে।
আপডেটগুলি পরীক্ষা করুন
আপনার হোম স্ক্রিন উইজেটগুলি নতুন ডেটা সহ আপডেট হচ্ছে কিনা তা নিশ্চিত করতে অ্যাপটি পরীক্ষা করুন। ডেটা আপডেট করতে, নিবন্ধের পৃষ্ঠাগুলিতে আপডেট হোম স্ক্রিন FloatingActionButton বোতামটি ব্যবহার করুন। আপনার হোম স্ক্রিন উইজেটটি নিবন্ধের শিরোনাম সহ আপডেট হওয়া উচিত।
৫. আপনার iOS হোম স্ক্রিন উইজেটে Flutter অ্যাপ কাস্টম ফন্ট ব্যবহার করা
এখন পর্যন্ত, আপনি Flutter অ্যাপের সরবরাহ করা ডেটা পড়ার জন্য হোম স্ক্রিন উইজেটটি কনফিগার করেছেন। Flutter অ্যাপটিতে একটি কাস্টম ফন্ট রয়েছে যা আপনি হোম স্ক্রিন উইজেটে ব্যবহার করতে চাইতে পারেন। আপনি আপনার iOS হোম স্ক্রিন উইজেটে কাস্টম ফন্টটি ব্যবহার করতে পারেন। হোম স্ক্রিন উইজেটে কাস্টম ফন্ট ব্যবহার করা অ্যান্ড্রয়েডে উপলব্ধ নয়।
iOS কোড আপডেট করুন
Flutter iOS অ্যাপ্লিকেশনের প্রধান বান্ডলে তার সম্পদ সংরক্ষণ করে। আপনি আপনার হোম স্ক্রিন উইজেট কোড থেকে এই বান্ডেলে সম্পদ অ্যাক্সেস করতে পারেন।
আপনার NewsWidgets.swift ফাইলের NewsWidgetsEntryView স্ট্রাক্টে, নিম্নলিখিত পরিবর্তনগুলি করুন
Flutter asset ডিরেক্টরিতে পাথ পেতে একটি সহায়ক ফাংশন তৈরি করুন:
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
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 ব্যবহার করে ফন্টটি নিবন্ধন করুন।
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
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)
}
...
}
আপনার কাস্টম ফন্ট ব্যবহার করতে হেডলাইন টেক্সট ভিউ আপডেট করুন।
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
struct NewsWidgetsEntryView : View {
...
var body: some View {
VStack {
// Update the following line.
Text(entry.title).font(Font.custom("Chewy", size: 13))
Text(entry.description)
}
}
...
}
যখন আপনি আপনার হোম স্ক্রিন উইজেটটি চালান, তখন এটি এখন নিম্নলিখিত ছবিতে প্রদর্শিত শিরোনামের জন্য কাস্টম ফন্ট ব্যবহার করে:
৬. ফ্লাটার উইজেটগুলিকে একটি ছবি হিসেবে রেন্ডার করা
এই বিভাগে, আপনি আপনার Flutter অ্যাপ থেকে একটি গ্রাফ হোম স্ক্রিন উইজেট হিসেবে প্রদর্শন করবেন।
এই উইজেটটি হোমস্ক্রিনে প্রদর্শিত টেক্সটের চেয়েও বড় চ্যালেঞ্জ প্রদান করে। নেটিভ UI উপাদান ব্যবহার করে এটি পুনরায় তৈরি করার চেষ্টা করার চেয়ে ফ্লাটার চার্টটিকে একটি চিত্র হিসাবে প্রদর্শন করা অনেক সহজ।
আপনার ফ্লটার চার্টকে PNG ফাইল হিসেবে রেন্ডার করার জন্য আপনার হোম স্ক্রিন উইজেটটি কোড করুন। আপনার হোম স্ক্রিন উইজেটটি সেই ছবিটি প্রদর্শন করতে পারে।
ডার্ট কোড লিখুন
ডার্ট সাইডে, home_widget প্যাকেজ থেকে renderFlutterWidget পদ্ধতি যোগ করুন। এই পদ্ধতিতে একটি উইজেট, একটি ফাইলের নাম এবং একটি কী লাগে। এটি ফ্লটার উইজেটের একটি ছবি ফেরত দেয় এবং এটি একটি শেয়ার্ড কন্টেইনারে সংরক্ষণ করে। আপনার কোডে ছবির নামটি প্রদান করুন এবং নিশ্চিত করুন যে হোম স্ক্রিন উইজেটটি কন্টেইনারটি অ্যাক্সেস করতে পারে। 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 প্রপার্টিটি ছবির অবস্থান সংরক্ষণ করে যেখানে ফ্লাটার উইজেট রেন্ডার করা হয়।
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(),
),
...
}
- উইজেটটিকে একটি ছবি হিসেবে সংরক্ষণ করে
ব্যবহারকারী যখন 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 থেকে আসে।
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
struct NewsArticleEntry: TimelineEntry {
...
// New: add the filename and displaySize.
let filename: String
let displaySize: CGSize
}
placeholder ফাংশন আপডেট করুন
একটি স্থানধারক filename এবং displaySize অন্তর্ভুক্ত করুন।
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
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 মানের সাথে সেট করে।
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
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 ভিউ ডার্ট সাইডে তৈরি হওয়া ফাইলের বিষয়বস্তু থেকে একটি ছবি তৈরি করে। এখানে, আপনি ফ্রেমের আকার ৫০% এ সেট করবেন।
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
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 ভিউ যোগ করুন।
আইওএস/নিউজউইজেটস/নিউজউইজেটস.সুইফট
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
}
পরিবর্তনগুলি পরীক্ষা করুন
পরিবর্তনগুলি পরীক্ষা করার জন্য, Xcode থেকে আপনার Flutter অ্যাপ (রানার) টার্গেট এবং আপনার এক্সটেনশন টার্গেট উভয়ই পুনরায় চালান। ছবিটি দেখতে, অ্যাপের যেকোনো একটি নিবন্ধ পৃষ্ঠায় নেভিগেট করুন এবং হোম স্ক্রিন উইজেট আপডেট করার জন্য বোতাম টিপুন।
অ্যান্ড্রয়েড কোড আপডেট করুন
অ্যান্ড্রয়েড কোড iOS কোডের মতোই কাজ করে।
-
android/app/res/layout/news_widget.xmlফাইলটি খুলুন। এতে আপনার হোম স্ক্রিন উইজেটের UI উপাদান রয়েছে। এর বিষয়বস্তু নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
অ্যান্ড্রয়েড/অ্যাপ/রেস/লেআউট/নিউজ_উইজেট.এক্সএমএল
<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ফাইলটি খুলুন। এর কন্টেন্টটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
অ্যান্ড্রয়েড/অ্যাপ/জাভা/কম.মাইডোমেন.হোমসক্রিন_উইজেটস/নিউজউইজেট.কেটি
// 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 অবজেক্ট তৈরি করে। যদি ছবিটি বিদ্যমান থাকে, তাহলে ডার্ট কোডটি হোম স্ক্রিন উইজেটে থাকা ছবিটিকে নতুন ছবিটি দিয়ে প্রতিস্থাপন করে।
- আপনার অ্যাপটি পুনরায় লোড করুন এবং একটি নিবন্ধের স্ক্রিনে নেভিগেট করুন। আপডেট হোমস্ক্রিন টিপুন। হোম স্ক্রিন উইজেটটি চার্টটি প্রদর্শন করে।
৭. পরবর্তী পদক্ষেপ
অভিনন্দন!
অভিনন্দন, আপনি আপনার Flutter iOS এবং Android অ্যাপের জন্য হোম স্ক্রিন উইজেট তৈরি করতে সফল হয়েছেন!
আপনার Flutter অ্যাপের কন্টেন্টের সাথে লিঙ্ক করা
ব্যবহারকারী কোথায় ক্লিক করেন তার উপর নির্ভর করে আপনি ব্যবহারকারীকে আপনার অ্যাপের একটি নির্দিষ্ট পৃষ্ঠায় নিয়ে যেতে চাইতে পারেন। উদাহরণস্বরূপ, এই কোডল্যাবের সংবাদ অ্যাপে, আপনি ব্যবহারকারীকে প্রদর্শিত শিরোনামের জন্য সংবাদ নিবন্ধটি দেখতে চাইতে পারেন।
এই বৈশিষ্ট্যটি এই কোডল্যাবের আওতার বাইরে। হোম স্ক্রিন উইজেট থেকে অ্যাপ লঞ্চ সনাক্ত করতে এবং URL এর মাধ্যমে হোম স্ক্রিন উইজেট থেকে বার্তা পাঠাতে home_widget প্যাকেজ যে স্ট্রিম প্রদান করে তার উদাহরণ আপনি খুঁজে পেতে পারেন। আরও জানতে, docs.flutter.dev-এ ডিপ লিঙ্কিং ডকুমেন্টেশন দেখুন।
ব্যাকগ্রাউন্ডে আপনার উইজেট আপডেট করা হচ্ছে
এই কোডল্যাবে, আপনি একটি বোতাম ব্যবহার করে হোম স্ক্রিন উইজেটের আপডেট ট্রিগার করেছেন। যদিও এটি পরীক্ষার জন্য যুক্তিসঙ্গত, প্রোডাকশন কোডে আপনি আপনার অ্যাপটিকে ব্যাকগ্রাউন্ডে হোম স্ক্রিন উইজেট আপডেট করতে চাইতে পারেন। হোম স্ক্রিন উইজেটের প্রয়োজনীয় রিসোর্স আপডেট করার জন্য আপনি ব্যাকগ্রাউন্ড টাস্ক তৈরি করতে ওয়ার্কম্যানেজার প্লাগইন ব্যবহার করতে পারেন। আরও জানতে, home_widget প্যাকেজের ব্যাকগ্রাউন্ড আপডেট বিভাগটি দেখুন।
iOS এর জন্য, আপনি হোম স্ক্রিন উইজেটটি তার UI আপডেট করার জন্য একটি নেটওয়ার্ক অনুরোধ করতে পারেন। সেই অনুরোধের শর্ত বা ফ্রিকোয়েন্সি নিয়ন্ত্রণ করতে, টাইমলাইন ব্যবহার করুন। টাইমলাইন ব্যবহার সম্পর্কে আরও জানতে, অ্যাপলের "কিপিং এ উইজেট আপ টু ডেট" ডকুমেন্টেশন দেখুন।