تصميم لصفحة الاتصال في flutter بشكل احترافي | Flutter contact page design professionally

تصميم لصفحة الاتصال في flutter بشكل احترافي | Flutter contact page design professionally

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

هناك حاجة إلى لغات البرمجة Swift أو Objective-C وبيئات التطوير المتكاملة Xcode أو AppCode لإنشاء تطبيق iOS للجوال. هناك حاجة إلى لغات البرمجة مثل Kotlin أو Java ، بالإضافة إلى بيئات التطوير المتكاملة مثل Android Studio أو Eclipse ، لإنشاء تطبيق Android للجوال. بالإضافة إلى ذلك ، يمكن للمستخدمين الحصول على تطبيقات أصلية من خلال متاجر تطبيقات محددة. لمستخدمي iOS ، إنه متجر تطبيقات Apple ، ولمستخدمي Android ، إنه Google Play. من أشهر أمثلة تطبيقات الهاتف المحمول المحلية Spotify و WhatsApp و LinkedIn. نأمل أن تكون هذه القطعة قد ساعدتك في فهم أفضل تطبيق للجوّال الأصلي.

تصميم لصفحة الاتصال في flutter بشكل احترافي

add packages :

  avatar_glow: ^2.0.2

  animated_text_kit: ^4.2.2

How to create call page with animation in Flutter project

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

ui.dart

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

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

class _ChatPageState extends State<ChatPage> {
  final String image =
      'https://images.unsplash.com/photo-1666586364671-f4907c79b1dd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80';

  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Colors.black,
        body: Container(
          width: double.infinity,
          height: double.infinity,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(image),
              fit: BoxFit.cover,
            ),
          ),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter,
                      colors: [
                    Colors.black.withOpacity(1),
                    Colors.black.withOpacity(0.3),
                    Colors.black.withOpacity(0),
                  ])),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Column(
                    children: [
                      AvatarGlow(
                        startDelay: Duration(milliseconds: 0),
                        glowColor: Colors.white,
                        endRadius: 80,
                        duration: Duration(milliseconds: 2000),
                        repeatPauseDuration: Duration(milliseconds: 0),
                        showTwoGlows: true,
                        repeat: true,
                        child: Container(
                          width: 100,
                          height: 100,
                          clipBehavior: Clip.hardEdge,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(80),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.black12,
                                  blurRadius: 10,
                                  offset: Offset(0, 10),
                                ),
                              ]),
                          child: Image.network(
                            image,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      SizedBox(height: 10),
                      Text('geecoders',
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold)),
                      SizedBox(height: 8),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('Calling',
                              style: TextStyle(color: Colors.grey.shade200)),
                          DefaultTextStyle(
                            style: TextStyle(
                              fontSize: 12.0,
                            ),
                            child: AnimatedTextKit(
                              animatedTexts: [
                                TyperAnimatedText('.....',
                                    speed: Duration(milliseconds: 500)),
                              ],
                              isRepeatingAnimation: true,
                              repeatForever: true,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  MaterialButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    color: Colors.red,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(80),
                    ),
                    padding: EdgeInsets.zero,
                    minWidth: 70,
                    height: 70,
                    child: Icon(Icons.call_end, color: Colors.white, size: 30),
                  )
                ],
              ),
            ),
          ),
        ),
      );
}