ফ্লাটার টেবিল ও গ্রিডভিউ উইজেট

ফ্লাটারে HTML টেবিল স্টাইল ভিউ তৈরি করার জন্য টেবিল উইজেট ব্যবহার করা হয়। যেমনঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: TableExample()));
}

class TableExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Table Example")),
      body: Center(
        child: Table(
          border: TableBorder.all(), // Adds border around table and cells
          children: [
            TableRow(children: [
              tableCell("Row 1, Col 1", Colors.red),
              tableCell("Row 1, Col 2", Colors.green),
              tableCell("Row 1, Col 3", Colors.blue),
            ]),
            TableRow(children: [
              tableCell("Row 2, Col 1", Colors.orange),
              tableCell("Row 2, Col 2", Colors.purple),
              tableCell("Row 2, Col 3", Colors.teal),
            ]),
            TableRow(children: [
              tableCell("Row 3, Col 1", Colors.yellow),
              tableCell("Row 3, Col 2", Colors.pink),
              tableCell("Row 3, Col 3", Colors.cyan),
            ]),
          ],
        ),
      ),
    );
  }

  // Helper method to create a styled table cell
  Widget tableCell(String text, Color color) {
    return Container(
      padding: EdgeInsets.all(10),
      color: color.withValues(alpha: 0.3),
      child: Center(child: Text(text, style: TextStyle(fontSize: 16))),
    );
  }
}

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

কোডিং স্টাইলও অনেকটা HTML টেবিলের মত। TableRow দিয়ে প্রয়োজন মত রো যোগ করতে পারব। tableCell ব্যবহার করে রো এর চাইল্ড গুলো যোগ করতে হয়। সব গুলো রোতে সমান পরিমাণ চাইল্ড থাকতে হয়।

GridView উইজেট

গ্রিড স্টাইলে যেমন গ্যালারির মত কন্টেন্ট দেখানোর জন্য গ্রিডভিউ উইজেট ব্যবহার করা যায়। গ্রিড ভিউতে ডিফল্টভাবে স্ক্রল যোগ করা থাকে। কন্টেন্ট ওভারফ্লো হলে স্ক্রোল করা যাবে। যেমনঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: GridViewExample()));
}

class GridViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GridView Example")),
      body: GridView.count(
        crossAxisCount: 2, // Number of columns
        crossAxisSpacing: 10, // Space between columns
        mainAxisSpacing: 10, // Space between rows
        padding: EdgeInsets.all(10),
        children: List.generate(6, (index) {
          return Container(
            color: Colors.blue.withValues(alpha: 0.5),
            child: Center(child: Text("Item ${index + 1}", style: TextStyle(fontSize: 18, color: Colors.white))),
          );
        }),
      ),
    );
  }
}

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

crossAxisCount দিয়ে কয়টা কলাম হবে, তা বলে দিতে পারি। উপরের উদাহরণে দুইটা কলামে দেখিয়েছি।

GridView.count() ব্যবহার করে সিম্পল গ্রিড তৈরি করতে পারি। যদি ডাইনামিক এবং অনেক বেশি চাইল্ড থাকে, তাহলে ব্যবহার করতে পারি GridView.builder()। যেমনঃ

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: DynamicGridViewExample()));
}

class DynamicGridViewExample extends StatelessWidget {
  final List<String> images = [
    "https://picsum.photos/id/1/400",
    "https://picsum.photos/id/2/400",
    "https://picsum.photos/id/3/400",
    "https://picsum.photos/id/4/400",
    "https://picsum.photos/id/5/400",
    "https://picsum.photos/id/6/400",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Dynamic GridView Example")),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // 3 columns
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        padding: EdgeInsets.all(10),
        itemCount: images.length,
        itemBuilder: (context, index) {
          return Image.network(images[index], fit: BoxFit.cover);
        },
      ),
    );
  }
}

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

Leave a Comment