عمل Scroll view وحل مشكلة وجود عناصر اكثر من مساحة الشاشه في flutter
في مقالة اليوم والتي تعد من اولى المقالات في فلاتر سوف نساعدكم على حل مشكلة الوصول الى نهاية الشاشة والعناصر في فلاتر كما نعلم انه اذا كانت العناصر الموجوده في الشاشه سواء كانت بشكل افقي او عمودي اكبر من مساحة الشاشة يحدث مشكلة في التصميم الخاص بك ويظهر لك Error ولحل هذة المشكلة نستخدم Scroll view لكي نتمكن من التخلص من هذة المشكلة وهذا ما سوف نشرحه لكم في هذة المقالة .
أصبحت flutter من اهم ال platforms التي ينتقل لها الكثير من الdeveloper وذلك لانها بيئة عمل تستطيع من خلالها تطوير تطبيقات android , desktop , ios , websites كل هذا يكون بكود واحد فقط وهذا ما يتميز ال Cross platforms ويوجد لغات برمجة اخرى تقوم بنفس الوظيفة تقريبا مثل objectiv-c و React المطوره من قبل العملاق facebook كل هذه اللغات تقوم بنفس الوظيفة تقريبا ولكنها تختص بجعلك moblie developer عكس فلاتر التي تميزك في اكثر من مجال .
تعمل flutter بلغة الdart وهي من اللغات الحديثة التي ظهرت مؤخرا في عام 2011 ولكن لم نكن نسمع عنها بشكل كبير من قبل ولكن بعد اعتمادها للflutter اصبح هذا الاسم يتكرر في ذهوننا بشكل كبير وهي لغة قريبة جدا من java فاذا كنت متمكن من الجافا فستتمكن من البداية بشكل سريع في flutter وسوف نشارك معكم الكثير من الدروس في هذا القسم .
عمل Scroll view بشكل افقي و عمودي في تصميمك في فلاتر
هذا الكود عبارة مجموعة من العناصر الافقيه والعموديه وعندما نصل للنهايه نشاهد ظهور Error ولذلك استخدمنا Scroll view وقمنا بإعطاءه كيفية العرض بمعنى اذا كانت بشكل horizontal فهذا يدل على انه يمكن عمل سكرول لليسار واليمين واذا قمنا بعمل Vertical فهذا يجعلنا نتحرك للاسفل و الاعلى كما يظهر بالصورة الخاص بالمقالة وايضا يمكنك تجربة الكود .
كود Scroll view فلاتر
class Screen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body:
SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(children: [
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
]),
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
SizedBox(
width: 10,
),
Text(
"data",
style: TextStyle(fontSize: 22),
),
],
),
),
],
),
),
);
}
}
لمزيد من الاكواد والشروحات يمكنكم مشاهدة باقي المقالات على الموقع
android sdk manager تحميل flutter developers applications create app android android studio mac
