CODEWITHSUNDEEP
fluttergridview
Inove Commerce
Inove Commerce

Reputation: 65

Align items inside GridView in Flutter

I am trying to make something like this in Flutter:

Text
(source: camellabs.com)

But I need to make the products name, prices and the last information align each other.

The images are going to have always the same height and width, but the names could have any length.

My code now (obs: I don't have much experience with flutter):

final columnCount = 2;
final width = MediaQuery.of(context).size.width / columnCount;
const height = 400;

GridView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            padding: EdgeInsets.all(10.0),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: width / height,
              crossAxisCount: columnCount,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
            ),
            itemCount: snapshot.data.length,
            itemBuilder: (context, index) {
              if (index < snapshot.data.length) {
                return InkWell(
                    onTap: null,
                    child: Container(
                        child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(top: 16),
                        ),
                        Container(
                          child: AspectRatio(
                            aspectRatio: 1,
                            child: Image.network(snapshot.data[index].image,fit: BoxFit.cover,),
                          ),
                          // height: 250,
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: 16),
                        ),
                        Text(snapshot.data[index].title,
                            textAlign: TextAlign.center),
                        Padding(
                          padding: EdgeInsets.only(top: 16),
                        ),
                        Text(
                            '${helpers.formatMoney(snapshot.data[index].lowPrice)}' +
                                '-' +
                                '${helpers.formatMoney(snapshot.data[index].highPrice)}',
                            textAlign: TextAlign.center),
                        Padding(
                          padding: EdgeInsets.only(top: 16),
                        ),
                        RaisedButton(
                          onPressed: () async {
                            cart = await addCart(widget.segment.slug,
                                snapshot.data[index].token, 1);
                            setState(() {});
                          },
                          child: Icon(Icons.add_shopping_cart),
                        ),
                      ],
                    )));
})

Upvotes: 1

Views: 1606

Answers (1)

Darshan Rathod
Darshan Rathod

Reputation: 611

change this in Column....

crossAxisAlignment: CrossAxisAlignment.start,

If this changes your images and other alignment as not you want or want images in center,

make a separate column for products name, prices and the last information and give that separated column's crossAxisAlignment: CrossAxisAlignment.start,

Upvotes: 2

Related Questions