Flutter layout for displaying images

Question

Can anyone advise on how to create layout as shown below using flutter for displaying image. 1 big square with 5 small square and must resize accordingly according to the width of the screen.

Solution 1

In this case you can use flutter_staggered_grid_view package.

import the package in pubspec.yaml .

dependencies:

 ...

   flutter_staggered_grid_view: ^0.2.2

Follow the Following Code To get staggered grid view.

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Demo"),
      ),
      body: new Padding(
          padding: const EdgeInsets.only(top: 12.0),
          child: new StaggeredGridView.count(
            crossAxisCount: 3,
            staggeredTiles: _staggeredTiles,
            children: _tiles,
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
            padding: const EdgeInsets.all(4.0),
          )
      )
    );
  }
}


List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[
  const StaggeredTile.count(2, 2),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
  const StaggeredTile.count(1, 1),
];

List<Widget> _tiles = const <Widget>[
  const _Example01Tile(Colors.green, Icons.widgets),
  const _Example01Tile(Colors.lightBlue, Icons.wifi),
  const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
  const _Example01Tile(Colors.brown, Icons.map),
  const _Example01Tile(Colors.deepOrange, Icons.send),
  const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
];



class _Example01Tile extends StatelessWidget {
  const _Example01Tile(this.backgroundColor, this.iconData);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: const EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Solution 2

Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;

return new Container(
  child: new Column(
    children: <Widget>[
      new Row(children: <Widget>[
        new Container(
          width: 2*width/4,
          height: 2*width/4,
          color: Colors.lightGreen,
        ),
        new Column(children: <Widget>[
          new Container(
            width: width/4,
            height: width/4,
            color: Colors.redAccent,
          ),
          new Container(
            width: width/4,
            height: width/4,
            color: Colors.red,
          )
        ],)
      ],),
      new Row(children: <Widget>[
        new Container(
          width: width/4,
          height: width/4,
          color: Colors.black54,
        ),
        new Container(
          width: width/4,
          height: width/4,
          color: Colors.redAccent,
        ),
        new Container(
          width: width/4,
          height: width/4,
          color: Colors.green,
        ),
      ],)
    ],
  ),
);
}

Comments

[diegoveloper]

you can use column -> (row -> item - column -> item-item ) - (row -> item item item)

[user1997296]

Tested the code, but require to divide the width & height by 3 instead of 4. Short and simple solution that works without need to import any other package.

[user1997296]

Thanks for introducing the flutter_staggered_grid_view. It is flexible and good.

[Zulfiqar]

You can divide width and height whatever ratio you want it's just a sample code.