القائمة الرئيسية

الصفحات

كيفية عمل listview في flutter بسهوله | Flutter Widget of ListView

 

كيفية عمل ListView في flutter بسهوله

كيفية عمل ListView في flutter بسهوله


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


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


نحن تهتم في موقعنا في مساعتدكم على تعلم وتطوير تطبيقاات الاندرويد و ios باستخدام تقنية flutter وهي تقنيه حديثه مقدمه لنا من العملاق جوجل والتي تهدف وتسعى ان الى توسع علم البرمجه وتسهل على المستخدمين التعامل مع مختلف الاجهزه بلغة واحده مثل تطوير تطبيقات android , ios , embeded , desktop بلغة واحده وهذا ما يميز هذه اللغه ونسبة الوظائف بها اصبحت مطلوبه بشكل كبير عن غيرها من التقنيات ولكن في نهاية الامر هي تعد cross platform .


عمل ليست فيو في فلاتر بالعربي

كيفية عمل ListView في flutter بسهوله


نقوم بعمل single child ونضع بداخلة listview  ونحيطه container ونمرر له الاتجاه سواءراسي او افقي وبعدها الmethode التي قمنا بعمملها لتكرار العناصر واخيرا نضع عدد العناصر التي نريد ظهورها .


كود ListView في فلاتر


return Scaffold(
      backgroundColor: Colors.grey[900],
        appBar: AppBar(
          elevation: 0.0,
          backgroundColor: Colors.grey[900],
          title:
          Row(
            children: [
              CircleAvatar(
                radius: 20,
               backgroundImage: NtworkImage('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: SingleChildScrollView(
          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",)
                  ],
                ),
              ),
              Container(
                // Change the height until the problem is solved
                height: 140,
                child: ListView.separated(
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context , index) => buildStory(),
                    separatorBuilder: (context , index) => SizedBox(width: 15,),
                    itemCount: 12),
              ),
              ListView.separated(
                // scroll up & down
                  shrinkWrap: true,
                  // stop scroll
                  physics: NeverScrollableScrollPhysics(),
                 itemBuilder: (context , index) => buildChat() , separatorBuilder: (context , index) => SizedBox(height: 10,), itemCount: 15),
            ],
          ),
        ),

      ),
    );
  }

  Widget buildChat() => Row (
    children: [
      Stack(
        alignment: AlignmentDirectional.bottomEnd,
        children: [
          CircleAvatar(
            radius: 35,
           backgroundImage: NtworkImage('https://cdn.dribbble.com/users/13754/screenshots/10755240/media/c7b379724eb61a95018287e21f287b5e.png?compress=1&resize=400x300'),
          ),
          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 ? sasdasd" ,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),),
      ),
    ],
  );

  Widget buildStory () => Container(
    width: 60,
    padding: EdgeInsets.symmetric(vertical: 15),
    child: Column(
      children: [
        Stack(
          alignment: AlignmentDirectional.bottomEnd ,
          children: [
            CircleAvatar(
              radius: 30,
             backgroundImage: NetworkImage('https://images.milledcdn.com/2020-09-07/7K4PQLg4D1D_kROF/9Pvr832Ur5nk.png'),
            ),
            CircleAvatar(
              radius: 8,
              backgroundColor: Colors.grey[900],
            ),
            CircleAvatar(
              radius: 7,
              backgroundColor: Colors.red[300],
            ),
          ],
        ),
        SizedBox(height: 5,),
        Container(
            padding: EdgeInsetsDirectional.only(start: 5),
            child: Text("Ahmed mahmoud" ,style: TextStyle(color: Colors.white) , maxLines: 2 , overflow: TextOverflow.ellipsis, )),

      ],
    ),
  );


لمزيد من الاكواد يمكنك متابعة التالي

تصميم واجهة تطبيق messanger facebook بإستخدام flutter

تصميم واجهة Login في Flutter مع شرح كيفية التصميم

ازالة علامة debugging من التطبيق في Flutter

شرح كيفية تثبيت فلاتر flutter على اندرويد ستوديو بالصور خطوه بخطوه

تعليقات

التنقل السريع