تصميم صفحة تسجيل دخول احترافية في Flutter مع animation
في هذا الكود سوف نقوم بعمل صفحة Login مختلفة قليلا عن الصفحات التي قدمناها لكم سابقا فهذة الصفحة سوف نقوم باستخدام المؤثرات و الانميشن بداخلها ليتم تغيير الصورة الموجوده بالاعلى اكثر من مره خلال فترة فتح الصفحة وايضا يوجد بعض المميزات التي يمكنك ان تستفاد منها من هذة الصفحة مثل الtextfiled و الازرار وتناسق الالوان في التطبيق < حيث ان في هذا القسم ننشر لكم الكثير من الاكواد البرمجية التي من شانها مساعتدكم في تطوير مستواكم البرمجي بشكل كبير .
Flutter عبارة عن مجموعة أدوات لواجهة المستخدم من مقدمه من العملاق Google والتي تتيح لك إنشاء تطبيقات جذابة مبنية محليًا للجوال والويب وسطح المكتب والأجهزة المضمنة بقاعدة شفرة واحدة وهذا ما يميزها عن غيرها "- الرفرفة عبارة عن مجموعة من تطوير برامج مفتوحة المصدر (SDK) يتم صيانتها بشكل أساسي بواسطة تُستخدم Google لإنشاء تطبيقات عبر الأنظمة الأساسية لأنظمة Android و iOS و Linux و Mac و Windows والويب. يتيح Flutter للمطور إنشاء واجهة مستخدم مرنة وأنيقة للغاية مع السماح بإعادة استخدام تعريفات منطق العمل وواجهة المستخدم عبر العديد من المنصات. إنها مشابهة لأطر تطوير أخرى عبر الأنظمة الأساسية في العديد من الجوانب ولكن لديها بعض الاختلافات الرئيسية.
كل شيء بدءًا من تطبيق الجذر ذي المستوى الأعلى وصولاً إلى أصغر عناصر واجهة المستخدم لديك هو عنصر واجهة مستخدم في Flutter. يمكن إعادة استخدام عناصر واجهة المستخدم عدة مرات حسب الحاجة ، ويتم إضافة كل عنصر إلى شجرة عناصر واجهة المستخدم التي يتم استخدامها لإنتاج كل إطار من عرض التطبيق الخاص بك. تتكون غالبية الأدوات التي أنشأها مطور التطبيق من عناصر واجهة مستخدم أخرى ، واستراتيجية تكوين عنصر واجهة المستخدم هذه ، على غرار الطريقة التي تبني بها مواقع ويب React واجهة المستخدم الخاصة بها من المكونات ، تسمح بالمرونة والاتساق وإعادة استخدام الكود والأداء السريع.
بينما أستمر في مناقشة ميزات Flutter ، أتيت من العمل مع نماذج Xamarin.
كود صفحة الLogin بflutter
في هذه الصفحة اعتمدنا على عدم استخدام اي مكتبات خارجيه فقط استخدام الwidget الموجوده بداخل flutter وقمان بعمل animation للصور لكي تتغير بين كل فتره والاخرى وتحسين شكل text Field من اجل تحسين الشكل العام وايضا تكون لديك فكرة بالذي قمنا به كنوع من التغيير , وهذا التصميم من تكويد احد الاشخاص وليس من فريقنا ولكن نحن نفضل ان نقدم لكم بين كل فتره والاخرى افكار لتحسين التصميم الخاص بكم وهذا هو الهدف في النهايه .
login.dart
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class NewTask extends StatefulWidget {
@override
_NewTaskState createState() => _NewTaskState();
}
class _NewTaskState extends State<NewTask> {
int activeIndex = 0;
@override
void initState() {
Timer.periodic(Duration(seconds: 5), (timer) {
setState(() {
activeIndex++;
if (activeIndex == 4)
activeIndex = 0;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Column(
children: [
SizedBox(height: 30,),
Container(
height: 250,
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
child: AnimatedOpacity(
opacity: activeIndex == 0 ? 1 : 0,
duration: Duration(seconds: 1,),
curve: Curves.linear,
child: Image.network('https://ouch-cdn2.icons8.com/As6ct-Fovab32SIyMatjsqIaIjM9Jg1PblII8YAtBtQ/rs:fit:784:784/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNTg4/LzNmMDU5Mzc0LTky/OTQtNDk5MC1hZGY2/LTA2YTkyMDZhNWZl/NC5zdmc.png', height: 400,),
),
),
Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
child: AnimatedOpacity(
opacity: activeIndex == 1 ? 1 : 0,
duration: Duration(seconds: 1),
curve: Curves.linear,
child: Image.network('https://ouch-cdn2.icons8.com/vSx9H3yP2D4DgVoaFPbE4HVf6M4Phd-8uRjBZBnl83g/rs:fit:784:784/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNC84/MzcwMTY5OS1kYmU1/LTQ1ZmEtYmQ1Ny04/NTFmNTNjMTlkNTcu/c3Zn.png', height: 400,),
),
),
Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
child: AnimatedOpacity(
opacity: activeIndex == 2 ? 1 : 0,
duration: Duration(seconds: 1),
curve: Curves.linear,
child: Image.network('https://ouch-cdn2.icons8.com/fv7W4YUUpGVcNhmKcDGZp6pF1-IDEyCjSjtBB8-Kp_0/rs:fit:784:784/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMTUv/ZjUzYTU4NDAtNjBl/Yy00ZWRhLWE1YWIt/ZGM1MWJmYjBiYjI2/LnN2Zw.png', height: 400,),
),
),
Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
child: AnimatedOpacity(
opacity: activeIndex == 3 ? 1 : 0,
duration: Duration(seconds: 1),
curve: Curves.linear,
child: Image.network('https://ouch-cdn2.icons8.com/AVdOMf5ui4B7JJrNzYULVwT1z8NlGmlRYZTtg1F6z9E/rs:fit:784:767/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvOTY5/L2NlMTY1MWM5LTRl/ZjUtNGRmZi05MjQ3/LWYzNGQ1MzhiOTQ0/Mi5zdmc.png', height: 400,),
),
)
]
),
),
SizedBox(height: 40,),
TextField(
cursorColor: Colors.black,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0.0),
labelText: 'Email',
hintText: 'Username or e-mail',
labelStyle: TextStyle(
color: Colors.black,
fontSize: 14.0,
fontWeight: FontWeight.w400,
),
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 14.0,
),
prefixIcon: Icon(Icons.person, color: Colors.black, size: 18, ),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey.shade200, width: 2),
borderRadius: BorderRadius.circular(10.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 1.5),
borderRadius: BorderRadius.circular(10.0),
),
),
),
SizedBox(height: 20,),
TextField(
cursorColor: Colors.black,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0.0),
labelText: 'Password',
hintText: 'Password',
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 14.0,
),
labelStyle: TextStyle(
color: Colors.black,
fontSize: 14.0,
fontWeight: FontWeight.w400,
),
prefixIcon: Icon(Icons.keyboard, color: Colors.black, size: 18, ),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey.shade200, width: 2),
borderRadius: BorderRadius.circular(10.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 1.5),
borderRadius: BorderRadius.circular(10.0),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {},
child: Text('Forgot Password?', style: TextStyle(color: Colors.black, fontSize: 14.0, fontWeight: FontWeight.w400),),
)
],
),
SizedBox(height: 30,),
MaterialButton(
onPressed: (){},
height: 45,
color: Colors.black,
child: Text("Login", style: TextStyle(color: Colors.white, fontSize: 16.0),),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
SizedBox(height: 30,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Don\'t have an account?', style: TextStyle(color: Colors.grey.shade600, fontSize: 14.0, fontWeight: FontWeight.w400),),
TextButton(
onPressed: () {},
child: Text('Register', style: TextStyle(color: Colors.blue, fontSize: 14.0, fontWeight: FontWeight.w400),),
)
],
),
],
),
),
)
);
}
}
لمزيد من الاكواد والشروحات في تقنية فلاتر او في تطوير تبطيقات الجوال يمكنكم مشاهدة باقي المقالات على الموقع .
