اعلام تقني : كيفية استخدام Webview في Flutter؟

عند إنشاء تطبيقات Flutter، يمكنك استخدام العديد من المكونات الإضافية. كل مكون إضافي له ميزاته الخاصة التي يقدمها داخل التطبيق. تتيح لك المكونات الإضافية التواصل مع الكود الخاص بالمنصة للوصول إلى ميزات تلك المنصة. ومن المثير للاهتمام أن المطورين من مجتمع Flutter يساهمون أيضًا مع بعضهم البعض ويشاركون المكونات الإضافية مع بعضهم البعض. في هذه المدونة، ستتعرف على كيفية استخدام webview في Flutter.

هناك العديد من الميزات التي نحتاج إلى إضافتها إلى أي تطبيق لجعله أكثر فائدة. عليك أن تضع في اعتبارك أن إضافة المزيد والمزيد من الميزات إلى التطبيق لا يجعله مفيدًا. قد يواجه تطبيقك معدل ارتداد هائل إذا قمت بحشوه بميزات مختلفة لم تكن ضرورية.

إن إضافة عرض ويب إلى تطبيق Flutter مفيد لأنه يمنح التحكم في تجربة المستخدم والتنقل بمساعدة الكائنات المفوضة. لا يكون عرض الويب مفيدًا إلا عندما تريد تحكمًا متزايدًا ومتقدمًا في واجهة مستخدم التطبيق. تساعدك عناصر التحكم المتقدمة هذه على الاستفادة من صفحات الويب المختلفة في بيئة مخصصة.

استمر في البقاء معنا لأننا سنزودك بمصدر كود عرض الويب Flutter في نهاية هذه المدونة. سيقودك الكود إلى إنشاء عرض ويب في شركة تطوير تطبيقات Flutter https://flutterdesk.com/ لنظامي التشغيل Android وiOS.

دعونا ننتقل إلى معرفة ما هو webview في Flutter، وكيفية استخدامه، وبعض الأمثلة عليه.

ما هو WebView في Flutter؟

إن Webview في تطبيق Flutter عبارة عن عرض أصلي للمنصة يتيح لك دمج محتوى موقع الويب في واجهة مستخدم التطبيق. فهو ببساطة يضيف صفحات موقع الويب إلى تطبيقك الذي (عند فتحه) يعرض صفحة الويب فوق واجهة التطبيق. وطالما أنك تتصفح موقع الويب هذا، فيمكنك إغلاقه بنقرة واحدة فقط والعودة إلى واجهة مستخدم التطبيق على الفور.

تعرض عروض الويب محتوى HTML وCSS وJavaScript إلى جانب العرض الأصلي لتطبيقك. هناك العديد من الأشياء التي تحتاج إلى تعلمها لإضافة عرض ويب في تطبيقات Flutter. يتضمن ذلك التعامل مع التدفق أثناء تلقي عمليات الاستدعاء من عرض الويب إلى طبقة التطبيق الأصلي والعكس صحيح. ومن المثير للاهتمام أن عرض الويب يحول تلقائيًا أي أرقام هواتف إلى روابط هواتف متوفرة على محتوى الويب. لذلك عندما ينقر المستخدم على رقم الهاتف، يقوم التطبيق بتشغيل برنامج الاتصال الهاتفي ويطلب الرقم.

دعنا ننتقل إلى إنشاء عرض ويب في تطبيقات Flutter.

كيفية إضافة عرض ويب في تطبيق Flutter لكل من Android و iOS؟

لن يبدو إنشاء عرض ويب في تطبيقات Flutter أمرًا صعبًا بالنسبة لك بعد الحصول على فكرة من منشور المدونة هذا. ومن المثير للاهتمام أن الكود متعدد الأنظمة الأساسية، لذا يمكنك إعادة استخدامه لكل من نظامي التشغيل iOS وAndroid. الكود المعطى

هذا هو كود مصدر عرض الويب Flutter لك حتى تتمكن من إنشاء عرض ويب في التطبيقات بسهولة.

قم بتغيير عنوان URL في _url النهائي لتضمين عرض الويب الخاص بموقع الويب الخاص بك.

import 'dart:async';
import 'dart:io';
import 'package:connectivity/connectivity.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      theme: ThemeData(
        primaryColor: const Color(0xffFFAA02),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}
class _HomePageState extends State<HomePage> {
  bool _isInternet = false;
  Connectivity? _connectivity;
  StreamSubscription? _subscription;
  WebViewController? _webViewController;
  final _controller = Completer<WebViewController>();
  final _url = 'https://sparkosol.com';
  final Set<Factory<OneSequenceGestureRecognizer>> _gSet = Set()
    ..addAll([
      Factory<VerticalDragGestureRecognizer>(
              () => VerticalDragGestureRecognizer()),
      Factory<ScaleGestureRecognizer>(() => ScaleGestureRecognizer()),
      Factory<PanGestureRecognizer>(() => PanGestureRecognizer()),
    ]);
  void _checkInternet() {
    _connectivity = Connectivity();
    _subscription = _connectivity!.onConnectivityChanged.listen((result) {
      if (result == ConnectivityResult.wifi ||
          result == ConnectivityResult.mobile) {
        _isInternet = true;
      } else {
        _isInternet = false;
      }
      setState(() {});
    });
  }
  @override
  void initState() {
    super.initState();
    _checkInternet();
  }
  @override
  void dispose() {
    _subscription!.cancel();
    super.dispose();
  }
  Future<bool> _showDialog() async {
    return (await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Are You Sure?'),
          content: Text('Do you want to exit App'),
          actions: [
            FlatButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: Text('No'),
            ),
            FlatButton(
              onPressed: () => exit(0),
              child: Text('Yes'),
            ),
          ],
        );
      },
    )) ??
        false;
  }
  Future<bool> _onBackPressed(context) async {
    try {
      if (_controller != null) {
        if (await _webViewController!.canGoBack()) {
          _webViewController!.goBack();
          return false;
        } else {
          return await _showDialog();
        }
      }
    } catch (e) {
      return await _showDialog();
    }
    return false;
  }
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return _onBackPressed(context);
      },
      child: Scaffold(
        body: SafeArea(
          child: _isInternet
              ? WebView(
            // userAgent:
            //     'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36',
            initialUrl: _url,
            gestureRecognizers: _gSet,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (controller) {
              _webViewController = controller;
              _controller.complete(controller);
            },
            gestureNavigationEnabled: true,
          )
              : Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.warning_amber_sharp,
                  color: Colors.red,
                  size: 50.0,
                ),
                Text(
                  'No Internet Connection',
                  style: TextStyle(color: Colors.red, fontSize: 16.0),
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: NavigationControls(_controller.future),
      ),
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class NavigationControls extends StatelessWidget {
  const NavigationControls(this._webViewControllerFuture)
      : assert(_webViewControllerFuture != null);
  final Future<WebViewController> _webViewControllerFuture;
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<WebViewController>(
      future: _webViewControllerFuture,
      builder:
          (BuildContext context, AsyncSnapshot<WebViewController> snapshot) {
        final bool webViewReady =
            snapshot.connectionState == ConnectionState.done;
        final WebViewController controller = snapshot.data!;
        return FloatingActionButton(
          backgroundColor: Color(0xffFFAA02),
          child: const Icon(Icons.replay),
          onPressed: !webViewReady
              ? null
              : () {
            controller.reload();
          },
        );
      },
    );
  }
}

نتائج

مثال على عرض الويب في Flutter

ربما تكون قد شاهدت بعض التطبيقات التي تتطلب تسجيل الدخول باستخدام تطبيقات تابعة لجهات خارجية. في هذه التطبيقات، تظهر طبقة عرض ويب مضمنة عند النقر فوق زر تسجيل الدخول. تتيح لك هذه الطبقة المضمنة الوصول إلى عنوان URL معين وتصفحه. هذا ما يسمى عرض الويب في التطبيق.

مثال آخر على عرض الويب في التطبيق هو عندما تستخدم بوابات دفع تابعة لجهات خارجية لإجراء عمليات شراء عبر الإنترنت. الشاشة التي تظهر على واجهة المستخدم الخاصة بالتطبيق هي مثال على عرض الويب في Flutter.

خاتمة

كان هذا كل ما يتعلق بدليل سريع لإضافة عرض ويب في تطبيقات Flutter. ومن المدهش أنه يمكنك أيضًا إجراء بعض التلاعبات في حزمة webview_flutter. يمكن أن تكون هذه التلاعبات إضافة ميزات التكبير وأشرطة التقدم وما إلى ذلك.

لا شك أن WebView تقدم فوائد من خلال توفير تحكم محسّن في التطبيق، كما أن هناك عددًا أقل من العيوب أيضًا. فهي لا توفر الوظائف الكاملة لمحتوى الويب الذي تقوم بتضمينه في التطبيق. تتمتع الواجهة الأصلية بتحكم محدد في جميع المكونات، لذا فهي تبذل قصارى جهدها عندما يتعلق الأمر بالأداء.

اعلام تقني

بحث باسم الموضوع المطلوب

كيفية استخدام Webview في Flutter؟

جميع الاقسام