ফ্লাটার লিস্ট ভিউ

স্ক্রলেবল আইটেম দেখানোর জন্য লিস্টভিউ ব্যবহার করা হয়। এখানে ব্যাসিক লিস্টভিউ এর ব্যবহার দেখানো হয়েছেঃ

ListView(
          children: [
            Text('Item 1'),
            Text('Item 2'),
            Text('Item 3'),
            Text('Item 4'),
          ],

এখানে লিস্ট ভিউ এর ভেতর আমরা তিনটা টেক্সট উইজেট যোগ করেছি। এখানে যে কোন উইজেট আমরা ব্যবহার করতে পারব।

ListView.builder

ডাইন্যামিক্যালি লিস্টভিউ তৈরি করার জন্য রয়েছে ListView.builder। এখানে একটা উদাহরণ দেখিঃ

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  final List<String> items = List.generate(20, (index) => 'Item ${index + 1}');
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

এখানে প্রথমে items নামে একটা ডামি লিস্ট তৈরি করে নিয়েছি। যেখানে ২০টা আইটেম রয়েছে। এরপর ListView.builder ব্যবহার করে ডাইনামিক্যালি লিস্ট জেনারেট করেছি। ListView.builder এর সুবিধা হচ্ছে কন্টেন্ট তখনি UI তে রেন্ডার হবে, যখন দরকার হবে। ফলে যত লিস্টে যত বেশি আইটেম থাকুক না কেন, পারফর্মনেস ঠিক থাকবে।

ListView.separated

লিস্টভিউ এর আইটেম গুলোর মধ্যে আমরা যে কোন সেপারেটর ব্যবহার করতে পারি। তার জন্য রয়েছে ListView.builder উইজেট। যা এভাবে ব্যবহার করতে পারিঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List<String> items = List.generate(20, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.separated(
          itemCount: items.length,
          separatorBuilder: (context, index) => Divider(), 
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

আউটপুট পাবোঃ

এখানে আমরা ডিভাইডার ব্যবহার করেছি। চাইলে যে কোন কাস্টম ডিভাইডার ব্যবহার করতে পারব।

লিস্ট ভিউতে আমরা আইকন এবং টেক্সট এক সাথে ব্যবহার করতে পারি। যেমনঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List<Map<String, dynamic>> items = [
    {"title": "Apple", "icon": Icons.apple},
    {"title": "Banana", "icon": Icons.food_bank},
    {"title": "Cherry", "icon": Icons.favorite},
    {"title": "Mango", "icon": Icons.local_florist},
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: items.map((item) {
            return ListTile(
              leading: Icon(item["icon"], color: Colors.blue),  
              title: Text(item["title"]),
            );
          }).toList(),
        ),
      ),
    );
  }
}

যার আউটপুট পাবো এমনঃ

Leave a Comment