FittedGridView

A FittedGridView is a widget that can fit its content inside the parent bounds and show it as a gridview.

Getting started

 flutter pub add fitted_gridview

Features

maxItemDisplay: defines max items to fit them inside the parent
itemCount: defines the number of your items
itemBuilder: defines the widget to display
remainingItemsOverlay: defines a widget to display on the top of the last item to display the number of remaining items
textDirection: defines the direction of items

Usage

Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black)
  ),
  child: FittedGridView(
    maxItemDisplay: 4,
    itemCount: 4,
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.all(4.0),
          child: Image.network(
            images[index],
            fit: BoxFit.cover,
          ),
       );
     },
    remainingItemsOverlay: (remaining) {
      return Padding(
         padding: const EdgeInsets.all(4.0),
           child: Container(
             color: Colors.grey.withOpacity(0.7),
             alignment: Alignment.center,
             child: Text("+$remaining",style: const TextStyle(color: Colors.white),),
        ),
      );
    },
  ),
)

TODO

  • add MaxRows: adding property to customize a max rows of the gridview to fit elements in.
  • add MaxColumns: adding property to customize a max columns of the gridview to fit elements in.

Libraries

fitted_gridview