كيفية اضافة خاصية شرح لعناصر تطبيقك في فلاتر | Show Case Widget in flutter

كيفية اضافة خاصية شرح لعناصر تطبيقك في فلاتر | Show Case Widget in flutter

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

تُستخدم الآن أفضل أطر تطوير التطبيقات عبر الأنظمة الأساسية من قبل شركات تطوير تطبيقات الأجهزة المحمولة الرائدة في الولايات المتحدة ، بما في ذلك PhoneGap و Xamarin و Flutter و React Native ، من بين آخرين.

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

نظرًا لأنه يتعين على المطورين القيام بقدر أقل من الترميز ، فإنه يُعرف أيضًا باسم لغة تطوير التطبيقات الصديقة للمطورين. على الرغم من أن Flutter يجعل إنشاء تطبيقات الأجهزة المحمولة أمرًا بسيطًا ، إلا أن له مزايا وعيوب.

add Show Case Widget dep

dependencies:

  showcaseview: ^1.1.5

Explain the elements in your application flutter

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

ui.dart

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

class FullPage extends StatefulWidget {
  const FullPage({Key? key}) : super(key: key);

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage> {
  final keyOne = GlobalKey();
  final keyTwo = GlobalKey();
  final keyThere = GlobalKey();
  final keyFour = GlobalKey();

  @override
  void initState() {
    super.initState();
    
    WidgetsBinding.instance.addPostFrameCallback(
        (timeStamp) => ShowCaseWidget.of(context)!.startShowCase([
              keyOne,
              keyTwo,
              keyThere,
              keyFour,
            ]));
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          // you can use this
          Showcase(
              key: keyOne,
              description: 'This is search',
              descTextStyle: const TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),
              contentPadding: const EdgeInsets.all(10),
              showcaseBackgroundColor: Colors.red,
              child:
                  IconButton(onPressed: () {}, icon: const Icon(Icons.search))),
          // or use this .
          CustomShowCase(
              title: 'this is home',
              keyGlobal: keyTwo,
              child: IconButton(
                  onPressed: () {
                    print('home');
                  },
                  icon: const Icon(Icons.home))),
        ],
      ),
      floatingActionButton: CustomShowCase(
          title: 'this is floatingActionButton',
          keyGlobal: keyThere,
          child: FloatingActionButton(
              onPressed: () {}, child: const Icon(Icons.abc))),
      body: Column(
        children: [
          CustomShowCase(
              title: 'this is Container',
              keyGlobal: keyFour,
              child: Container(
                width: double.infinity,
                height: 100,
                color: Colors.orange,
              ))
        ],
      ),
    );
  }
}

// custom widget
class CustomShowCase extends StatelessWidget {
  final Widget child;
  final String title;
  final GlobalKey keyGlobal;

  const CustomShowCase({
    Key? key,
    required this.title,
    required this.keyGlobal,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) => Showcase(
        // keys
        key: keyGlobal,
        description: title,
        // style text .
        descTextStyle:
            const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        // padding
        contentPadding: const EdgeInsets.all(15),
        // animation
        disableAnimation: false,
        // color 
        showcaseBackgroundColor: Colors.red,
        // background screen
        overlayColor: Colors.black,
        // Arrow
        showArrow: true,
        // padding item
        overlayPadding: const EdgeInsets.all(10),
        // Opacity
        overlayOpacity: 0.7,
        child: child,
      );
}

how to run Show Case screen

main.dart

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: ShowCaseWidget(builder:Builder(builder:(_)=> const FullPage()),
      autoPlay: true,
        autoPlayDelay: const Duration(seconds: 3),
        onFinish:()=> print('Done'),
        onComplete: (index,key)=> print(' $index is finish'),
      ),
    );
  }
}

android sdk manager تحميل flutter developers applications create app android android studio mac