CODEWITHSUNDEEP
flutterflutter-layout
Rostyslav Roshak
Rostyslav Roshak

Reputation: 4009

Flutter layout using grid system

Is it possible to layout in Flutter using grid system. Having something similar to Bootstrap grid system might be nice.

I'd like my rows to contain 4 columns with fixed spaces(gutters) between the columns. (Gutters should have same size, regardless of screen width).

And I'd like to have at least some way of saying that the widget should be N columns width, starting from i column.

So final api can be something like these:

GridRow(
  gutter: 16,
  columnsCount: 4,
  children: [
    GridColumn(child:SomeWidget, width:3, begin:2),
  ],
)

Upvotes: 1

Views: 1868

Answers (1)

NiklasPor
NiklasPor

Reputation: 9815

There is already a package that fulfills all your needs, it is the StaggeredGridView.

It is not exactly the syntax you described, but the functionality should be greater or the same. You can add the gutters by setting mainAxisSpacing and crossAxisSpacing, set the column (or row, depending on the orientation) count by using crossAxisCount.

To specify the space which is used by the child, you define a staggeredTiles list, in which each StaggeredTile represents the child of the same index.

It is not exactly the same as the Bootstrap grid, but it comes close enough.

I've put together a super slim example:

Demo

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: StaggeredGridView.count(
          mainAxisSpacing: 8.0,
          crossAxisSpacing: 8.0, 
          crossAxisCount: 12,
          staggeredTiles: [
            StaggeredTile.count(6, 6),
            StaggeredTile.count(4, 1),
            StaggeredTile.count(2, 2),
            StaggeredTile.count(2, 2),
          ],
          children: <Widget>[
            Container(
                color: Colors.red,
                child: Text('6,6')
            ),
            Container(
                color: Colors.green,
                child: Text('4,1')
            ),
            Container(
                color: Colors.blue,
                child: Text('2,2')
            ),
            Container(
                color: Colors.yellow,
                child: Text('2,2')
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 3

Related Questions