Flutter GridView builder with dynamic height and uniform child in each row

Question

With flutter_staggered_grid_view I will get like GRID 1 which I don't want.

Instead I want that if BOX 1 has a height of 80px and BOX 2 has a height of 50px .. Box 2 should expand itself to be 80px.

And also that the height is dynamic.

Answer 1

As answered by @Namsrai. This is how you will do it with flutter_layout_grid

SingleChildScrollView(
                                padding: EdgeInsets.all(4),
                                child: LayoutGrid(
                                  columnGap: 4,
                                  rowGap: 4,
                                  columnSizes: [1.fr, 1.fr],
                                  rowSizes:
                                      List<IntrinsicContentTrackSize>.generate(
                                          (myBoxes.length / 2).round(),
                                          (int index) => auto),
                                  children: List<Widget>.generate(
                                      myBoxes.length,
                                      (int index) => MyBoxes(index)),
                                ),
                              )

Answer 2

U can use this package flutter_layout_grid 1.0.1 https://pub.dev/packages/flutter_layout_grid/example U can create custom grid's like a CSS

import 'package:flutter/material.dart';
import 'package:flutter_layout_grid/flutter_layout_grid.dart';

void main() {
  runApp(PietNamedAreasApp());
}

const cellRed = Color(0xffc73232);
const cellMustard = Color(0xffd7aa22);
const cellGrey = Color(0xffcfd4e0);
const cellBlue = Color(0xff1553be);
const background = Color(0xff242830);

class PietPainting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: background,
      child: LayoutGrid(
        columnGap: 12,
        rowGap: 12,
        areas: '''
          r R B B  B
          r R Y Y  Y
          y R Y Y  Y
          y R g b yy
        ''',
        // A number of extension methods are provided for concise track sizing
        columnSizes: [1.0.fr, 3.5.fr, 1.3.fr, 1.3.fr, 1.3.fr],
        rowSizes: [
          1.0.fr,
          0.3.fr,
          1.5.fr,
          1.2.fr,
        ],
        children: [
          // Column 1
          gridArea('r').containing(Container(color: cellRed)),
          gridArea('y').containing(Container(color: cellMustard)),
          // Column 2
          gridArea('R').containing(Container(color: cellRed)),
          // Column 3
          gridArea('B').containing(Container(color: cellBlue)),
          gridArea('Y').containing(Container(color: cellMustard)),
          gridArea('g').containing(Container(color: cellGrey)),
          // Column 4
          gridArea('b').containing(Container(color: cellBlue)),
          // Column 5
          gridArea('yy').containing(Container(color: cellMustard)),
        ],
      ),
    );
  }
}

class PietNamedAreasApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      title: 'Layout Grid Desktop Example',
      debugShowCheckedModeBanner: false,
      color: Colors.white,
      builder: (context, child) => PietPainting(),
    );
  }
}