এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

আপনার ফ্লটার অ্যাপে WebView যোগ করা হচ্ছে

1. ভূমিকা

শেষ আপডেট: ২০২১-১০-১৯

WebView Flutter প্লাগইনের সাহায্যে আপনি আপনার Android বা iOS Flutter অ্যাপে একটি WebView উইজেট যোগ করতে পারেন। iOS-এ WebView উইজেটটি WKWebView দ্বারা সমর্থিত, অন্যদিকে Android-এ WebView উইজেটটি WebView দ্বারা সমর্থিত। প্লাগইনটি ওয়েব ভিউতে Flutter উইজেটগুলি রেন্ডার করতে পারে। উদাহরণস্বরূপ, ওয়েব ভিউতে একটি ড্রপ-ডাউন মেনু রেন্ডার করা সম্ভব।

তুমি কী তৈরি করবে

এই কোডল্যাবে, আপনি ধাপে ধাপে একটি মোবাইল অ্যাপ তৈরি করবেন যেখানে Flutter SDK ব্যবহার করে একটি WebView থাকবে। আপনার অ্যাপটি:

WebView ওয়েব কন্টেন্ট প্রদর্শন করুন
WebView স্ট্যাক করা ফ্লাটার উইজেটগুলি প্রদর্শন করুন
পৃষ্ঠা লোডের অগ্রগতির ইভেন্টগুলিতে প্রতিক্রিয়া জানান
WebViewController এর মাধ্যমে WebView নিয়ন্ত্রণ করুন
NavigationDelegate ব্যবহার করে ওয়েবসাইট ব্লক করুন
জাভাস্ক্রিপ্ট এক্সপ্রেশন মূল্যায়ন করুন
JavascriptChannels সাহায্যে জাভাস্ক্রিপ্ট থেকে কলব্যাক পরিচালনা করুন
কুকিজ সেট করুন, সরান, যোগ করুন বা দেখান
HTML ধারণকারী সম্পদ, ফাইল বা স্ট্রিং থেকে HTML লোড এবং প্রদর্শন করুন

আইফোন সিমুলেটরটি একটি ফ্লটার অ্যাপ চালাচ্ছে যেখানে একটি এমবেডেড ওয়েবভিউ রয়েছে যা Flutter.dev হোমপেজ দেখায়।

অ্যান্ড্রয়েড এমুলেটর একটি ফ্লাটার অ্যাপ চালাচ্ছে যেখানে একটি এমবেডেড ওয়েবভিউ রয়েছে যা Flutter.dev হোমপেজ দেখাচ্ছে।

তুমি কি শিখবে

এই কোডল্যাবে আপনি শিখবেন কিভাবে webview_flutter প্লাগইনটি বিভিন্ন উপায়ে ব্যবহার করতে হয়, যার মধ্যে রয়েছে:

কিভাবে webview_flutter প্লাগইন কনফিগার করবেন
পৃষ্ঠা লোডের অগ্রগতির ইভেন্টগুলি কীভাবে শুনবেন
পৃষ্ঠা নেভিগেশন কীভাবে নিয়ন্ত্রণ করবেন
WebView তার ইতিহাসের মাধ্যমে পিছনে এবং সামনে যেতে কীভাবে নির্দেশ দেবেন
জাভাস্ক্রিপ্ট কীভাবে মূল্যায়ন করবেন, যার মধ্যে ফিরে আসা ফলাফল ব্যবহার করাও অন্তর্ভুক্ত।
জাভাস্ক্রিপ্ট থেকে ডার্ট কোডে কল করার জন্য কলব্যাক কীভাবে নিবন্ধন করবেন
কুকিজ কীভাবে পরিচালনা করবেন
HTML ধারণকারী সম্পদ, ফাইল বা স্ট্রিং থেকে HTML পৃষ্ঠাগুলি কীভাবে লোড এবং প্রদর্শন করবেন

তোমার যা লাগবে

অ্যান্ড্রয়েড স্টুডিও ৪.১ বা তার পরবর্তী সংস্করণ (অ্যান্ড্রয়েড ডেভেলপমেন্টের জন্য)
এক্সকোড ১২ বা তার পরবর্তী সংস্করণ (আইওএস ডেভেলপমেন্টের জন্য)
Flutter SDK সম্পর্কে
একটি কোড এডিটর, যেমন অ্যান্ড্রয়েড স্টুডিও , অথবা ভিজ্যুয়াল স্টুডিও কোড ।

2. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন

এই ল্যাবটি সম্পূর্ণ করার জন্য আপনার দুটি সফটওয়্যারের প্রয়োজন — ফ্লটার এসডিকে এবং একটি এডিটর ।

আপনি এই ডিভাইসগুলির যেকোনো একটি ব্যবহার করে কোডল্যাব চালাতে পারেন:

আপনার কম্পিউটারের সাথে সংযুক্ত একটি বাস্তব Android বা iOS ডিভাইস এবং ডেভেলপার মোডে সেট করা আছে।
iOS সিমুলেটর (Xcode টুল ইনস্টল করার প্রয়োজন)।
অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ প্রয়োজন)।

৩. শুরু করা

ফ্লাটার দিয়ে শুরু করা

নতুন ফ্লটার প্রজেক্ট তৈরির বিভিন্ন উপায় রয়েছে, যার মধ্যে অ্যান্ড্রয়েড স্টুডিও এবং ভিজ্যুয়াল স্টুডিও কোড উভয়ই এই কাজের জন্য টুলিং প্রদান করে। হয় একটি প্রজেক্ট তৈরি করতে লিঙ্ক করা পদ্ধতিগুলি অনুসরণ করুন, অথবা একটি সহজ কমান্ড লাইন টার্মিনালে নিম্নলিখিত কমান্ডগুলি কার্যকর করুন।

$ flutter create --platforms=android,ios webview_in_flutter
Creating project webview_in_flutter...
Resolving dependencies in `webview_in_flutter`...
Downloading packages...
Got dependencies in `webview_in_flutter`.
Wrote 74 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd webview_in_flutter
  $ flutter run

Your application code is in webview_in_flutter/lib/main.dart.

নির্ভরতা হিসেবে WebView Flutter প্লাগইন যোগ করা হচ্ছে

একটি Flutter অ্যাপে অতিরিক্ত ক্ষমতা যোগ করা Pub প্যাকেজ ব্যবহার করে সবচেয়ে ভালোভাবে সম্পন্ন করা হয়। এই কোডল্যাবে আপনি আপনার প্রোজেক্টে webview_flutter প্লাগইন যোগ করবেন। টার্মিনালে নিম্নলিখিত কমান্ডগুলি চালান।

$ cd webview_in_flutter
$ flutter pub add webview_flutter
Resolving dependencies...
Downloading packages...
  collection 1.18.0 (1.19.0 available)
  leak_tracker 10.0.5 (10.0.7 available)
  leak_tracker_flutter_testing 3.0.5 (3.0.7 available)
  material_color_utilities 0.11.1 (0.12.0 available)
+ plugin_platform_interface 2.1.8
  string_scanner 1.2.0 (1.3.0 available)
  test_api 0.7.2 (0.7.3 available)
+ webview_flutter 4.9.0
+ webview_flutter_android 3.16.7
+ webview_flutter_platform_interface 2.10.0
+ webview_flutter_wkwebview 3.15.0
Changed 5 dependencies!
6 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

আপনি যদি আপনার pubspec.yaml পরীক্ষা করেন, তাহলে আপনি এখন দেখতে পাবেন যে এটিতে webview_flutter প্লাগইনের জন্য নির্ভরতা বিভাগে একটি লাইন রয়েছে।

অ্যান্ড্রয়েড মিনএসডিকে কনফিগার করুন

অ্যান্ড্রয়েডে webview_flutter প্লাগইন ব্যবহার করার জন্য আপনাকে minSDK কে 20 এ সেট করতে হবে। আপনার android/app/build.gradle ফাইলটি নিম্নরূপ পরিবর্তন করুন:

অ্যান্ড্রয়েড/অ্যাপ/বিল্ড.গ্রেডল

android {
    //...

    defaultConfig {
        applicationId = "com.example.webview_in_flutter"
        minSdk = 20                                         // Modify this line
        targetSdk = flutter.targetSdkVersion
        versionCode = flutterVersionCode.toInteger()
        versionName = flutterVersionName
    }

৪. ফ্লাটার অ্যাপে ওয়েবভিউ উইজেট যোগ করা

এই ধাপে আপনি আপনার অ্যাপ্লিকেশনে একটি WebView যোগ করবেন। WebViews হল বিল্ট-ইন ভিউ হোস্ট করা হয় এবং একজন অ্যাপ ডেভেলপার হিসেবে আপনার অ্যাপে এই বিল্ট-ইন ভিউগুলি কীভাবে হোস্ট করবেন তা বেছে নেওয়ার অধিকার আপনার আছে। Android-এ আপনার কাছে Android-এর জন্য ডিফল্ট ভার্চুয়াল ডিসপ্লে এবং হাইব্রিড কম্পোজিশনের মধ্যে একটি পছন্দ করার সুযোগ রয়েছে। তবে, iOS সর্বদা হাইব্রিড কম্পোজিশন ব্যবহার করে।

ভার্চুয়াল ডিসপ্লে এবং হাইব্রিড কম্পোজিশনের মধ্যে পার্থক্য সম্পর্কে বিস্তারিত আলোচনার জন্য, প্ল্যাটফর্ম ভিউ সহ আপনার ফ্লটার অ্যাপে নেটিভ অ্যান্ড্রয়েড এবং iOS ভিউ হোস্টিং সম্পর্কিত ডকুমেন্টেশনটি পড়ুন।

স্ক্রিনে একটি ওয়েবভিউ স্থাপন করা হচ্ছে

lib/main.dart এর বিষয়বস্তু নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

iOS অথবা Android এ এটি চালানোর সময় আপনার ডিভাইসে একটি পূর্ণ-ব্লিড ব্রাউজার উইন্ডো হিসেবে WebView দেখাবে, যার অর্থ হল ব্রাউজারটি আপনার ডিভাইসে পূর্ণ-স্ক্রিনে কোনও ধরণের সীমানা বা মার্জিন ছাড়াই প্রদর্শিত হবে। স্ক্রোল করার সময়, আপনি পৃষ্ঠার কিছু অংশ লক্ষ্য করবেন যা কিছুটা অদ্ভুত দেখাতে পারে। এর কারণ হল JavaScript অক্ষম করা আছে এবং flutter.dev সঠিকভাবে রেন্ডার করার জন্য JavaScript প্রয়োজন।

অ্যাপটি চালানো হচ্ছে

iOS অথবা Android-এ Flutter অ্যাপটি চালান এবং একটি Webview দেখুন, যা flutter.dev ওয়েবসাইট প্রদর্শন করে। বিকল্পভাবে, একটি Android এমুলেটর অথবা একটি iOS সিমুলেটরে অ্যাপটি চালান। প্রাথমিক WebView URLটি প্রতিস্থাপন করতে দ্বিধা করবেন না, উদাহরণস্বরূপ, আপনার নিজস্ব ওয়েবসাইট।

$ flutter run

ধরে নিচ্ছি যে আপনার ডিভাইসে অ্যাপটি কম্পাইল এবং স্থাপন করার পরে, আপনার কাছে উপযুক্ত সিমুলেটর বা এমুলেটর চলছে, অথবা একটি ফিজিক্যাল ডিভাইস সংযুক্ত আছে, তাহলে আপনি নিম্নলিখিতগুলির মতো কিছু দেখতে পাবেন:

৫. পৃষ্ঠা লোড ইভেন্টগুলি শোনা

WebView উইজেটটি বেশ কয়েকটি পৃষ্ঠা লোড অগ্রগতি ইভেন্ট প্রদান করে, যা আপনার অ্যাপ শুনতে পারে। WebView পৃষ্ঠা লোড চক্রের সময় তিনটি ভিন্ন পৃষ্ঠা লোড ইভেন্ট চালানো হয়: onPageStarted , onProgress , এবং onPageFinished । এই ধাপে আপনি একটি পৃষ্ঠা লোড সূচক বাস্তবায়ন করবেন। বোনাস হিসেবে, এটি দেখাবে যে আপনি WebView সামগ্রী এলাকার উপর Flutter সামগ্রী রেন্ডার করতে পারেন।

আপনার অ্যাপে পৃষ্ঠা লোড ইভেন্ট যোগ করা হচ্ছে

lib/src/web_view_stack.dart এ একটি নতুন সোর্স ফাইল তৈরি করুন এবং এটি নিম্নলিখিত বিষয়বস্তু দিয়ে পূরণ করুন:

lib/src/web_view_stack.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
  const WebViewStack({super.key});

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
      ))
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: controller,
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

এই কোডটি WebView উইজেটটিকে একটি Stack এ মোড়ানো হয়েছে, যখন পৃষ্ঠা লোড শতাংশ 100% এর কম হয় তখন শর্তসাপেক্ষে WebView LinearProgressIndicator দিয়ে ওভারলে করে। যেহেতু এটি সময়ের সাথে সাথে পরিবর্তিত প্রোগ্রাম স্টেট সম্পর্কিত, আপনি এই স্টেটটিকে StatefulWidget এর সাথে যুক্ত একটি State ক্লাসে সংরক্ষণ করেছেন।

এই নতুন WebViewStack উইজেটটি ব্যবহার করতে, আপনার lib/main.dart নিম্নরূপ পরিবর্তন করুন:

lib/main.dart

import 'package:flutter/material.dart';

import 'src/web_view_stack.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebViewStack(),
    );
  }
}

যখন আপনি অ্যাপটি চালাবেন, তখন আপনার নেটওয়ার্কের অবস্থার উপর নির্ভর করে এবং আপনি যে পৃষ্ঠাটিতে নেভিগেট করছেন সেটি ব্রাউজারটি ক্যাশে করেছে কিনা তার উপর নির্ভর করে, আপনি WebView কন্টেন্ট এরিয়ার উপরে একটি পৃষ্ঠা লোডিং সূচক দেখতে পাবেন।

৬. ওয়েবভিউকন্ট্রোলারের সাথে কাজ করা

WebView উইজেটটি একটি WebViewController দিয়ে প্রোগ্রাম্যাটিক নিয়ন্ত্রণ সক্ষম করে। WebView উইজেট তৈরির পর কলব্যাকের মাধ্যমে এই কন্ট্রোলারটি উপলব্ধ করা হয়। এই কন্ট্রোলারের অ্যাসিঙ্ক্রোনাস প্রকৃতি এটিকে ডার্টের অ্যাসিঙ্ক্রোনাস Completer<T> ক্লাসের জন্য একটি প্রধান প্রার্থী করে তোলে।

নিম্নরূপ lib/src/web_view_stack.dart আপডেট করুন:

lib/src/web_view_stack.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
  const WebViewStack({required this.controller, super.key}); // MODIFY

  final WebViewController controller;                        // ADD

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;
  // REMOVE the controller that was here

  @override
  void initState() {
    super.initState();
    // Modify from here...
    widget.controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
      ),
    );
    // ...to here.
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller,                     // MODIFY
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

WebViewStack উইজেট এখন আশেপাশের উইজেটে তৈরি একটি কন্ট্রোলার ব্যবহার করে। এটি WebViewWidget এর কন্ট্রোলারটিকে অ্যাপের অন্যান্য অংশের সাথে শেয়ার করতে সক্ষম করবে।

একটি কার্যকরী WebView থাকা এক জিনিস, কিন্তু পৃষ্ঠার ইতিহাসের মাধ্যমে পিছনে এবং সামনে নেভিগেট করতে সক্ষম হওয়া এবং পৃষ্ঠাটি পুনরায় লোড করা, সংযোজনের একটি কার্যকর সেট হবে। সৌভাগ্যক্রমে, একটি WebViewController দিয়ে আপনি আপনার অ্যাপে এই কার্যকারিতাটি যোগ করতে পারেন।

lib/src/navigation_controls.dart এ একটি নতুন সোর্স ফাইল তৈরি করুন এবং এটি নিম্নলিখিতগুলি দিয়ে পূরণ করুন:

lib/src/navigation_controls.dart সম্পর্কে

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class NavigationControls extends StatelessWidget {
  const NavigationControls({required this.controller, super.key});

  final WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () async {
            final messenger = ScaffoldMessenger.of(context);
            if (await controller.canGoBack()) {
              await controller.goBack();
            } else {
              messenger.showSnackBar(
                const SnackBar(content: Text('No back history item')),
              );
              return;
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.arrow_forward_ios),
          onPressed: () async {
            final messenger = ScaffoldMessenger.of(context);
            if (await controller.canGoForward()) {
              await controller.goForward();
            } else {
              messenger.showSnackBar(
                const SnackBar(content: Text('No forward history item')),
              );
              return;
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.replay),
          onPressed: () {
            controller.reload();
          },
        ),
      ],
    );
  }
}

এই উইজেটটি নির্মাণের সময় এর সাথে শেয়ার করা WebViewController ব্যবহার করে, যাতে ব্যবহারকারী IconButton সিরিজের মাধ্যমে WebView নিয়ন্ত্রণ করতে পারে।

আপডেটেড WebViewStack এবং নতুন তৈরি NavigationControls হাতে পেয়ে, এখন সময় এসেছে আপনার সবকিছু একসাথে একটি আপডেটেড WebViewApp এ স্থাপন করার। এখানেই আমরা শেয়ার্ড WebViewController তৈরি করব। এই অ্যাপে Widget tree-এর উপরে WebViewApp থাকায়, এই স্তরে এটি তৈরি করা যুক্তিসঙ্গত।

নিম্নরূপ lib/main.dart ফাইল আপডেট করুন:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';  // ADD

import 'src/navigation_controls.dart';                  // ADD
import 'src/web_view_stack.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  // Add from here...
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }
  // ...to here.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
        // Add from here...
        actions: [
          NavigationControls(controller: controller),
        ],
        // ...to here.
      ),
      body: WebViewStack(controller: controller),       // MODIFY
    );
  }
}

অ্যাপটি চালানোর সময় নিয়ন্ত্রণ সহ একটি ওয়েব পৃষ্ঠা প্রকাশিত হওয়া উচিত:

আইফোন সিমুলেটর একটি ফ্লাটার অ্যাপ চালাচ্ছে যেখানে একটি এমবেডেড ওয়েবভিউ রয়েছে যা Flutter.dev হোমপেজকে পূর্ববর্তী পৃষ্ঠা, পরবর্তী পৃষ্ঠা এবং পৃষ্ঠা পুনরায় লোড নিয়ন্ত্রণ সহ দেখায়।

অ্যান্ড্রয়েড এমুলেটর একটি ফ্লাটার অ্যাপ চালাচ্ছে যেখানে একটি এমবেডেড ওয়েবভিউ রয়েছে যা Flutter.dev হোমপেজকে পূর্ববর্তী পৃষ্ঠা, পরবর্তী পৃষ্ঠা এবং পৃষ্ঠা পুনরায় লোড নিয়ন্ত্রণ সহ দেখায়।

৭. নেভিগেশনডেলিগেটের সাহায্যে নেভিগেশনের উপর নজর রাখা

WebView আপনার অ্যাপে একটি NavigationDelegate, যা আপনার অ্যাপকে WebView উইজেটের পৃষ্ঠা নেভিগেশন ট্র্যাক এবং নিয়ন্ত্রণ করতে সক্ষম করে। যখন WebView, উদাহরণস্বরূপ যখন একজন ব্যবহারকারী একটি লিঙ্কে ক্লিক করেন, তখন NavigationDelegate কল করা হয়। NavigationDelegate কলব্যাক ব্যবহার করে WebView নেভিগেশনের সাথে এগিয়ে যায় কিনা তা নিয়ন্ত্রণ করা যেতে পারে।

একটি কাস্টম নেভিগেশনডেলিগেট নিবন্ধন করুন

এই ধাপে, আপনি YouTube.com- এ নেভিগেশন ব্লক করার জন্য একটি NavigationDelegate কলব্যাক নিবন্ধন করবেন। মনে রাখবেন, এই সরলীকৃত বাস্তবায়নটি ইনলাইন YouTube কন্টেন্টকেও ব্লক করে, যা বিভিন্ন Flutter API ডকুমেন্টেশন পৃষ্ঠাগুলিতে প্রদর্শিত হয়।

lib/src/web_view_stack.dart নিম্নরূপ আপডেট করুন:

lib/src/web_view_stack.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
  const WebViewStack({required this.controller, super.key});

  final WebViewController controller;

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;

  @override
  void initState() {
    super.initState();
    widget.controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
        // Add from here...
        onNavigationRequest: (navigation) {
          final host = Uri.parse(navigation.url).host;
          if (host.contains('youtube.com')) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(
                  'Blocking navigation to $host',
                ),
              ),
            );
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
        // ...to here.
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller,
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

পরবর্তী ধাপে, আপনি WebViewController ক্লাস ব্যবহার করে আপনার NavigationDelegate পরীক্ষা করার জন্য একটি মেনু আইটেম যুক্ত করবেন। এটি পাঠকের জন্য একটি অনুশীলন হিসাবে রেখে দেওয়া হয়েছে যাতে কলব্যাকের যুক্তিটি আরও উন্নত করা যায় যাতে কেবল YouTube.com-এ পূর্ণ পৃষ্ঠার নেভিগেশন ব্লক করা যায় এবং API ডকুমেন্টেশনে ইনলাইন YouTube কন্টেন্টের অনুমতি দেওয়া যায়।

৮. অ্যাপবারে একটি মেনু বোতাম যোগ করা

পরবর্তী কয়েকটি ধাপে, আপনি AppBar উইজেটে একটি মেনু বোতাম তৈরি করবেন যা জাভাস্ক্রিপ্ট মূল্যায়ন, জাভাস্ক্রিপ্ট চ্যানেল চালু এবং কুকিজ পরিচালনা করতে ব্যবহৃত হবে। সব মিলিয়ে, এটি সত্যিই একটি কার্যকর মেনু।

lib/src/menu.dart এ একটি নতুন সোর্স ফাইল তৈরি করুন এবং এটি নিম্নলিখিতগুলি দিয়ে পূরণ করুন:

1. ভূমিকা

তুমি কী তৈরি করবে

তুমি কি শিখবে

তোমার যা লাগবে

2. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন

৩. শুরু করা

ফ্লাটার দিয়ে শুরু করা

নির্ভরতা হিসেবে WebView Flutter প্লাগইন যোগ করা হচ্ছে

অ্যান্ড্রয়েড মিনএসডিকে কনফিগার করুন

৪. ফ্লাটার অ্যাপে ওয়েবভিউ উইজেট যোগ করা

স্ক্রিনে একটি ওয়েবভিউ স্থাপন করা হচ্ছে

অ্যাপটি চালানো হচ্ছে

৫. পৃষ্ঠা লোড ইভেন্টগুলি শোনা

আপনার অ্যাপে পৃষ্ঠা লোড ইভেন্ট যোগ করা হচ্ছে

৬. ওয়েবভিউকন্ট্রোলারের সাথে কাজ করা

ওয়েবভিউ উইজেট থেকে ওয়েবভিউকন্ট্রোলার অ্যাক্সেস করা

নেভিগেশন নিয়ন্ত্রণ তৈরি করা

অ্যাপবারে নেভিগেশন নিয়ন্ত্রণ যোগ করা হচ্ছে

৭. নেভিগেশনডেলিগেটের সাহায্যে নেভিগেশনের উপর নজর রাখা

একটি কাস্টম নেভিগেশনডেলিগেট নিবন্ধন করুন

৮. অ্যাপবারে একটি মেনু বোতাম যোগ করা

৯. জাভাস্ক্রিপ্ট মূল্যায়ন করা

১০. জাভাস্ক্রিপ্ট চ্যানেলের সাথে কাজ করা

১১. কুকিজ পরিচালনা করা

সকল কুকিজের একটি তালিকা পান

সমস্ত কুকি সাফ করুন

একটি কুকি যোগ করুন

CookieManager দিয়ে কুকি সেট করা

একটি কুকি সরান

কুকি ম্যানেজার মেনু আইটেম যোগ করা হচ্ছে

কুকি ম্যানেজার ব্যবহার করা

১২. ওয়েবভিউতে ফ্লটার অ্যাসেট, ফাইল এবং HTML স্ট্রিং লোড করুন

ফ্লাটার সম্পদ লোড করুন

স্থানীয় ফাইল লোড করুন

HTML স্ট্রিং লোড করুন

মেনু আইটেমগুলি যোগ করুন

১৩. সব শেষ!