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

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

১. ভূমিকা

সর্বশেষ হালনাগাদ: ২০২১-১০-১৯

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

আপনি যা তৈরি করবেন

এই কোডল্যাবে, আপনি ফ্লাটার এসডিকে ব্যবহার করে একটি ওয়েবভিউ সমন্বিত একটি মোবাইল অ্যাপ ধাপে ধাপে তৈরি করবেন। আপনার অ্যাপটি যা করবে:

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

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

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

আপনি যা শিখবেন

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

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

আপনার যা যা লাগবে

অ্যান্ড্রয়েড স্টুডিও ৪.১ বা তার পরবর্তী সংস্করণ (অ্যান্ড্রয়েড ডেভেলপমেন্টের জন্য)
Xcode 12 বা তার পরবর্তী সংস্করণ (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 প্লাগইনটি যোগ করবেন। টার্মিনালে নিম্নলিখিত কমান্ডগুলো চালান।

$ 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 ফাইলটি পরীক্ষা করেন, তাহলে দেখতে পাবেন যে এর dependencies সেকশনে webview_flutter প্লাগইনটির জন্য একটি লাইন রয়েছে।

অ্যান্ড্রয়েড minSDK কনফিগার করুন

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

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 উইজেট যোগ করা

এই ধাপে আপনি আপনার অ্যাপ্লিকেশনে একটি WebView যোগ করবেন। WebView হলো হোস্ট করা বিল্ট-ইন ভিউ, এবং একজন অ্যাপ ডেভেলপার হিসেবে আপনার অ্যাপে এই বিল্ট-ইন ভিউগুলো কীভাবে হোস্ট করবেন, সেই বিষয়ে আপনার সিদ্ধান্ত নেওয়ার সুযোগ থাকে। অ্যান্ড্রয়েডে আপনার কাছে ভার্চুয়াল ডিসপ্লে (যা অ্যান্ড্রয়েডের ডিফল্ট) এবং হাইব্রিড কম্পোজিশনের মধ্যে যেকোনো একটি বেছে নেওয়ার সুযোগ রয়েছে। তবে, 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 একটি ফুল ব্লিড ব্রাউজার উইন্ডো হিসেবে প্রদর্শিত হবে, যার অর্থ হলো ব্রাউজারটি আপনার ডিভাইসে কোনো ধরনের বর্ডার বা মার্জিন ছাড়াই ফুলস্ক্রিনে দেখানো হবে। স্ক্রল করার সময়, আপনি পৃষ্ঠার কিছু অংশ লক্ষ্য করতে পারেন যা কিছুটা অদ্ভুত লাগতে পারে। এর কারণ হলো জাভাস্ক্রিপ্ট নিষ্ক্রিয় করা আছে এবং flutter.dev সঠিকভাবে রেন্ডার করার জন্য জাভাস্ক্রিপ্ট প্রয়োজন।

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

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

$ flutter run

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

৫. পৃষ্ঠা লোড হওয়ার ইভেন্ট শোনা

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

আপনার অ্যাপে পেজ লোড ইভেন্ট যোগ করা

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 এর মধ্যে রেখেছে এবং পেজ লোড পার্সেন্টেজ ১০০%-এর কম হলে শর্তসাপেক্ষে 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 কন্টেন্ট এরিয়ার উপরে একটি পেজ লোডিং ইন্ডিকেটর দেখতে পাবেন।

৬. WebViewController নিয়ে কাজ করা

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 তৈরি করব। এই অ্যাপে 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 হোমপেজটি দেখানো হচ্ছে।

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

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

WebView আপনার অ্যাপকে একটি NavigationDelegate, যা আপনার অ্যাপকে WebView উইজেটের পেজ নেভিগেশন ট্র্যাক ও নিয়ন্ত্রণ করতে সক্ষম করে। যখন WebView, যেমন যখন কোনো ব্যবহারকারী একটি লিঙ্কে ক্লিক করেন, তখন NavigationDelegate কল করা হয়। WebView নেভিগেশনটি চালিয়ে যাবে কি না, তা নিয়ন্ত্রণ করতে NavigationDelegate কলব্যাকটি ব্যবহার করা যেতে পারে।

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

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

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-এ সম্পূর্ণ পৃষ্ঠা নেভিগেশন ব্লক করতে এবং এপিআই ডকুমেন্টেশনে থাকা ইনলাইন ইউটিউব কন্টেন্টকে অনুমতি দেওয়ার জন্য কলব্যাকের লজিকটি বর্ধিত করার কাজটি পাঠকের জন্য অনুশীলন হিসেবে রেখে দেওয়া হলো।

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

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

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

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

১. ভূমিকা

আপনি যা তৈরি করবেন

আপনি যা শিখবেন

আপনার যা যা লাগবে

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

৩. শুরু করা

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

ওয়েবভিউ ফ্লাটার প্লাগইনকে একটি ডিপেন্ডেন্সি হিসেবে যোগ করা

অ্যান্ড্রয়েড minSDK কনফিগার করুন

৪. ফ্লাটার অ্যাপে WebView উইজেট যোগ করা

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

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

৫. পৃষ্ঠা লোড হওয়ার ইভেন্ট শোনা

আপনার অ্যাপে পেজ লোড ইভেন্ট যোগ করা

৬. WebViewController নিয়ে কাজ করা

WebView উইজেট থেকে WebViewController অ্যাক্সেস করা

ক্রাফটিং নেভিগেশন কন্ট্রোল

অ্যাপবারে নেভিগেশন কন্ট্রোল যোগ করা

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

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

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

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

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

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

সমস্ত কুকির একটি তালিকা পান

সমস্ত কুকি মুছে ফেলুন

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

CookieManager ব্যবহার করে একটি কুকি সেট করা

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

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

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

১২. WebView-তে Flutter অ্যাসেট, ফাইল এবং HTML স্ট্রিং লোড করুন।

ফ্লাটার অ্যাসেট লোড করুন

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

এইচটিএমএল স্ট্রিং লোড করুন

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

১৩. সব হয়ে গেছে!