ساخت لیست ویو ListView در فلاتر

لیست ویو ListView یکی از کاربردی ترین ویجت ها در برنامه نویسی موبایل می باشد.

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

برای مثال لیست مخاطبان کاربر و در نظر بگیرید, تمام آنها دارای یک سری اطلاعات مشابه به هم هستند پس میتونیم از لیست ویو استفاده کنیم تا این لیست و به کاربر نمایش دهیم.

در این مطلب لیست ویویی که میسازیم بصورت کاملا ابتدایی و ساده هست و در مطالب بعدی با همدیگه ListView های پیچیده تر و کار خواهیم کرد.

کاربرد لیست ویو در برنامه نویسی فلاتر

لیست ویو (ListView) یکی از ابزارهای قدرتمند در فریم‌ورک فلاتر است که به شما امکان نمایش لیست‌ها از عناصر را می‌دهد.
این عناصر می‌توانند هر نوع ویجتی باشند و در لیست ویو قرار گیرند.
لیست ویو به شما اجازه می‌دهد که لیست‌های طولانی را به صورت مرتب و قابل پیمایش به کاربرانتان نشان دهید.
این ابزار بسیار منعطف است و می‌توانید تنظیمات مختلفی روی آن اعمال کنید تا به نیازهای خاصتان بپاسخد.

کاربردهای لیست ویو عبارتند از:

1. نمایش لیست‌های داده‌ها: می‌توانید لیست ویو را برای نمایش لیست‌های داده‌ها، مثلاً لیست محصولات، لیست پست‌ها، لیست کاربران، و غیره استفاده کنید.
   
2. نمایش لیست‌های مورد انتخاب: اگر کاربران بتوانند از بین چندین مورد یکی را انتخاب کنند، لیست ویو برای نمایش این گزینه‌ها بسیار مفید است.
   
3. لیست‌های آیتم‌های منو: می‌توانید لیست ویو را برای نمایش منوها و گزینه‌های یک منوی کشویی استفاده کنید.
   
4. نمایش لیست‌های جستجو: اگر کاربران می‌توانند جستجو کنند و نتایج را در یک لیست نمایش دهید، لیست ویو بسیار مناسب است.

طراحی لیست ویو

خب برای شروع لایه Scafold و به برنامه اضافه کنید و در قسمت body از ویجت ListView استفاده کنید.

به مثال زیر توجه کنید:

ListView(
          children: <widget>[
            ListTile(
              leading: Icon(Icons.web),
              title: Text('ّFlutter-learn.ir'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Google.com'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Flutter'),
            ),
          ],
        )

در اینجا ما یک لیست ویو تعریف کردیم سپس با استفاده از Children رکوردهای خودمون و اضافه کردیم.

هر ردیف لیست ویو ما یک ویجت به اسم ListTile دارد که از یک عنوان و آیکون تشکیل شده است.

میتونید یک زیرعنوان هم قرار دهید با استفاده از دستور subtiltle

هر عنوان ما یک Text هست که میتونید با استفاده از مطالب قبلی استایل Text و عوض کنید.

خروجی کدهای بالای ما به شکل زیر می باشد.

کدهای کامل پروژه ها هم به شکل زیر هست.

  runApp(
    new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(

          title: Text('ListView'),
          backgroundColor: Colors.redAccent,
          centerTitle: true,

        ),
        body: ListView(
          children: <widget>[
            ListTile(
              leading: Icon(Icons.web),
              title: Text('ّFlutter-learn.ir'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Google.com'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Flutter'),
            ),
          ],
        )
      ),
    )
  ); 

این نوع لیست ویو سرعت طراحی بالایی دارد اما امکانات کمی برای شخصی سازی کردن دارد.

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

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