Sponsored

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

0
53

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

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(),
        ),
      ),
    );
  }
}

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

Sponsored
Sponsored
Search
Categories
Read More
Nulled
Educational institutes to reopen on Feb 22
By Nettumi 2026-09-23 17:28:15 0 88
Nulled
Host Raptor v1.0 - Hosting Domain HTML5 Template
Host Raptor v1.0 – Hosting Domain HTML5 Template Free Download. Host Raptor is a Clean,...
By Nettumi 2026-09-18 03:32:26 0 232
Nulled
Livestock Management System v2.0 - PHP Script - Nulled PHP Scripts
Livestock Management System v2.0 – PHP Script Free Download. Livestock Management...
By Nettumi 2026-09-17 18:19:15 0 55
Nulled
Live Streaming Plugin - Belloo Dating Software Add-on
Live Streaming Plugin – Belloo Dating Software Add-on Free Download. The only dating...
By Nettumi 2026-09-18 03:51:58 0 52
Nulled
১ম থেকে ১০ম শ্রেণীর নতুন গণিত গাইড ফ্রি ২০২৬ | Techtunes | টেকটিউনস
যে সকল মহান ব্যক্তিদের কারনে আমরা পেয়েছি আজকের এই ফটোশপ এবং ফটোশপ এর ইতিহাস সহ... মোঃ সাইফুল
By Nettumi 2026-09-21 05:32:52 0 66
‎ ‎ ‎
Nettumi https://nettumi.com