如何在 Flutter 中对齐 GridView 中的小部件？

Question

I want to align the contents of a GridView item to the center ( both vertically and horizontally ) without changing the size of the widget .

This code creates a GridView with an item in it, it has a default top-center alignment and the size is a default square.

GridView.count(
  crossAxisCount: 3, 
  children: [
    Container(
      // alignment: Alignment.center,
      child: RaisedButton(
        child: Column(
          children: [
            Text("Top text"),
            Text("Bottom text"),
          ],
        ),
        onPressed: (){}
      ),
    ),
  ],
);

And it looks like this:

When I uncomment the alignment, it doesn't align the items correctly and the size of the item changes, I don't want neither of them.

Note that I need multiple Widget s in that GridView item, so I can't remove the Column (but maybe I can replace it?).

Answer 1

I don't see any size change after adding mainAxisAlignment to the Column. Please run the code below:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      children: [
        Container(
          // alignment: Alignment.center,
          child: RaisedButton(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Top text"),
                  Text("Bottom text"),
                ],
              ),
              onPressed: () {}),
        ),
      ],
    );
  }
}