১. ভূমিকা
উইজেট বলতে কী বোঝায়?
ফ্লাটার ডেভেলপারদের জন্য, উইজেটের সাধারণ সংজ্ঞা বলতে ফ্লাটার ফ্রেমওয়ার্ক ব্যবহার করে তৈরি UI কম্পোনেন্টগুলোকে বোঝায়। এই কোডল্যাবের প্রেক্ষাপটে, উইজেট বলতে একটি অ্যাপের ক্ষুদ্র সংস্করণকে বোঝায়, যা অ্যাপটি না খুলেই এর তথ্য দেখার সুযোগ করে দেয়। অ্যান্ড্রয়েডে, উইজেটগুলো হোম স্ক্রিনে থাকে। আইওএস-এ, এগুলো হোম স্ক্রিন, লক স্ক্রিন বা টুডে ভিউতে যোগ করা যায়।
একটি উইজেট কতটা জটিল হতে পারে?
বেশিরভাগ হোম স্ক্রিন উইজেটই সরল প্রকৃতির হয়। সেগুলোতে সাধারণ টেক্সট, সাধারণ গ্রাফিক্স অথবা, অ্যান্ড্রয়েডের ক্ষেত্রে, মৌলিক কন্ট্রোল থাকতে পারে। অ্যান্ড্রয়েড এবং আইওএস উভয়ই আপনি কী কী UI কম্পোনেন্ট এবং ফিচার ব্যবহার করতে পারবেন, তা সীমিত করে দেয়।
উইজেটগুলির জন্য UI তৈরি করুন
এই UI সীমাবদ্ধতার কারণে, আপনি ফ্লাটার ফ্রেমওয়ার্ক ব্যবহার করে সরাসরি হোম স্ক্রিন উইজেটের UI আঁকতে পারবেন না। এর পরিবর্তে, আপনি জেটপ্যাক কম্পোজ বা সুইফটইউআই-এর মতো প্ল্যাটফর্ম ফ্রেমওয়ার্ক দিয়ে তৈরি উইজেটগুলো আপনার ফ্লাটার অ্যাপে যোগ করতে পারেন। এই কোডল্যাবে জটিল UI পুনরায় লেখা এড়ানোর জন্য আপনার অ্যাপ এবং উইজেটগুলোর মধ্যে রিসোর্স শেয়ার করার উদাহরণ নিয়ে আলোচনা করা হয়েছে।
আপনি যা তৈরি করবেন
এই কোডল্যাবে, আপনি home_widget প্যাকেজ ব্যবহার করে একটি সাধারণ ফ্লাটার অ্যাপের জন্য অ্যান্ড্রয়েড এবং আইওএস উভয়ের জন্য হোম স্ক্রিন উইজেট তৈরি করবেন, যা ব্যবহারকারীদের আর্টিকেল পড়তে দেবে। আপনার উইজেটগুলো যা করবে:
- আপনার ফ্লাটার অ্যাপ থেকে ডেটা দেখান।
- ফ্লাটার অ্যাপ থেকে শেয়ার করা ফন্ট অ্যাসেট ব্যবহার করে টেক্সট প্রদর্শন করুন।
- রেন্ডার করা ফ্লাটার উইজেটের একটি ছবি প্রদর্শন করুন।
এই ফ্লাটার অ্যাপটিতে দুটি স্ক্রিন (বা রাউট ) রয়েছে:
- প্রথমটিতে শিরোনাম ও বিবরণসহ সংবাদ নিবন্ধগুলির একটি তালিকা প্রদর্শিত হয়।
- দ্বিতীয়টিতে
CustomPaintব্যবহার করে তৈরি একটি চার্টসহ সম্পূর্ণ নিবন্ধটি প্রদর্শিত হয়।
.
আপনি যা শিখবেন
- iOS এবং Android-এ কীভাবে হোম স্ক্রিন উইজেট তৈরি করবেন
- আপনার হোম স্ক্রিন উইজেট এবং ফ্লাটার অ্যাপের মধ্যে ডেটা শেয়ার করতে home_widget প্যাকেজটি কীভাবে ব্যবহার করবেন।
- পুনরায় লেখার জন্য প্রয়োজনীয় কোডের পরিমাণ কীভাবে কমানো যায়।
- আপনার ফ্লাটার অ্যাপ থেকে কীভাবে হোম স্ক্রিন উইজেট আপডেট করবেন
২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।
উভয় প্ল্যাটফর্মের জন্যই আপনার ফ্লাটার এসডিকে (Flutter SDK) এবং একটি আইডিই (IDE) প্রয়োজন। ফ্লাটার নিয়ে কাজ করার জন্য আপনি আপনার পছন্দের আইডিই ব্যবহার করতে পারেন। এটি হতে পারে ডার্ট কোড (Dart Code) এবং ফ্লাটার এক্সটেনশনসহ ভিজ্যুয়াল স্টুডিও কোড (Visual Studio Code), অথবা ফ্লাটার ও ডার্ট প্লাগইন ইনস্টল করা অ্যান্ড্রয়েড স্টুডিও (Android Studio) বা ইন্টেলিজ (IntelliJ)।
iOS হোম স্ক্রিন উইজেট তৈরি করতে:
- আপনি এই কোডল্যাবটি একটি বাস্তব iOS ডিভাইসে অথবা iOS সিমুলেটরে চালাতে পারেন।
- আপনাকে অবশ্যই Xcode IDE সহ একটি macOS সিস্টেম কনফিগার করতে হবে। এটি আপনার অ্যাপের iOS সংস্করণ তৈরি করার জন্য প্রয়োজনীয় কম্পাইলার ইনস্টল করে।
অ্যান্ড্রয়েড হোম স্ক্রিন উইজেট তৈরি করতে:
- আপনি এই কোডল্যাবটি একটি বাস্তব অ্যান্ড্রয়েড ডিভাইসে অথবা অ্যান্ড্রয়েড এমুলেটরে চালাতে পারেন।
- আপনাকে অবশ্যই অ্যান্ড্রয়েড স্টুডিও দিয়ে আপনার ডেভেলপমেন্ট সিস্টেম কনফিগার করতে হবে। এটি আপনার অ্যাপের অ্যান্ড্রয়েড সংস্করণ তৈরি করার জন্য প্রয়োজনীয় কম্পাইলার ইনস্টল করে।
স্টার্টার কোডটি নিন
গিটহাব থেকে আপনার প্রোজেক্টের প্রাথমিক সংস্করণটি ডাউনলোড করুন।
কমান্ড লাইন থেকে, 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 অ্যাপে অ্যাপ এক্সটেনশন যোগ করার মতোই:
- আপনার ফ্লাটার প্রজেক্ট ডিরেক্টরি থেকে একটি টার্মিনাল উইন্ডোতে
open ios/Runner.xcworkspaceচালান। বিকল্পভাবে, VSCode থেকে `ios` ফোল্ডারটির উপর রাইট-ক্লিক করে `Open in Xcode` নির্বাচন করুন। এটি আপনার ফ্লাটার প্রজেক্টে ডিফল্ট Xcode ওয়ার্কস্পেসটি খুলে দেবে। - মেনু থেকে ফাইল → নতুন → টার্গেট নির্বাচন করুন। এটি প্রজেক্টে একটি নতুন টার্গেট যুক্ত করবে।
- টেমপ্লেটগুলির একটি তালিকা প্রদর্শিত হবে। উইজেট এক্সটেনশন নির্বাচন করুন।
- এই উইজেটটির জন্য প্রোডাক্ট নেম বক্সে 'NewsWidgets' টাইপ করুন। ইনক্লুড লাইভ অ্যাক্টিভিটি এবং ইনক্লুড কনফিগারেশন ইনটেন্ট উভয় চেক বক্স থেকে টিক চিহ্ন তুলে দিন।
নমুনা কোডটি পরিদর্শন করুন
আপনি যখন একটি নতুন টার্গেট যোগ করেন, তখন Xcode আপনার নির্বাচিত টেমপ্লেটের উপর ভিত্তি করে নমুনা কোড তৈরি করে। তৈরি হওয়া কোড এবং WidgetKit সম্পর্কে আরও জানতে, Apple-এর অ্যাপ এক্সটেনশন ডকুমেন্টেশন দেখুন।
আপনার নমুনা উইজেটটি ডিবাগ এবং পরীক্ষা করুন
- প্রথমে, আপনার ফ্লাটার অ্যাপের কনফিগারেশন আপডেট করুন। যখন আপনি আপনার ফ্লাটার অ্যাপে নতুন প্যাকেজ যোগ করেন এবং এক্সকোড থেকে প্রজেক্টের কোনো টার্গেট রান করার পরিকল্পনা করেন, তখন আপনাকে অবশ্যই এটি করতে হবে। আপনার অ্যাপের কনফিগারেশন আপডেট করতে, আপনার ফ্লাটার অ্যাপ ডিরেক্টরিতে নিম্নলিখিত কমান্ডটি চালান:
$ flutter build ios --config-only
- টার্গেটগুলির একটি তালিকা আনতে রানার-এ ক্লিক করুন। আপনার এইমাত্র তৈরি করা উইজেট টার্গেট, নিউজউইজেটস (NewsWidgets), নির্বাচন করুন এবং রান (Run)- এ ক্লিক করুন। যখন আপনি আইওএস (iOS) উইজেট কোড পরিবর্তন করবেন, তখন এক্সকোড (Xcode) থেকে উইজেট টার্গেটটি রান করুন।
- সিমুলেটর বা ডিভাইসের স্ক্রিনে একটি সাধারণ হোম স্ক্রিন উইজেট দেখা যাওয়ার কথা। যদি আপনি এটি দেখতে না পান, তবে আপনি এটি স্ক্রিনে যোগ করতে পারেন। হোম স্ক্রিনে ক্লিক করে ধরে রাখুন, তারপর উপরের বাম কোণায় থাকা + চিহ্নে ক্লিক করুন।
- অ্যাপটির নাম দিয়ে অনুসন্ধান করুন। এই কোডল্যাবের জন্য, 'Homescreen Widgets' লিখে অনুসন্ধান করুন।
- একবার আপনি হোম স্ক্রিন উইজেটটি যোগ করলে, এটিতে সময়সহ সাধারণ টেক্সট প্রদর্শিত হওয়া উচিত।
একটি বেসিক অ্যান্ড্রয়েড উইজেট তৈরি করা
- অ্যান্ড্রয়েডে হোম স্ক্রিন উইজেট যোগ করতে, অ্যান্ড্রয়েড স্টুডিওতে প্রজেক্টের বিল্ড ফাইলটি খুলুন। এই ফাইলটি android/build.gradle-এ পাওয়া যাবে। বিকল্পভাবে, VSCode থেকে android ফোল্ডারের উপর রাইট ক্লিক করে ‘Open in Android Studio’ নির্বাচন করুন।
- প্রজেক্টটি বিল্ড হয়ে গেলে, উপরের বাম কোণায় অ্যাপ ডিরেক্টরিটি খুঁজুন। এই ডিরেক্টরিতে আপনার নতুন হোম স্ক্রিন উইজেটটি যোগ করুন। ডিরেক্টরিটির উপর রাইট ক্লিক করে New -> Widget -> App Widget নির্বাচন করুন।
- অ্যান্ড্রয়েড স্টুডিও একটি নতুন ফর্ম প্রদর্শন করে। আপনার হোম স্ক্রিন উইজেটের ক্লাস নেম, প্লেসমেন্ট, সাইজ এবং সোর্স ল্যাঙ্গুয়েজ সহ প্রাথমিক তথ্য যোগ করুন।
এই কোডল্যাবের জন্য, নিম্নলিখিত মানগুলি সেট করুন:
- নিউজউইজেটে ক্লাস নেম বক্স
- সর্বনিম্ন প্রস্থ (সেল) ড্রপডাউন করে ৩-এ সেট করুন।
- সর্বনিম্ন উচ্চতা (সেল) ড্রপডাউন করে ৩-এ সেট করুন।
নমুনা কোডটি পরিদর্শন করুন
আপনি যখন ফর্মটি জমা দেন, অ্যান্ড্রয়েড স্টুডিও বেশ কয়েকটি ফাইল তৈরি ও আপডেট করে। এই কোডল্যাবের জন্য প্রাসঙ্গিক পরিবর্তনগুলো নিচের সারণিতে তালিকাভুক্ত করা হলো।
পদক্ষেপ | লক্ষ্য ফাইল | পরিবর্তন |
আপডেট | | একটি নতুন রিসিভার যোগ করে যা নিউজউইজেটটি রেজিস্টার করে। |
তৈরি করুন | | হোম স্ক্রিন উইজেটের UI সংজ্ঞায়িত করে। |
তৈরি করুন | | আপনার হোম স্ক্রিন উইজেটের কনফিগারেশন নির্ধারণ করে। এই ফাইলে আপনি আপনার উইজেটের আকার বা নাম পরিবর্তন করতে পারেন। |
তৈরি করুন | | আপনার হোম স্ক্রিন উইজেটে কার্যকারিতা যোগ করার জন্য প্রয়োজনীয় কোটলিন কোড এখানে রয়েছে। |
এই কোডল্যাব জুড়ে আপনি এই ফাইলগুলো সম্পর্কে আরও বিস্তারিত জানতে পারবেন।
আপনার নমুনা উইজেটটি ডিবাগ এবং পরীক্ষা করুন
এখন, আপনার অ্যাপ্লিকেশনটি চালান এবং হোম স্ক্রিন উইজেটটি দেখুন। অ্যাপটি বিল্ড করার পর, আপনার অ্যান্ড্রয়েড ডিভাইসের অ্যাপ্লিকেশন সিলেকশন স্ক্রিনে যান এবং এই ফ্লাটার প্রজেক্টের আইকনটিতে লং-প্রেস করুন। পপ-আপ মেনু থেকে উইজেটস (Widgets) নির্বাচন করুন।
অ্যান্ড্রয়েড ডিভাইস বা এমুলেটরটি আপনার অ্যান্ড্রয়েডের ডিফল্ট হোম স্ক্রিন উইজেট প্রদর্শন করে।
৪. আপনার ফ্লাটার অ্যাপ থেকে হোম স্ক্রিন উইজেটে ডেটা পাঠান
আপনি আপনার তৈরি করা বেসিক হোম স্ক্রিন উইজেটটি কাস্টমাইজ করতে পারেন। একটি সংবাদ নিবন্ধের শিরোনাম এবং সারাংশ প্রদর্শন করার জন্য হোম স্ক্রিন উইজেটটি আপডেট করুন। নিচের স্ক্রিনশটটিতে হোম স্ক্রিন উইজেটের শিরোনাম এবং সারাংশ প্রদর্শনের একটি উদাহরণ দেখানো হয়েছে।
আপনার অ্যাপ এবং হোম স্ক্রিন উইজেটের মধ্যে ডেটা আদান-প্রদান করতে, আপনাকে ডার্ট এবং নেটিভ কোড লিখতে হবে। এই অংশে এই প্রক্রিয়াটিকে তিনটি ভাগে ভাগ করা হয়েছে:
- আপনার ফ্লাটার অ্যাপে ডার্ট কোড লেখা যা অ্যান্ড্রয়েড এবং আইওএস উভয়ই ব্যবহার করতে পারে
- নেটিভ iOS কার্যকারিতা যোগ করা
- নেটিভ অ্যান্ড্রয়েড কার্যকারিতা যোগ করা
iOS অ্যাপ গ্রুপ ব্যবহার করে
একটি iOS প্যারেন্ট অ্যাপ এবং একটি উইজেট এক্সটেনশনের মধ্যে ডেটা শেয়ার করার জন্য, উভয় টার্গেটকেই একই অ্যাপ গ্রুপের অন্তর্ভুক্ত হতে হবে। অ্যাপ গ্রুপ সম্পর্কে আরও জানতে, Apple-এর অ্যাপ গ্রুপ ডকুমেন্টেশন দেখুন।
আপনার বান্ডেল শনাক্তকারী আপডেট করুন:
Xcode-এ, আপনার টার্গেটের সেটিংসে যান। Signing & Capabilities ট্যাবে, আপনার টিম এবং বান্ডেল আইডেন্টিফায়ার সেট করা আছে কিনা তা যাচাই করুন।
Xcode-এ Runner টার্গেট এবং NewsWidgetExtension টার্গেট উভয়টিতেই অ্যাপ গ্রুপটি যোগ করুন:
+ Capability -> App Groups নির্বাচন করুন এবং একটি নতুন অ্যাপ গ্রুপ যোগ করুন। Runner (প্যারেন্ট অ্যাপ) টার্গেট এবং উইজেট টার্গেট উভয়ের জন্য এটি পুনরাবৃত্তি করুন।
ডার্ট কোড যোগ করুন
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,
});
}
শিরোনাম এবং বিবরণের মান আপডেট করুন
আপনার ফ্লাটার অ্যাপ থেকে হোম স্ক্রিন উইজেট আপডেট করার কার্যকারিতা যোগ করতে, 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 স্ট্রাকচারটি নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:
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 হোম স্ক্রিন উইজেট প্রিভিউ করার বিষয়ে আরও বিস্তারিত জানতে Apple-এর উইজেট ডিবাগিং ডকুমেন্টেশন দেখুন।
সমস্ত ফাইল সংরক্ষণ করুন এবং অ্যাপ ও উইজেট টার্গেটটি পুনরায় চালান।
অ্যাপ এবং হোম স্ক্রিন উইজেটটি কাজ করছে কিনা তা যাচাই করতে টার্গেটগুলো আবার চালান।
- অ্যাপ টার্গেটটি রান করার জন্য Xcode-এ অ্যাপ স্কিমাটি নির্বাচন করুন।
- এক্সটেনশন টার্গেটটি চালানোর জন্য Xcode-এ এক্সটেনশন স্কিমাটি নির্বাচন করুন।
- অ্যাপে একটি আর্টিকেল পেজে যান।
- শিরোনাম আপডেট করতে বাটনটিতে ক্লিক করুন। হোম স্ক্রিন উইজেটটিও শিরোনামটি আপডেট করবে।
অ্যান্ড্রয়েড কোড আপডেট করুন
হোম স্ক্রিন উইজেট XML যোগ করুন।
অ্যান্ড্রয়েড স্টুডিওতে, আগের ধাপে তৈরি করা ফাইলগুলো আপডেট করুন। res/layout/news_widget.xml ফাইলটি খুলুন। এটি আপনার হোম স্ক্রিন উইজেটের কাঠামো এবং লেআউট নির্ধারণ করে। উপরের ডানদিকের কোণায় 'Code' নির্বাচন করুন এবং ফাইলটির বিষয়বস্তু নিচের কোড দিয়ে প্রতিস্থাপন করুন:
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 কোটলিন সোর্স কোড ফাইলটি খুলুন। এই ফাইলে 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 ব্যবহার করুন। আপনার হোম স্ক্রিন উইজেটটি আর্টিকেলের শিরোনাম দিয়ে আপডেট হয়ে যাবে।
৫. আপনার iOS হোম স্ক্রিন উইজেটে ফ্লাটার অ্যাপের কাস্টম ফন্ট ব্যবহার করা
এখন পর্যন্ত, আপনি ফ্লাটার অ্যাপের দেওয়া ডেটা পড়ার জন্য হোম স্ক্রিন উইজেটটি কনফিগার করেছেন। ফ্লাটার অ্যাপটিতে একটি কাস্টম ফন্ট রয়েছে যা আপনি হোম স্ক্রিন উইজেটে ব্যবহার করতে চাইতে পারেন। আপনি আপনার iOS হোম স্ক্রিন উইজেটে কাস্টম ফন্টটি ব্যবহার করতে পারেন। অ্যান্ড্রয়েডে হোম স্ক্রিন উইজেটে কাস্টম ফন্ট ব্যবহার করার সুবিধাটি নেই।
iOS কোড আপডেট করুন
ফ্লাটার তার অ্যাসেটগুলো iOS অ্যাপ্লিকেশনের mainBundle-এ সংরক্ষণ করে। আপনি আপনার হোম স্ক্রিন উইজেট কোড থেকে এই বান্ডেলের অ্যাসেটগুলো অ্যাক্সেস করতে পারেন।
আপনার NewsWidgets.swift ফাইলের NewsWidgetsEntryView struct-এ নিম্নলিখিত পরিবর্তনগুলি করুন।
ফ্লাটার অ্যাসেট ডিরেক্টরির পাথ পাওয়ার জন্য একটি হেল্পার ফাংশন তৈরি করুন:
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)
}
}
...
}
আপনি যখন আপনার হোম স্ক্রিন উইজেটটি চালাবেন, তখন এটি এখন শিরোনামের জন্য কাস্টম ফন্ট ব্যবহার করবে, যেমনটি নিম্নলিখিত ছবিতে দেখানো হয়েছে:
৬. ফ্লাটার উইজেটকে ছবি হিসেবে রেন্ডার করা
এই অংশে, আপনি আপনার ফ্লাটার অ্যাপ থেকে একটি গ্রাফ হোম স্ক্রিন উইজেট হিসেবে প্রদর্শন করবেন।
এই উইজেটটি আপনার হোমস্ক্রিনে দেখানো টেক্সটের চেয়ে বেশি চ্যালেঞ্জিং। নেটিভ UI কম্পোনেন্ট ব্যবহার করে এটিকে পুনরায় তৈরি করার চেষ্টার চেয়ে ফ্লাটার চার্টটিকে একটি ইমেজ হিসেবে প্রদর্শন করা অনেক বেশি সহজ।
আপনার ফ্লাটার চার্টটিকে একটি PNG ফাইল হিসেবে রেন্ডার করার জন্য আপনার হোম স্ক্রিন উইজেটটি কোড করুন। আপনার হোম স্ক্রিন উইজেটটি সেই ছবিটি প্রদর্শন করতে পারবে।
ডার্ট কোডটি লিখুন
ডার্ট (Dart) অংশে, home_widget প্যাকেজ থেকে renderFlutterWidget মেথডটি যোগ করুন। এই মেথডটি একটি উইজেট, একটি ফাইলের নাম এবং একটি key গ্রহণ করে। এটি ফ্লাটার উইজেটের একটি ইমেজ রিটার্ন করে এবং সেটিকে একটি শেয়ার্ড কন্টেইনারে সেভ করে। আপনার কোডে ইমেজের নামটি দিন এবং নিশ্চিত করুন যে হোম স্ক্রিন উইজেটটি কন্টেইনারটি অ্যাক্সেস করতে পারে। key টি ডিভাইসের লোকাল স্টোরেজে সম্পূর্ণ ফাইল পাথটিকে একটি স্ট্রিং হিসেবে সেভ করে। এর ফলে, ডার্ট কোডে ফাইলের নাম পরিবর্তন হলেও হোম স্ক্রিন উইজেটটি ফাইলটি খুঁজে পেতে পারে।
এই কোডল্যাবের জন্য, lib/article_screen.dart ফাইলের LineChart ক্লাসটি চার্ট হিসেবে ব্যবহৃত হয়েছে। এর build মেথডটি একটি 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 নির্দিষ্ট উইজেটটির কনটেক্সট গ্রহণ করে, যা সেই উইজেটটির সাইজ জানার জন্য প্রয়োজন হয়।
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 সেই ফ্লাটার উইজেটটি থাকে যা ইমেজে রেন্ডার করা হয়। এই ক্ষেত্রে, ফ্লাটার উইজেটটি হলো Center, যার মধ্যে LineChart রয়েছে।
lib/article_screen.dart
class _ArticleScreenState extends State<ArticleScreen> {
...
Center(
// New: Add this key
key: _globalKey,
child: const LineChart(),
),
...
}
- উইজেটটিকে একটি ছবি হিসেবে সংরক্ষণ করে
ব্যবহারকারী যখন floatingActionButton এ ক্লিক করেন, তখন renderFlutterWidget মেথডটি কল করা হয়। এই মেথডটি ফলাফলস্বরূপ প্রাপ্ত PNG ফাইলটিকে "screenshot" নামে শেয়ার্ড কন্টেইনার ডিরেক্টরিতে সংরক্ষণ করে। এছাড়াও, এই মেথডটি ডিভাইস স্টোরেজে ফাইলের নামের কী (key) হিসেবে ছবিটির সম্পূর্ণ পাথ সংরক্ষণ করে।
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 থেকে ফাইলের নামটি নিন।
যখন হোম স্ক্রিন উইজেটটি আপডেট হয়, তখন এটি 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 ভিউ ডার্ট সাইডে তৈরি ফাইলের বিষয়বস্তু থেকে একটি ইমেজ তৈরি করে। এখানে, আপনি ফ্রেমের ৫০% আকারে এটি সেট করবেন।
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
}
পরিবর্তনগুলো পরীক্ষা করুন
পরিবর্তনগুলো পরীক্ষা করার জন্য, Xcode থেকে আপনার Flutter অ্যাপ (Runner) টার্গেট এবং এক্সটেনশন টার্গেট উভয়ই পুনরায় চালান। ছবিটি দেখার জন্য, অ্যাপের যেকোনো একটি আর্টিকেল পেজে যান এবং হোম স্ক্রিন উইজেটটি আপডেট করার জন্য বাটনটি চাপুন।
অ্যান্ড্রয়েড কোড আপডেট করুন
অ্যান্ড্রয়েড কোড আইওএস কোডের মতোই কাজ করে।
-
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 অবজেক্ট তৈরি করে। যদি ইমেজটি আগে থেকেই বিদ্যমান থাকে, তবে ডার্ট কোডটি হোম স্ক্রিন উইজেটে থাকা ইমেজটিকে নতুন ইমেজটি দিয়ে প্রতিস্থাপন করে।
- আপনার অ্যাপটি রিলোড করুন এবং একটি আর্টিকেল স্ক্রিনে যান। ‘আপডেট হোমস্ক্রিন’ চাপুন। হোম স্ক্রিন উইজেটটি চার্টটি প্রদর্শন করবে।
৭. পরবর্তী পদক্ষেপ
অভিনন্দন!
অভিনন্দন, আপনি আপনার ফ্লাটার আইওএস এবং অ্যান্ড্রয়েড অ্যাপের জন্য হোম স্ক্রিন উইজেট তৈরি করতে সফল হয়েছেন!
আপনার ফ্লাটার অ্যাপে কন্টেন্টের সাথে লিঙ্ক করা
ব্যবহারকারী কোথায় ক্লিক করছেন তার উপর নির্ভর করে আপনি তাকে আপনার অ্যাপের একটি নির্দিষ্ট পৃষ্ঠায় নিয়ে যেতে চাইতে পারেন। উদাহরণস্বরূপ, এই কোডল্যাবের নিউজ অ্যাপটিতে, আপনি হয়তো চাইতে পারেন যে ব্যবহারকারী প্রদর্শিত শিরোনামটির সংবাদ নিবন্ধটি দেখুক।
এই ফিচারটি এই কোডল্যাবের আওতার বাইরে। home_widget প্যাকেজের দেওয়া স্ট্রিম ব্যবহার করে হোম স্ক্রিন উইজেট থেকে অ্যাপ চালু হওয়া শনাক্ত করা এবং URL-এর মাধ্যমে হোম স্ক্রিন উইজেট থেকে মেসেজ পাঠানোর উদাহরণ আপনি এখানে খুঁজে পাবেন। আরও জানতে, docs.flutter.dev-এ ডিপ লিঙ্কিং ডকুমেন্টেশন দেখুন।
ব্যাকগ্রাউন্ডে আপনার উইজেট আপডেট করা হচ্ছে
এই কোডল্যাবে, আপনি একটি বাটন ব্যবহার করে হোম স্ক্রিন উইজেটটি আপডেট করেছেন। যদিও পরীক্ষার জন্য এটি ঠিক আছে, প্রোডাকশন কোডে আপনি হয়তো চাইবেন আপনার অ্যাপটি ব্যাকগ্রাউন্ডে হোম স্ক্রিন উইজেটটি আপডেট করুক। হোম স্ক্রিন উইজেটের প্রয়োজনীয় রিসোর্সগুলো আপডেট করার জন্য আপনি ওয়ার্কম্যানেজার প্লাগইন ব্যবহার করে ব্যাকগ্রাউন্ড টাস্ক তৈরি করতে পারেন। আরও জানতে, home_widget প্যাকেজের ব্যাকগ্রাউন্ড আপডেট সেকশনটি দেখুন।
iOS-এর ক্ষেত্রে, আপনি হোম স্ক্রিন উইজেটকে তার UI আপডেট করার জন্য একটি নেটওয়ার্ক রিকোয়েস্ট পাঠাতেও বলতে পারেন। সেই রিকোয়েস্টের শর্ত বা পুনরাবৃত্তি নিয়ন্ত্রণ করতে, টাইমলাইন ব্যবহার করুন। টাইমলাইন ব্যবহার সম্পর্কে আরও জানতে, Apple-এর "একটি উইজেটকে হালনাগাদ রাখা" ডকুমেন্টেশনটি দেখুন।