كيفية فتح نافذة من موقع خارجي في تطبيق flutter

ستحتاج إلى استخدام حزمة (package) تسمى webview_flutter، وتتيح لك عرض صفحات الويب داخل تطبيقك بشكل مدمج كالتالي:

أولاً عليك بتثبيت الحزمة  بفتح ملف pubspec.yaml في مشروع Flutter وأضف الحزمة التالية تحت قسم dependencies:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0

ضمن ملف الكود الخاص بالشاشة التي ترغب في استخدام الـ WebView بها، عليك بإضافة استيراد للحزمة:

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

 الآن استخدام ويدجت (Widget) WebView لعرض الصفحة من الموقع الخارجي:

class ExternalLoginPage extends StatelessWidget {
  final String externalLoginUrl = "https://example.com/login"; // رابط صفحة الدخول الخارجية

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('External Login Page'),
      ),
      body: WebView(
        initialUrl: externalLoginUrl,
        javascriptMode: JavascriptMode.unrestricted,
        onPageFinished: (String url) {
          // هذا الدالة ستتم استدعائها عندما يتم تحميل الصفحة بالكامل
        },
      ),
    );
  }
}

بعد لذلك نأتي للعودة من الصفحة الخارجية بعد الانتهاء من عملية تسجيل الدخول، ونستخدم الملاحظات (pop) بواسطة Navigator للعودة إلى الشاشة السابقة، وعند العودة إلى الشاشة السابقة، تستطيع حفظ بيانات الدخول في حالة الحاجة لاستخدامها في التطبيق.

ولحفظ بيانات الدخول في التطبيق بحيث لا يتطلب منك تسجيل الدخول في كل مرة، اعتمد على الحزمة المحلية (local storage) مثل shared_preferences لتخزين بيانات صغيرة مثل الاسم والحالة المسجلة.

وقم بتثبيت حزمة shared_preferences عبر ملف pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0
  shared_preferences: ^2.0.0

ثم استخدمها لحفظ بيانات الدخول في التطبيق. عندما تعود من صفحة الدخول الخارجية وتقرر الاحتفاظ بالمعلومات المسجلة،  بحفظها في الـ shared_preferences:

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

class ExternalLoginPage extends StatelessWidget {
  final String externalLoginUrl = "https://example.com/login"; // رابط صفحة الدخول الخارجية

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('External Login Page'),
      ),
      body: WebView(
        initialUrl: externalLoginUrl,
        javascriptMode: JavascriptMode.unrestricted,
        onPageFinished: (String url) {
          // هذا الدالة ستتم استدعائها عندما يتم تحميل الصفحة بالكامل
          // هنا يمكنك التحقق من الصفحة التي تم تحميلها واستخدامها لحفظ البيانات المطلوبة
          if (url == externalLoginUrl) {
            // هنا يمكنك استخدام الـ SharedPreferences لحفظ بيانات الدخول
            saveLoginData("John Doe"); // افترضنا أن الاسم هو "John Doe"
            // بعد حفظ البيانات، قم بالعودة إلى الشاشة السابقة
            Navigator.pop(context);
          }
        },
      ),
    );
  }

  void saveLoginData(String username) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('username', username);
    // يمكنك هنا حفظ المزيد من البيانات مثل كلمة المرور إن لزم الأمر
  }
}

وعند الحاجة إلى بيانات الدخول مرة أخرى، بإمكانك استرجاعها من shared_preferences بدون الحاجة لتسجيل الدخول كل مرة:

void getLoginData() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String username = prefs.getString('username');
  // يمكنك استخدام الاسم المحفوظ هنا بشكل طبيعي في التطبيق
}

ياخي الف شكر ليك واحتاجك في كم سؤال لو امكن و زمنك بسمح و شكرا ليك تاني ما قصرت

السلام عليكم حصلت هذا الخطاء مرفق صورة واسف علي الازعاج