Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flutter how to give height to the childrens of GridView.Builder

Tags:

flutter

I am tring to give height to the childrens of gridview.builder but it's not accepting. I tried by using container but its not working... please help

GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 280.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding:
                            EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          height: 208.5,
                          width: 138.75,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10.0),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      "${snapshot.data[index].url}"),
                                  fit: BoxFit.fill)),
                        ),
                      ),
                      Text(
                        snapshot.data[index].title,
                        style: TextStyle(fontSize: 17.0),
                      ),
                    ],
                  ),
                );
              },
            ),`

img

like image 502
Shivam Agarwal Avatar asked Dec 04 '18 11:12

Shivam Agarwal


People also ask

What is the difference between GridView and GridView builder in flutter?

One comment If your Flutter app needs to display a grid view of a large or infinite number of items (a list of products fetched from API, for instance) then you should use GridView.builder () instead of GridView (). The builder () is called only for those items that are actually visible so your app performance will be improved.

Does the GridView consume all available height for its children?

Now the GridView consumes all the available height for a single child, more than needed. Is there a way to tell the GridView just to use the needed height for its children?

How to count the number of columns in GridView in flutter?

In Flutter, the two GridView is mostly used. GridView.count () is used with some named parameters. The properties that we can use with GridView.count () are: crossAxisCount: It defines the number of columns in GridView. crossAxisSpacing: It defines the number of pixels between each child listed along the cross axis.

Does flutter_staggered_grid_view support height according to dynamic content?

P.S: Already tried flutter_staggered_grid_view which currently doesn’t support height accordingt to dynamic content. We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits.


Video Answer


3 Answers

You want to use the childAspectRatio property of the SliverGridDelegate preferably with MediaQuery:

Demo pic

class HomePage extends StatelessWidget {
  final List<String> items = <String>[
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 4),
        ),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return GridTile(child: Text(items[index]));
        },
      ),
    );
  }
}
like image 141
soupjake Avatar answered Oct 10 '22 01:10

soupjake


You can use mainAxisExtent instead of childAspectRatio

    GridView.builder(
            physics: BouncingScrollPhysics(),
            itemCount: resumes.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisExtent: 256,
            ),
            itemBuilder: (_, index) => Container(),
          ),
like image 23
Furlan Avatar answered Oct 10 '22 01:10

Furlan


By changing childAspectRatio 0 to 1 you can change hight of item

like image 7
harsha.kuruwita Avatar answered Oct 10 '22 00:10

harsha.kuruwita