شرح كيفية عرض تفاصيل الرابط المرسل في flutter

Ahmed Mahmoud

اخر تحديث :

شرح كيفية عرض تفاصيل الرابط المرسل في flutter

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

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

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

add package

dependencies:
flutter_link_previewer: ^3.0.1

link previewer in Flutter

بعد تركيب الاضافة السابقة سوف تلاحظ ظهور امكانية لاستخدام LinkPreview وهيا تكون عباره عن مستعرض لعرض الرابط للمستخدم , وتم من خلالها ارسال مجموعه من الروابط في List وتم عرضها , يمكنك استخدام خاصية if للتعرف اذا كان النص عباره عن رابط ام لا واذا كان عباره عن رابط قم باستخدام LinkPreview واذا لم يكن رابط فيمكنك التخلى عن استخدام هذه الخاصية لتوفر مساحة في المعالجه الخاصه بالتطبيق الخاص بك ولكي لا يشغل مساحه كبيره بدون اي فائده .

link.dart

class _PasswordFieldState extends State<PasswordField> {
  Map<String, PreviewData> datas = {};

  List<String> get urls => const [
    'github.com/flyerhq',
    'https://thereverseland.com',
    'https://geecoders.com',
    'https://www.youtube.com',
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text(
          'Sneaker',
          style: TextStyle(
              color: Colors.black, fontSize: 28, fontStyle: FontStyle.italic),
        ),
        centerTitle: true,
        elevation: 0.1,
        backgroundColor: Colors.white,
        actions: [
          IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.shopping_cart,
                color: Colors.deepPurpleAccent,
              ))
        ],
      ),
      // https://models.babylonjs.com/boombox.glb
      body: ListView.builder(
        itemCount: urls.length,
        itemBuilder: (context, index) => Align(
          alignment: Alignment.centerLeft,
          child: Container(
            key: ValueKey(urls[index]),
            margin: const EdgeInsets.all(16),
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(20),
              ),
              color: Color(0xfff7f7f8),
            ),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(
                Radius.circular(20),
              ),
              child: LinkPreview(
                enableAnimation: true,
                onPreviewDataFetched: (data) {
                  setState(() {
                    datas = {
                      ...datas,
                      urls[index]: data,
                    };
                  });
                },
                previewData: datas[urls[index]],
                text: urls[index],
                width: MediaQuery.of(context).size.width,
              ),
            ),
          ),
        ),
      ),
    );
  }
}