Flutter GridView, ListView & Custom Widget - All Common Properties

---

🔹 ListView - All Common Properties

List আকারে Widget দেখানোর জন্য ব্যবহার করা হয়।

ListView(

  // Children Widgets
  children: [

    Text("Item 1"),

    Text("Item 2"),

    Text("Item 3"),
  ],

  // Scroll Direction
  scrollDirection: Axis.vertical,

  // Reverse Scroll
  reverse: false,

  // Padding
  padding: EdgeInsets.all(16),

  // Scroll Controller
  controller: scrollController,

  // Physics
  physics: BouncingScrollPhysics(),

  // Content অনুযায়ী Height নিবে
  shrinkWrap: false,

  // Primary Scroll View
  primary: false,

  // Keyboard Dismiss
  keyboardDismissBehavior:
      ScrollViewKeyboardDismissBehavior.onDrag,

  // Item Clip
  clipBehavior: Clip.hardEdge,
)

---

🔹 ListView.builder

বড় List-এর জন্য সবচেয়ে বেশি ব্যবহৃত।

ListView.builder(

  // Total Item
  itemCount: 100,

  // Item Builder
  itemBuilder: (context, index) {

    return ListTile(
      title: Text(
        "Item $index",
      ),
    );
  },

  // Scroll Direction
  scrollDirection: Axis.vertical,

  // Reverse
  reverse: false,

  // Padding
  padding: EdgeInsets.all(10),

  // Shrink Wrap
  shrinkWrap: false,

  // Physics
  physics: BouncingScrollPhysics(),
)

---

🔹 ListView.separated

Item এর মাঝে Divider দেওয়ার জন্য।

ListView.separated(

  itemCount: 20,

  itemBuilder: (context, index) {

    return ListTile(
      title: Text(
        "Item $index",
      ),
    );
  },

  separatorBuilder:
      (context, index) {

    return Divider();
  },
)

---

🔹 ListView.custom

ListView.custom(

  childrenDelegate:
      SliverChildBuilderDelegate(

    (context, index) {

      return Text(
        "Item $index",
      );
    },
  ),
)

---

🔹 GridView - All Common Properties

Grid Layout তৈরির জন্য ব্যবহার করা হয়।

GridView(

  // Grid Delegate
  gridDelegate:

      SliverGridDelegateWithFixedCrossAxisCount(

    // Column Count
    crossAxisCount: 2,

    // Horizontal Gap
    crossAxisSpacing: 10,

    // Vertical Gap
    mainAxisSpacing: 10,

    // Item Ratio
    childAspectRatio: 1,
  ),

  children: [

    Container(color: Colors.red),

    Container(color: Colors.green),

    Container(color: Colors.blue),
  ],

  padding: EdgeInsets.all(10),

  physics: BouncingScrollPhysics(),

  shrinkWrap: false,
)

---

🔹 GridView.builder

সবচেয়ে বেশি ব্যবহৃত GridView।

GridView.builder(

  itemCount: 100,

  gridDelegate:

      SliverGridDelegateWithFixedCrossAxisCount(

    crossAxisCount: 2,

    crossAxisSpacing: 10,

    mainAxisSpacing: 10,

    childAspectRatio: 1,
  ),

  itemBuilder: (context, index) {

    return Card(
      child: Center(
        child: Text(
          "$index",
        ),
      ),
    );
  },
)

---

🔹 GridView.extent

GridView.extent(

  // Maximum Width
  maxCrossAxisExtent: 200,

  mainAxisSpacing: 10,

  crossAxisSpacing: 10,

  children: [],
)

---

🔹 SliverGridDelegate Properties

Fixed Cross Axis Count

SliverGridDelegateWithFixedCrossAxisCount(

  crossAxisCount: 2,

  crossAxisSpacing: 10,

  mainAxisSpacing: 10,

  childAspectRatio: 1,

  mainAxisExtent: 200,
)

---

Max Extent

SliverGridDelegateWithMaxCrossAxisExtent(

  maxCrossAxisExtent: 200,

  crossAxisSpacing: 10,

  mainAxisSpacing: 10,

  childAspectRatio: 1,

  mainAxisExtent: 200,
)

---

🔹 Custom Widget

বারবার একই UI ব্যবহার করার জন্য Custom Widget তৈরি করা হয়।

---

Stateless Custom Widget

class MyButton extends StatelessWidget {

  final String title;

  const MyButton({
    super.key,
    required this.title,
  });

  @override
  Widget build(
    BuildContext context,
  ) {

    return ElevatedButton(

      onPressed: () {},

      child: Text(title),
    );
  }
}

Usage

MyButton(
  title: "Login",
)

---

Stateful Custom Widget

class CounterWidget
    extends StatefulWidget {

  const CounterWidget({
    super.key,
  });

  @override
  State<CounterWidget>
      createState() {

    return _CounterWidgetState();
  }
}

class _CounterWidgetState
    extends State<CounterWidget> {

  int count = 0;

  @override
  Widget build(
    BuildContext context,
  ) {

    return Column(

      children: [

        Text("$count"),

        ElevatedButton(

          onPressed: () {

            setState(() {

              count++;
            });
          },

          child: Text("Increment"),
        ),
      ],
    );
  }
}

---

🔹 Reusable Card Widget

class UserCard
    extends StatelessWidget {

  final String name;

  final String email;

  const UserCard({

    super.key,

    required this.name,

    required this.email,
  });

  @override
  Widget build(
    BuildContext context,
  ) {

    return Card(

      child: ListTile(

        title: Text(name),

        subtitle: Text(email),
      ),
    );
  }
}

Usage

UserCard(

  name: "Shakil",

  email: "abc@gmail.com",
)

---

📌 ListView Summary

Widget	ব্যবহার
ListView	সাধারণ List
ListView.builder	Large Data
ListView.separated	Divider সহ List
ListView.custom	Advanced List

---

📌 GridView Summary

Widget	ব্যবহার
GridView	সাধারণ Grid
GridView.builder	Large Grid
GridView.extent	Responsive Grid

---

📌 Custom Widget Summary

Widget	ব্যবহার
StatelessWidget	Static UI
StatefulWidget	Dynamic UI
Reusable Widget	Code Reuse
Custom Card	Common UI Design

Flutter-এ Clean Code এবং Reusable UI তৈরির জন্য Custom Widget ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ।