شرح إنشاء صفحة onBoarding في flutter تظهر في البدايه

شرح إنشاء صفحة onBoarding في flutter

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

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

كود صفحة onBoarding بفلاتر

سوف نقوم هنا بعمل list بمحتويات الصور وعمل constructor لها , ونقوم بإستخدام هذة الاكواد داخل widget باسم onPageChanged لكي تستطيع التمرير بينهم وايضا قمنا بعمل زر في نهاية الصفحة لينقلك بين الصفحات المختلفة وايضا كلمة skip داخل appbar بالاعلى لكي تتخطي هذة الصفحات , واستخدمنا SmoothPageIndicator لكي تقوم نضع علامات للتنقل بين الصفحات ويتم استخدام الامر spacer بالاسفل لكي يفضل بين العناصر .


class BoardingModel {
  final String? image;
  final String? title;
  final String? body;

  BoardingModel({
    required this.image,
    required this.title,
    required this.body,
});

}

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

  @override
  State<OnBoardingScreen> createState() => _OnBoardingScreenState();
}

class _OnBoardingScreenState extends State<OnBoardingScreen> {
  var pageController = PageController();

  List<BoardingModel> boarding = [
    BoardingModel(image:'assets/images/onboarding1.jpg',
        title: 'Screen One',
        body: 'Shop app is first Flutter App with GC.'),
    BoardingModel(image:'assets/images/onboarding2.png',
        title: 'Screen Two',
        body: 'Shop app is Second Flutter App with GC.'),
    BoardingModel(image:'assets/images/onboarding3.png',
        title: 'Screen Three',
        body: 'Shop app is third Flutter App with GC.'),
  ];

  bool isLast = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('onboarding' , style: TextStyle(fontFamily: 'Jannah'),),
        centerTitle: true,
        actions: [
TextButton(onPressed: ()=> skip(), child: Text('Skip' , style: TextStyle(color: colorDefault),))
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Column(
          children: [
            Expanded(
              child: PageView.builder(
                itemBuilder: (context , index)=> buildBordingItem(boarding[index]),
                itemCount: boarding.length,
                controller: pageController,
                physics: BouncingScrollPhysics(),
                onPageChanged: (int index) {
                  if (index == boarding.length -1) {
                    setState(() {
                      isLast = true;
                    });
                  } else {
                    setState(() {
                      isLast = false;
                    });
                  }
                },
              ),
            ),
            SizedBox(height: 30,),
            Row(children: [
              
              // smooth_page_indicator: ^1.0.0+2
              SmoothPageIndicator(controller: pageController,
                  count: boarding.length,
              effect: ExpandingDotsEffect(
                dotColor: Colors.grey,
                dotWidth: 10,
                spacing: 5,
                expansionFactor: 5,
                dotHeight: 10,
                activeDotColor:colorDefault,
              ),),
              Spacer(),
              FloatingActionButton(onPressed: (){
                if (isLast) {
                  skip();
                }else {
                  pageController.nextPage(
                    duration: Duration(
                      milliseconds: 750,
                    ),
                    curve: Curves.fastLinearToSlowEaseIn,
                  );
                }
              } ,
                child: Icon(Icons.arrow_forward_ios),),
            ],)
          ],
        ),
      ),
    );
  }

  Widget buildBordingItem(BoardingModel model) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(child: Image(image: AssetImage('${model.image}') ,fit: BoxFit.fitHeight, width: double.infinity,)),
      SizedBox(height: 30,),
      Text('${model.title}' , style: TextStyle(fontSize: 35)),
      SizedBox(height: 10,),
      Text('${model.body}' , style: TextStyle(fontSize: 18),),
    ],
  );

  void skip() {
    navigateFinish(context , LoginScreen());
    
    // void navigateFinish(context , widget)=>
    // Navigator.pushAndRemoveUntil(context, MaterialPageRoute(
    //    builder: (context)=> widget) , (Route<dynamic> route)=> false,);

  }
}

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