Question 74732 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make this type of canvas with image in flutter?

enter image description here

how to create this type of design?

we can try but not create this type of.

Tags:

2

Answers


  1. 0

    This can be achieved dynamically by flutter_staggered_grid_view.

    GridView.custom(
  gridDelegate: SliverQuiltedGridDelegate(
    crossAxisCount: 4,
    mainAxisSpacing: 4,
    crossAxisSpacing: 4,
    repeatPattern: QuiltedGridRepeatPattern.inverted,
    pattern: [
      QuiltedGridTile(2, 2),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 1),
      QuiltedGridTile(1, 2),
    ],
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) => ImageWidgetHere() // <-- your image 
  ),
);
    Login or Signup to reply.
  2. 0

    Use flutter_staggered_grid_view

    import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';


 StaggeredGrid.count(
      crossAxisCount: 4,
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: const [
        StaggeredGridTile.count(
          crossAxisCellCount: 2,
          mainAxisCellCount: 2,
          child: Tile(index: 0),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 2,
          mainAxisCellCount: 1,
          child: Tile(index: 1),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 2),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 1,
          mainAxisCellCount: 1,
          child: Tile(index: 3),
        ),
        StaggeredGridTile.count(
          crossAxisCellCount: 4,
          mainAxisCellCount: 2,
          child: Tile(index: 4),
        ),
      ],
    );

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search