इस पेज का अनुवाद Cloud Translation API से किया गया है.

आपके Flutter ऐप्लिकेशन में वेबव्यू जोड़ना

1. परिचय

पिछले अपडेट की तारीख: 19-10-2021

WebView Flutter प्लगिन की मदद से, अपने Android या iOS Flutter ऐप्लिकेशन में WebView विजेट जोड़ा जा सकता है. iOS पर WebView विजेट को WKWebView से सपोर्ट मिलता है. वहीं, Android पर WebView विजेट को WebView से सपोर्ट मिलता है. यह प्लगिन, वेब व्यू पर फ़्लटर विजेट रेंडर कर सकता है. उदाहरण के लिए, वेब व्यू के ऊपर ड्रॉप-डाउन मेन्यू रेंडर किया जा सकता है.

आपको क्या बनाना है

इस कोडलैब में, आपको Flutter SDK का इस्तेमाल करके, वेबव्यू की सुविधा वाला मोबाइल ऐप्लिकेशन बनाने का तरीका बताया जाएगा. आपका ऐप्लिकेशन:

WebView में वेब कॉन्टेंट दिखाना
WebView के ऊपर स्टैक किए गए Flutter विजेट दिखाना
पेज लोड होने की प्रोग्रेस के इवेंट पर प्रतिक्रिया करना
WebViewController की मदद से WebView को कंट्रोल करना
NavigationDelegate का इस्तेमाल करके वेबसाइटों को ब्लॉक करना
JavaScript एक्सप्रेशन का आकलन करना
JavascriptChannels की मदद से JavaScript से मिले कॉलबैक हैंडल करना
कुकी सेट करना, हटाना, जोड़ना या दिखाना
ऐसेट, फ़ाइलों या एचटीएमएल वाले स्ट्रिंग से एचटीएमएल लोड और डिसप्ले करना

iPhone सिम्युलेटर पर Flutter ऐप्लिकेशन चल रहा है. इसमें एम्बेड किया गया वेबव्यू, Flutter.dev का होम पेज दिखा रहा है

Android एम्युलेटर पर चल रहा Flutter ऐप्लिकेशन, जिसमें एम्बेड किया गया वेबव्यू दिख रहा है. इसमें Flutter.dev का होम पेज दिख रहा है

आपको क्या सीखने को मिलेगा

इस कोडलैब में, आपको webview_flutter प्लगिन को अलग-अलग तरीकों से इस्तेमाल करने के बारे में जानकारी मिलेगी. जैसे:

webview_flutter प्लगिन को कॉन्फ़िगर करने का तरीका
पेज लोड होने की प्रोग्रेस के इवेंट को मॉनिटर करने का तरीका
पेज नेविगेशन को कंट्रोल करने का तरीका
WebView को इतिहास में पीछे और आगे जाने का निर्देश देने का तरीका
JavaScript का आकलन कैसे करें. इसमें, दिखाए गए नतीजों का इस्तेमाल करना भी शामिल है
JavaScript से Dart कोड को कॉल करने के लिए, कॉलबैक रजिस्टर करने का तरीका
कुकी कैसे प्रबंधित करें
ऐसेट, फ़ाइलों या एचटीएमएल वाले स्ट्रिंग से एचटीएमएल पेज लोड और दिखाने का तरीका

ज़रूरी शर्तें

Android Studio 4.1 या इसके बाद का वर्शन (Android डेवलपमेंट के लिए)
iOS डेवलपमेंट के लिए, Xcode 12 या इसके बाद का वर्शन
Flutter SDK
कोई कोड एडिटर, जैसे कि Android Studio या Visual Studio Code.

2. Flutter डेवलपमेंट एनवायरमेंट सेट अप करना

इस लैब को पूरा करने के लिए, आपको दो सॉफ़्टवेयर की ज़रूरत होगी — Flutter SDK और एडिटर.

इनमें से किसी भी डिवाइस पर कोडलैब चलाया जा सकता है:

आपके पास Android या iOS डिवाइस होना चाहिए, जो आपके कंप्यूटर से कनेक्ट हो और डेवलपर मोड पर सेट हो.
iOS सिम्युलेटर (इसके लिए, Xcode टूल इंस्टॉल करना ज़रूरी है).
Android Emulator (इसे Android Studio में सेट अप करना ज़रूरी है).

3. शुरू करना

Flutter का इस्तेमाल शुरू करना

नया Flutter प्रोजेक्ट बनाने के कई तरीके हैं. Android Studio और Visual Studio Code, दोनों ही इस काम के लिए टूल उपलब्ध कराते हैं. प्रोजेक्ट बनाने के लिए, लिंक किए गए तरीकों का पालन करें या कमांड लाइन टर्मिनल में ये कमांड चलाएं.

$ 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 प्लगिन के लिए एक लाइन है.

Android minSDK को कॉन्फ़िगर करना

Android पर 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
    }

4. Flutter ऐप्लिकेशन में WebView विजेट जोड़ना

इस चरण में, आपको अपने आवेदन में WebView जोड़ना होगा. वेबव्यू, पहले से मौजूद व्यू होते हैं. ऐप्लिकेशन डेवलपर के तौर पर आपके पास यह चुनने का विकल्प होता है कि आपको इन व्यू को अपने ऐप्लिकेशन में कैसे होस्ट करना है. Android पर, आपके पास वर्चुअल डिसप्ले और हाइब्रिड कंपोज़िशन में से कोई एक चुनने का विकल्प होता है. वर्चुअल डिसप्ले, Android के लिए डिफ़ॉल्ट रूप से उपलब्ध होता है. हालांकि, iOS हमेशा हाइब्रिड कंपोज़िशन का इस्तेमाल करता है.

वर्चुअल डिसप्ले और हाइब्रिड कंपोज़िशन के बीच के अंतर के बारे में ज़्यादा जानने के लिए, Platform Views की मदद से, अपने Flutter ऐप्लिकेशन में Android और 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 सिम्युलेटर में चलाएं. शुरुआती वेबव्यू यूआरएल को अपनी वेबसाइट के यूआरएल से बदलें.

$ flutter run

मान लें कि आपके पास सही सिम्युलेटर या एम्युलेटर चल रहा है या कोई फ़िज़िकल डिवाइस अटैच है. ऐप्लिकेशन को अपने डिवाइस पर कंपाइल और डिप्लॉय करने के बाद, आपको कुछ ऐसा दिखना चाहिए:

5. पेज लोड इवेंट सुने जा रहे हैं

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 कॉन्टेंट एरिया के ऊपर पेज लोड होने का इंडिकेटर दिखेगा. यह इंडिकेटर, नेटवर्क की स्थिति और इस बात पर निर्भर करता है कि ब्राउज़र ने उस पेज को कैश मेमोरी में सेव किया है या नहीं जिस पर आपको नेविगेट करना है.

6. WebViewController के साथ काम करना

WebView विजेट, WebViewController की मदद से प्रोग्राम के हिसाब से कंट्रोल करने की सुविधा देता है. इस कंट्रोलर को कॉलबैक के ज़रिए, WebView विजेट बनाने के बाद उपलब्ध कराया जाता है. इस कंट्रोलर के उपलब्ध होने का तरीका एसिंक्रोनस है. इसलिए, यह Dart की एसिंक्रोनस 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
    );
  }
}

ऐप्लिकेशन चलाने पर, कंट्रोल वाला एक वेब पेज दिखना चाहिए:

iPhone सिम्युलेटर में Flutter ऐप्लिकेशन चल रहा है. इसमें एम्बेड किया गया वेबव्यू, Flutter.dev का होम पेज दिखा रहा है. इसमें पिछला पेज, अगला पेज, और पेज को फिर से लोड करने के कंट्रोल दिख रहे हैं

Android इम्यूलेटर पर चल रहा Flutter ऐप्लिकेशन, जिसमें एम्बेड किया गया वेबव्यू दिख रहा है. इसमें Flutter.dev का होम पेज दिख रहा है. साथ ही, पिछले पेज, अगले पेज, और पेज को फिर से लोड करने के कंट्रोल दिख रहे हैं

7. NavigationDelegate की मदद से नेविगेशन को ट्रैक करना

WebView आपके ऐप्लिकेशन को NavigationDelegate, उपलब्ध कराता है. इससे आपका ऐप्लिकेशन, WebView विजेट के पेज नेविगेशन को ट्रैक और कंट्रोल कर पाता है. जब WebView, से नेविगेशन शुरू किया जाता है, तब NavigationDelegate को कॉल किया जाता है. उदाहरण के लिए, जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करता है. NavigationDelegate कॉलबैक का इस्तेमाल करके यह कंट्रोल किया जा सकता है कि WebView नेविगेशन जारी रखे या नहीं.

कस्टम NavigationDelegate रजिस्टर करना

इस चरण में, आपको 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,
          ),
      ],
    );
  }
}

अगले चरण में, आपको मेन्यू में एक आइटम जोड़ना होगा. इससे NavigationDelegate क्लास का इस्तेमाल करके, NavigationDelegate की टेस्टिंग की जा सकेगी.WebViewController यह काम पढ़ने वाले व्यक्ति के लिए है कि वह कॉलबैक के लॉजिक को इस तरह से बढ़ाए कि वह सिर्फ़ YouTube.com पर पूरे पेज के नेविगेशन को ब्लॉक करे. साथ ही, एपीआई के दस्तावेज़ में YouTube के इनलाइन कॉन्टेंट को अब भी अनुमति दे.

8. ऐप्लिकेशन बार में मेन्यू बटन जोड़ना

अगले कुछ चरणों में, आपको AppBar विजेट में एक मेन्यू बटन बनाना होगा. इसका इस्तेमाल JavaScript का आकलन करने, JavaScript चैनल चालू करने, और कुकी मैनेज करने के लिए किया जाता है. कुल मिलाकर, यह मेन्यू वाकई काम का है.

lib/src/menu.dart पर एक नई सोर्स फ़ाइल बनाएं और उसमें यह जानकारी डालें:

आपके Flutter ऐप्लिकेशन में वेबव्यू जोड़ना

1. परिचय

आपको क्या बनाना है

आपको क्या सीखने को मिलेगा

ज़रूरी शर्तें

2. Flutter डेवलपमेंट एनवायरमेंट सेट अप करना

3. शुरू करना

Flutter का इस्तेमाल शुरू करना

WebView Flutter प्लगिन को डिपेंडेंसी के तौर पर जोड़ना

Android minSDK को कॉन्फ़िगर करना

4. Flutter ऐप्लिकेशन में WebView विजेट जोड़ना

स्क्रीन पर वेबव्यू दिखाना

ऐप्लिकेशन चलाना

5. पेज लोड इवेंट सुने जा रहे हैं

अपने ऐप्लिकेशन में पेज लोड इवेंट जोड़ना

6. WebViewController के साथ काम करना

WebView विजेट से WebViewController को ऐक्सेस करना

नेविगेशन कंट्रोल बनाना

AppBar में नेविगेशन कंट्रोल जोड़ना

7. NavigationDelegate की मदद से नेविगेशन को ट्रैक करना

कस्टम NavigationDelegate रजिस्टर करना

8. ऐप्लिकेशन बार में मेन्यू बटन जोड़ना

9. JavaScript का आकलन करना

10. JavaScript चैनलों का इस्तेमाल करना

11. कुकी मैनेज करना

सभी कुकी की सूची पाना

सभी कुकी मिटाएं

कोई कुकी जोड़ना

CookieManager की मदद से कुकी सेट करना

किसी कुकी को हटाना

CookieManager मेन्यू आइटम जोड़ना

CookieManager का इस्तेमाल करना

12. WebView में Flutter ऐसेट, फ़ाइलें, और एचटीएमएल स्ट्रिंग लोड करना

Flutter ऐसेट लोड करना

डिवाइस पर मौजूद फ़ाइल लोड करना

एचटीएमएल स्ट्रिंग लोड करें

मेन्यू आइटम जोड़ना

13. सब हो गया!