How do you create grid items that are auto-sized based on the size of the text in a SliverGridDelegate?

Question

GridView.custom(
  gridDelegate: SliverQuiltedGridDelegate(
    crossAxisCount: 2,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    repeatPattern: QuiltedGridRepeatPattern.inverted,
    pattern: [
      const QuiltedGridTile(2, 1),
      const QuiltedGridTile(1, 1),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      ......

So my current implementation looks like this.

Looking to resize the list tiles/grid tile based on the content size to look like a dynamic grid. I also need to figure out how to place the delete button to the bottom right but that's a challenge for another day.

Answer 1

You can use flutter_staggered_grid_view

import 'package:flutter/material.dart';

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class StaggeredGridExample extends StatefulWidget {
  @override
  _StaggeredGridExampleState createState() => _StaggeredGridExampleState();
}

class _StaggeredGridExampleState extends State<StaggeredGridExample> {
  final List<String> staggeredGridViewImage = [
    "https://uae.microless.com/cdn/no_image.jpg",
    "https://images-na.ssl-images-amazon.com/images/I/81aF3Ob-2KL._UX679_.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgUgs8_kmuhScsx-J01d8fA1mhlCR5-1jyvMYxqCB8h3LCqcgl9Q",
    "https://media.ed.edmunds-media.com/gmc/sierra-3500hd/2018/td/2018_gmc_sierra-3500hd_f34_td_411183_1600.jpg",
    "https://www.galeanasvandykedodge.net/assets/stock/ColorMatched_01/White/640/cc_2018DOV170002_01_640/cc_2018DOV170002_01_640_PSC.jpg",
    "https://media.onthemarket.com/properties/6191869/797156548/composite.jpg",
    "https://media.onthemarket.com/properties/6191840/797152761/composite.jpg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        mainAxisSpacing: 24,
        crossAxisSpacing: 12,
        itemCount: staggeredGridViewImage.length,
        itemBuilder: (BuildContext context, int index) => Card(
          child: Column(
            children: <Widget>[
              Image.network(staggeredGridViewImage[index]),
              Text("Some text"),
            ],
          ),
        ),
        staggeredTileBuilder: (int index) => new StaggeredTile.fit(2),     
      ),
    );
  }
}