Ezhilarasan S
Ezhilarasan S

Reputation: 13

Flutter StaggeredGridView inside container with row

enter image description here

I am use staggered grid view to solve the above UI. But can't able to fix, anyone can help me to solve the issue.

I have a code that is working fine using StaggeredGridView.count() inside Column.

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

class GridViewExample extends StatefulWidget {
  @override
  _GridViewExampleState createState() => new _GridViewExampleState();
}

class _GridViewExampleState extends State<GridViewExample> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Column(children: [
              SafeArea(
                child: Container(
                  height: MediaQuery.of(context).size.height/2,
                  width:  MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.all(30.0),
                  padding: const EdgeInsets.all(10.0),
                  decoration:BoxDecoration(border: Border.all(),
                ), //   
                     
                child: Container(
                  padding: EdgeInsets.all(30),
                  child: new StaggeredGridView.countBuilder(
                     crossAxisCount: 4,
                     itemCount: 5,
                     itemBuilder: (BuildContext context, int index) => new Container(
                         decoration: new BoxDecoration(
                             image: new DecorationImage(
                                 image:
                                     new NetworkImage("https://i.imgur.com/EVTkpZL.jpg"),
                                 fit: BoxFit.cover))),
                     staggeredTileBuilder: (int index) =>
                         new StaggeredTile.count(2, index.isEven ? 2 : 3),
                     mainAxisSpacing: 4.0,
                     crossAxisSpacing: 4.0,
                          ),
                ),
                    ),
              )
      ],)
    );
  }
}

Upvotes: 0

Views: 38

Answers (0)

Related Questions