آموزش ساخت ListView سفارشی در فلاتر

ویجت ListView تقریبا در هر نوع از برنامه ها کاربرد دارد و شرایطی وجود دارد که نیاز به استفاده از آن داریم به همین دلیل یادگیری و تسلط به آن برای افرادی که تازه شروع به یادگیری فلاتر کرده اند ضروری میباشد.

در مطلب قبلی با ویجت لیست ویو ListView در فریموورک فلاتر Flutter آشنا شدیم.

در این پست میخواهیم اطلاعاتی که یاد گرفتیم و گسترش بدیم و یک لیست ویو به شکل سفارشی طراحی کنیم.

نوع پیاده سازی لیست ویو در مطلب قبلی برای اطلاعات با حجم کم کاربرد داشت و برای لیست های طولانی پیشنهاد نمیشه که از آن استفاده کنید. یا در مواردی که نیاز دارید اطلاعات بصورت ساده نمایش داده شوند میتوانید از حالت پیش فرض ListView استفاده کنید. اما در خیلی از موارد برای طراحی رابط کاربری های زیباتر از قصد داریم تا نحوه نمایش اطلاعات را تغییر دهیم و با طراحی مورد نظر خودمان آنها را به کاربر نمایش دهیم.

برای این کار از متد سازنده builder برای ListView استفاده خواهیم کرد که شامل ویژگی های بیشتری نسبت به لیست ویو ساده میباشد.

با استفاده از ListView.builder میتوانیم طراحی هر خانه از آیتم لیست را انجام دهیم که در ادامه آن را بررسی میکنیم.

ویژگی های مهم ListView

برای شروع ما یک عکس وارد پروژه خودمون میکنیم.

 assets:
    - assets/image/android.jpg

این عکس را به همراه یک متن در هر خانه از آیتم های لیست قرار است که نمایش دهیم.

در ادامه یک لیست از نوع رشته تعریف میکنیم و هر نوع اطلاعاتی که بخواهیم و داخل آن قرار میدهیم.

  List phones = [];
  @override
  void initState() {
   phones.add('Galaxy note 20');
   phones.add('Google pixel');
   phones.add('Nokia 3');
   phones.add('Samsung A52');

  }

داخل لیست نام چند گوشی هوشمند را قرار میدهیم که برای مقداردهی متغیر phones در متد initState این کار را انجام میدهیم.

حالا در هر قسمتی از برنامه که نیاز داریم از ویجت لیست ویو استفاده می کنیم.

ListView.builder(
            itemCount: phones.length,
            itemBuilder: (context,index){
             
            },
          )

ListView.builder دو ویژگی مهم داره یکی itembuilder هست که یک ویجت بازگردانی میکند, ما طراحی یک آیتم از لیست را داخل آن انجام می دهیم. در واقع این متد بخش اصلی کار طراحی رابط کاربری لیست را انجام میدهد که با استفاده از ویجت هایی که یادگرفته اید میتوانید آن را تکمیل کنید. به عنوان پارامتر ورودی شامل یک context و یک عدد صحیح است که نام آن را index گذاشته ایم. با استفاده از این متغیر میتوانید خانه های لیست phones دسترسی داشته باشید و اطلاعات را از آن دریافت کرده و نمایش دهید. این متد به ازای هر خانه از لیست اجرا میشود.

ویژگی itemCount نیز تعداد آیتم های لیست را دریافت میکند که اندازه متغیر phones را برای آن قرار میدهیم.

طراحی رابط کاربری

در ادامه نوبت به تکمیل متد itemBuilder است که به شکل خیلی ساده از یک ویجت Column استفاده میکنیم و در ابتدا عنوان گوشی را نمایش میدهیم و سپس در پایین آن تصویری که داخل پروژه قرار داده بودیم را قرار میدهیم.

ListView.builder(
            itemCount: phones.length,
            itemBuilder: (context,index){
              return Container(
                child: Column(
                  children: [
                    Text(phones[index],style: TextStyle(fontSize: 20.0),),
                    SizedBox(height: 20.0,),
                    Image.asset('assets/image/android.jpg',width: 300,)
                  ],
                ),
              );
            },
          )

خروجی کدهای نوشته شده بصورت زیر میباشد.