Flfter TextField не центрируется, когда его контейнер сокращен в GridView - PullRequest
Новая
       37

Flfter TextField не центрируется, когда его контейнер сокращен в GridView

0 голосов
/ 27 марта 2020

Я пытаюсь создать сетку из текстовых полей, центрированных в контейнерах. Прекрасно работает, пока плитки сетки не станут немного приземистыми:

enter image description here

Как видите, текст слишком низкий. Когда соотношение сторон делает плитки немного выше, они центрируются должным образом.

Как сохранить текст по центру в плитках с короткой сеткой? Вот код на дартпаде:

версия дартпада

Код дартпада такой: 

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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

1 Ответ

1 голос
/ 27 марта 2020

Это может помочь, вместо использования InputDecoration.collapsed использовать только InputDecoration и манипулировать заполнением с помощью свойства ContentPadding следующим образом: 

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