Flutter TextField在GridView中缩短其容器时未居中

Question

我正在尝试创建一个以Containers为中心的TextFields网格。效果很好，直到网格砖有点下蹲：

如您所见，文本太低。当长宽比使图块更高时，它们将正确居中。

如何使文本在短网格中居中？这是dartpad上的代码：

Dartpad version

dartpad代码是这里：

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: GridView.count(
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            crossAxisCount: 2,
            childAspectRatio: 10,
            padding: const EdgeInsets.all(0.0),
            mainAxisSpacing: 0.0,
            crossAxisSpacing: 0.0,
            children: <Widget>[
              EditableButton('Hello'),
              EditableButton('World'),
            ],
          ),
        ),
      ),
    );
  }
}

class EditableButton extends StatelessWidget {
  final controller;

  EditableButton(String text) : controller = TextEditingController(text: text);

  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(0.5),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Container(
          color: Colors.deepPurple,
          child: Center(
            child: TextField(
              controller: controller,
              decoration:
                  InputDecoration.collapsed(hintText: 'Tag description'),
              textAlign: TextAlign.center,
              textAlignVertical: TextAlignVertical.top,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

这可能有帮助，而不是使用InputDecoration.collapsed仅使用InputDecoration并按如下所示使用ContentPadding property 操作填充：

TextField(
          controller: controller,
          decoration: InputDecoration(
            hintText: 'Tag description',
            contentPadding: EdgeInsets.only(bottom: 10.0),
          ),