تصميم واجهة تطبيق messanger facebook بإستخدام flutter
واحد من التصاميم المهمه التي عليك التعامل معها وفهمها جيدا في الفلاتر بشكل كبير وهي التعامل مع الويدجت ولذلك نقوم بتنزيل الكثير من الاكواد والشروحات في الويدجت وفيهذا الدرس تحديدا سوف نقوم بعمل تصميم لواجهة تطبيق ماسنجر في فلاتر وهذا التصميم واحد من التصميمات التي عليها اقبال كبير من طرف المستخدمين في تعلم كيفية انشائها والتعامل معها وهذا ما سوف نتناوله في هذا الدرس .
تعتبر لغة dart مخصصه ل flutter و فلاتر مخصصة لتطوير و صناعة تطبيقات اندرويد او الايفون ونحن نعمل على تقديم شرح لكل من يريد تعلم دارت و برمجة و تطوير التطبيقات ios , android , web او غيرها ويمكنك تحميل حزمة sdk من خلال الانتقال الى الموقع الخاص بهم وعمل download وتثبيته والبدء في انشاء اول app او برنامج لك وسوف نعمل على تقديم دورة لعمل العديد من أفضل التطبيقات وكل شيئ تقريبا حول هذة اللغه وتقديم لكم كتاب في الدارت لتطوير من نفسك حيث يوجد الكثير من كتب development ولكن سوف نقدم لكم افضل كتاب عربي في تعلم الدارت والفلاتر
ما المميز في إطار العمل الخاص بفلاتر
يمكنك عمل تطبيق خاص بك و الـ apps التي يتم كتابها باستخدام language dart تعمل على مختلف المنصات ويمكنك البحث في جوجل عن طريق الانتقال الى google والبحث لماذا بناء التبيطقات بفلاتر ويوجد شركة او العديد من الشركات تهتم ب كيفية العمل بفلاتر وال ui لانه تستطيع من خلال flutter تطوير العديد من التطبيقات بكود واحد بالعربي او الانجليزي لكي تكون البداية لديك قوية ويمكنك الاستعانه بي المصدر ال مستخدم من موقع فلاتر .
تصميم شكل واجهى الماسنجر في فلاتر
سوف نستخدم في هذا الدرس الكثير من الويدجت والتعامل معها بشكل كبير وفي اكثر من مكان وهذا يعد افضل طريقة للفهم , وايضا الامر لا يقتصر على هذا التطبيق وحسب بل حاول دائما ان تشاهد تصاميم على الانترنت وحاول ان تقوم بتصميمها بنفسك او حتى مشاهدة اكواد في flutter مختلفه لكي تتعود على اللغه وعلى كيفية التصميم بداخلها والامر ليس بالصعب بل يحتاج منك الى استمراريه في التعلم والتطوير في اللغه .
الكود السابق
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.grey[900],
title:
Row(
children: [
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage('https://cdn.dribbble.com/users/13754/screenshots/10514046/media/75036ca28a43caf66b984a250bd1b39b.png?compress=1&resize=400x300'),
// backgroundImage: NetworkImage(''),
),
SizedBox(width: 13,),
Text("Chat" , style: TextStyle(fontSize: 18 , color: Colors.white),),
],
),
actions: [
IconButton(onPressed: (){},
icon: CircleAvatar(
radius: 17,
backgroundColor: Colors.black,
child: Icon(Icons.camera_alt, color: Colors.white, size: 16,),
)),
IconButton(onPressed: (){},
icon: CircleAvatar(
radius: 17,
backgroundColor: Colors.black,
child: Icon(Icons.edit, color: Colors.white, size: 16,),
)),
],
),
body:
Padding(
padding: const EdgeInsets.all(15.0),
// scroll horizontal
child: Column(
children: [
SizedBox(height: 10,),
Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(15) , color: Colors.grey[700]),
child: Row(
children: [
Icon(Icons.search),
Text("search",)
],
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
Container(
width: 60,
padding: EdgeInsets.symmetric(vertical: 15),
child: Column(
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd ,
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://cdn.dribbble.com/users/2407/screenshots/7319211/media/fea17aec16213441b38f1e56379cc14b.png?compress=1&resize=400x300'),
),
CircleAvatar(
radius: 8,
backgroundColor: Colors.grey[900],
),
CircleAvatar(
radius: 7,
backgroundColor: Colors.green[300],
),
],
),
SizedBox(height: 10,),
Container(
padding: EdgeInsetsDirectional.only(start: 5),
child: Text("Ahmed mahmoud",style: TextStyle(color: Colors.white) , maxLines: 2 , overflow: TextOverflow.ellipsis, )),
],
),
),
SizedBox(width: 15,),
Container(
width: 60,
padding: EdgeInsets.symmetric(vertical: 15),
child: Column(
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd ,
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://cdn.dribbble.com/users/2407/screenshots/7319211/media/fea17aec16213441b38f1e56379cc14b.png?compress=1&resize=400x300'),
),
CircleAvatar(
radius: 8,
backgroundColor: Colors.grey[900],
),
CircleAvatar(
radius: 7,
backgroundColor: Colors.red[300],
),
],
),
SizedBox(height: 10,),
Container(
padding: EdgeInsetsDirectional.only(start: 5),
child: Text("Ahmed mahmoud",style: TextStyle(color: Colors.white) , maxLines: 2 , overflow: TextOverflow.ellipsis, )),
],
),
),SizedBox(width: 15,),
Container(
width: 60,
padding: EdgeInsets.symmetric(vertical: 15),
child: Column(
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd ,
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://cdn.dribbble.com/users/2407/screenshots/7319211/media/fea17aec16213441b38f1e56379cc14b.png?compress=1&resize=400x300'),
),
CircleAvatar(
radius: 8,
backgroundColor: Colors.grey[900],
),
CircleAvatar(
radius: 7,
backgroundColor: Colors.green[300],
),
],
),
SizedBox(height: 10,),
Container(
padding: EdgeInsetsDirectional.only(start: 5),
child: Text("Ahmed mahmoud",style: TextStyle(color: Colors.white) , maxLines: 2 , overflow: TextOverflow.ellipsis, )),
],
),
),SizedBox(width: 15,),
Container(
width: 60,
padding: EdgeInsets.symmetric(vertical: 15),
child: Column(
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd ,
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://cdn.dribbble.com/users/2407/screenshots/7319211/media/fea17aec16213441b38f1e56379cc14b.png?compress=1&resize=400x300'),
),
CircleAvatar(
radius: 8,
backgroundColor: Colors.grey[900],
),
CircleAvatar(
radius: 7,
backgroundColor: Colors.green[300],
),
],
),
SizedBox(height: 10,),
Container(
padding: EdgeInsetsDirectional.only(start: 5),
child: Text("Ahmed mahmoud",style: TextStyle(color: Colors.white) , maxLines: 2 , overflow: TextOverflow.ellipsis, )),
],
),
),SizedBox(width: 15,),
Container(
width: 60,
padding: EdgeInsets.symmetric(vertical: 15),
child: Column(
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd ,
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://cdn.dribbble.com/users/2407/screenshots/7319211/media/fea17aec16213441b38f1e56379cc14b.png?compress=1&resize=400x300'),
),
CircleAvatar(
radius: 8,
backgroundColor: Colors.grey[900],
),
CircleAvatar(
radius: 7,
backgroundColor: Colors.green[300],
),
],
),
SizedBox(height: 10,),
Container(
padding: EdgeInsetsDirectional.only(start: 5),
child: Text("Ahmed mahmoud",style: TextStyle(color: Colors.white) , maxLines: 2 , overflow: TextOverflow.ellipsis, )),
],
),
),SizedBox(width: 15,),
Container(
width: 60,
padding: EdgeInsets.symmetric(vertical: 15),
child: Column(
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd ,
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://cdn.dribbble.com/users/2407/screenshots/7319211/media/fea17aec16213441b38f1e56379cc14b.png?compress=1&resize=400x300'),
),
CircleAvatar(
radius: 8,
backgroundColor: Colors.grey[900],
),
CircleAvatar(
radius: 7,
backgroundColor: Colors.green[300],
),
],
),
SizedBox(height: 10,),
Container(
padding: EdgeInsetsDirectional.only(start: 5),
child: Text("Ahmed mahmoud",style: TextStyle(color: Colors.white) , maxLines: 2 , overflow: TextOverflow.ellipsis, )),
],
),
),
],
),
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
Row (
children: [
Stack(
alignment: AlignmentDirectional.bottomEnd,
children: [
CircleAvatar(
radius: 35,
backgroundImage: NetworkImage('https://i.pinimg.com/originals/0b/3d/d6/0b3dd682ef7954e39670e65d3de485b2.png'),
),
CircleAvatar(radius: 8, backgroundColor: Colors.green,),
],
),
SizedBox(width: 12,),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Ahmed mahmoud" ,maxLines: 1 , overflow: TextOverflow.ellipsis ,style: TextStyle(color: Colors.white , fontWeight: FontWeight.w700 , fontSize: 18),),
SizedBox(height: 5,),
Text("Hello I'm ahmed mahmoud , i'm flutter Developer and you flutter developer ? sdasdasd" ,maxLines: 2 , overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.white , fontWeight: FontWeight.w400 , fontSize: 11),),
],
),
),
CircleAvatar(
radius: 4,
backgroundColor: Colors.blueAccent,
),
SizedBox(width: 5,),
Padding(
padding: const EdgeInsetsDirectional.only(end: 5.0),
child: Text("12 : 25 Am", style: TextStyle(color: Colors.white , fontSize: 12),),
),
],
),
SizedBox(height: 10,),
],
),
),
),
],
),
),
);
لمزيد من الاكواد والشروحات في دارت وفلاتر يمكنكم مشاهدة الموقع والتمتع بعدد كبير من المقالات البرمجيه المختلف في الكثير من اللغات .
android sdk manager تحميل flutter developers applications create app android android studio mac
