إنشاء onBoarding مع انميشن اثناء الانتقال من صفحة للاخرى

إنشاء onBoarding مع انميشن اثناء الانتقال من صفحة للاخرى

إنشاء onBoarding مع انميشن اثناء الانتقال من صفحة للاخرى

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


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



add package

concentric_transition


How to use concentric_transition in flutter

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


How to use concentric_transition in flutter

ui.dart


List<dynamic> images = [
  {
    "images":
    "https://cdni.iconscout.com/illustration/premium/thumb/halloween-4126006-3449385.png"
  },
  {
    "images":
    "https://images.unsplash.com/photo-1661961110218-35af7210f803?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
  },
  {
    "images":
    "https://images.unsplash.com/photo-1666457087960-e1ac12e6cc5e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
  }
];

// Text of list
List<dynamic> Textsub = [
  {"Text": "Happy Hallo Ween !"},
  {"Text": "Which night"},
  {"Text": "Special time near you... "}
];

List<dynamic> Textin = [
  {"Text": "Halloween’s origins date back to the ancient Celtic festival of Samhain"},
  {"Text": "This day marked the end of summer and the harvest and the beginning of the dark"},
  {"Text": "In addition to causing trouble and damaging crops"}
];

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

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    print(images.length);
    return Scaffold(
      backgroundColor: Colors.black,
      body: ConcentricPageView(
            verticalPosition: 0.85,
            onChange: (index) {
                if (index == 3) {
                    Navigator.of(context).push(MaterialPageRoute(builder: (context) => GeeCoders()));
                }
            },
            nextButtonBuilder: (context) => Padding(
            padding: const EdgeInsets.only(left: 3), // visual center
            child:
              Icon(Icons.navigate_next,
                size: MediaQuery.of(context).size.width * 0.08,),

            ),
            colors: <Color>[Colors.deepOrange, Colors.orange, Colors.red],
            itemBuilder: (index) {
              int pageIndex = (index % images.length);
              int TextIndex = (index % Textsub.length);
              int Textinline = (index % Textin.length);
              return SafeArea(
                child: Column(
                  children: [
                    SizedBox(
                      height: 10.0,
                    ),
                    CircleAvatar(
                      backgroundImage:
                      NetworkImage(images[pageIndex]['images']),
                      maxRadius: 180.0,
                    ),
                    SizedBox(
                      height: 20.0,
                    ),
                    Text(Textsub[TextIndex]['Text'],style:TextStyle(
                      color: Colors.white,
                      fontSize: 30.0,
                    )),
                    SizedBox(
                      height: 10.0,
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 20.0),
                      child: Text(Textin[Textinline]['Text'],style:TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      )),
                    ),
                  ],
                ),
              );
            }),
    );
  }

}

تعليقات