dynamic_row_grid

Description:

dynamic row grid

Dynamic Row Grid #
DynamicRowGrid is a highly customizable and flexible Flutter package designed to create dynamic, responsive grids of items with ease. It offers a wide range of configuration options to meet various UI needs, making it an ideal choice for developers looking to create visually appealing and functionally robust grid layouts in their applications.

Features #

Flexible Item Count: Dynamically configure the number of items per row using the crossAxisCount property.
Custom Item Builder: Use a custom itemBuilder function to generate each item in the grid, providing maximum flexibility in item rendering.
Spacing Control: Easily adjust horizontal and vertical spacing between items with horizontalSpacing and verticalSpacing.
Custom Alignment: Align items within each row using the alignment property, supporting various alignment options.
Padding and Margins: Customize padding around the grid and margins between rows to fit your design needs.
Scrollable Grid: Utilize scrollable grids with custom scroll physics and controllers.
Shrink-Wrap Support: Enable or disable shrink-wrap behavior to optimize performance based on your layout requirements.
Custom Row and Grid Decorations: Apply custom decorations to rows and the entire grid using rowDecoration and gridDecoration.
Header and Footer: Add optional header and footer widgets to the grid for additional context or functionality.
Empty State Handling: Display a custom widget when the grid is empty using the emptyStateWidget property.

Getting started #


Install the Package: Add dynamic_row_grid to your pubspec.yaml dependencies.
dependencies:
dynamic_row_grid: ^0.0.2
copied to clipboard


Import the Package: Include the package in your Dart code with import 'package:dynamic_row_grid/dynamic_row_grid.dart';.
import 'package:dynamic_row_grid/dynamic_row_grid.dart';
copied to clipboard


Use the Widget: Integrate the DynamicRowGrid widget into your layout and customize it as needed.


Usage #
Customizable Properties in DynamicRowGrid

itemCount
itemBuilder
crossAxisCount
horizontalSpacing
verticalSpacing
alignment
physics
controller
shrinkWrap
padding
rowDecoration
gridDecoration
header
footer
emptyStateWidget


final List animals = [
'Lion',
'Tiger',
'Elephant',
'Giraffe',
...
];

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Scaffold(
backgroundColor: Colors.black,
body: DynamicRowGrid(
itemCount: animals.length,
crossAxisCount: 4,
physics: const BouncingScrollPhysics(),
header: const Padding(
padding: EdgeInsets.all(16.0),
child: Text(
'Animals',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
),
footer: const Padding(
padding: EdgeInsets.all(16.0),
child: Text(
'Footer',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold),
),
),
emptyStateWidget: const Center(
child: Text(
'No animals available',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
),
itemBuilder: (context, index) {
return ElevatedButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(
const EdgeInsets.symmetric(
horizontal: 8,
vertical: 3,
),
),
backgroundColor: MaterialStateProperty.all(
Color.fromARGB(
255,
Random().nextInt(256),
Random().nextInt(256),
Random().nextInt(256),
),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: const BorderSide(width: 1, color: Colors.black),
),
),
shadowColor: MaterialStateProperty.all(
Colors.white,
),
),
onPressed: () {},
child: Text(
animals[index],
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.w400,
),
),
);
},
),
),
);
}
}
copied to clipboard