How to achieve below UI in Gridview.count?

Question

I want the first two items side by side, and the third item should go under the first two, right in the middle.

And the children widgets of the GridView.count should not rebuild on any conditions.

I tried changing crossAxisCount but it didn't helped.

and I have used GridView.count widget.

Thank you in advance.

Answer 1

There's still be a way to make your design using count named constructor, look at the following code.

import 'package:flutter/material.dart';
class Home extends StatelessWidget {
  int count = 1;

  @override
  Widget build(BuildContext context) {
    print('called');
    return SafeArea(
      child: Scaffold(
        body: GridView.count(
          crossAxisCount: 1,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          childAspectRatio: 2,
          padding: EdgeInsets.all(10),
          children: List.generate(10, (index) {
            count++;
            print(count);
            return (count.isEven)
                ? Row(
                    children: [
                      Expanded(
                        child: Container(
                          padding: EdgeInsets.only(right: 5),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              image: DecorationImage(
                                image: AssetImage('images/1.jpg'),
                                fit: BoxFit.cover,
                              )),
                        ),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Expanded(
                        child: Container(
                          padding: EdgeInsets.only(left: 5),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              image: DecorationImage(
                                image: AssetImage('images/1.jpg'),
                                fit: BoxFit.cover,
                              )),
                        ),
                      )
                    ],
                  )
                : Padding(
                    padding: EdgeInsets.only(
                        left: MediaQuery.of(context).size.width / 4,
                        right: MediaQuery.of(context).size.width / 4),
                    child: Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.blue,width: 3),
                          borderRadius: BorderRadius.circular(10),
                          image: DecorationImage(
                            image: AssetImage('images/1.jpg'),
                            fit: BoxFit.cover,
                          )),
                    ),
                  );
          }),
        ),
      ),
    );
  }
}

the all idea is revolving about counting number of built items(images) to decide whether the following item will contain 1 image or two images.

for two images (wrap them within a row).

result:

Hope it helps you.