Search code examples
flutteruser-interfacelayout

How can I layout GridView.count so the widgets start building from the top of the parent widget in Flutter?


When I build a GridView.count - it centers the children widgets, how do I get them to start building from the very center top of their parent in Flutter?

I can't find the appropriate property to do this. I tried wrapping the Gridview.count in an Align widget aligning to topCenter and that didnt work either.

(example pic attached).

Thank you!

enter image description here

                  Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.greenAccent,
                      child: Align(
                        alignment: Alignment.topCenter,
                        child: GridView.count(
                          childAspectRatio: 1.5,
                          crossAxisCount: 2,
                          mainAxisSpacing: 10,
                          crossAxisSpacing: 10,
                          children: [
                            Container(
                              color: Colors.grey,
                            ),
                            Container(
                              color: Colors.blue,
                            ),
                            Container(
                              color: Colors.orange,
                            ),
                            Container(
                              color: Colors.purple,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),

Solution

  • Just to point that its not about widget you posted:

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Material App',
          home: Scaffold(
            appBar: AppBar(
              title: Text('Material App Bar'),
            ),
            body: Column(
              children: [
                Container(
                  width: double.infinity,
                  height: 140,
                  color: Colors.black,
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    color: Colors.greenAccent,
                    child: Align(
                      alignment: Alignment.topCenter,
                      child: GridView.count(
                        childAspectRatio: 1.5,
                        crossAxisCount: 2,
                        mainAxisSpacing: 10,
                        crossAxisSpacing: 10,
                        children: [
                          Container(
                            color: Colors.grey,
                          ),
                          Container(
                            color: Colors.blue,
                          ),
                          Container(
                            color: Colors.orange,
                          ),
                          Container(
                            color: Colors.purple,
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                Spacer(),
              ],
            ),
          ),
        );
      }
    }
    

    enter image description here