Estou recebendo uma exceção de renderização que não entendo como corrigir. Estou tentando criar uma coluna que tem 3 linhas.
Linha [Imagem]
Linha [Campo de texto]
Linha [botões]
Aqui está o meu código para criar o contêiner:
Container buildEnterAppContainer(BuildContext context) {
var container = new Container(
padding: const EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
buildImageRow(context),
buildAppEntryRow(context),
buildButtonRow(context)
],
),
);
return container;
}
e meu código buildAppEntryRow para o contêiner de texto
Widget buildAppEntryRow(BuildContext context) {
return new Row(
children: <Widget>[
new TextField(
decoration: const InputDecoration(helperText: "Enter App ID"),
style: Theme.of(context).textTheme.body1,
)
],
);
}
Quando executo, recebo a seguinte exceção:
I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674): RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674): BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
Se eu alterar buildAppEntryRow para apenas um TextField, como este
Widget buildAppEntryRow2(BuildContext context) {
return new TextField(
decoration: const InputDecoration(helperText: "Enter App ID"),
style: Theme.of(context).textTheme.body1,
);
}
Não recebo mais a exceção. O que estou perdendo com a implementação de Linha que está fazendo com que não seja capaz de calcular o tamanho dessa linha?
mainAxisAlignment
para o widget Linha. Com dois widgets de texto, não há problema, mas com um widget de texto e um widget de campo de texto contidoFlexible
nele é alinhado à esquerda sem espaçamento.Você recebe esse erro porque se
TextField
expande na direção horizontal e o mesmo acontece com oRow
, portanto, precisamos restringir a largura doTextField
, existem muitas maneiras de fazê-lo.Usar
Expanded
Usar
Flexible
Embrulhe
Container
ouSizedBox
forneçawidth
fonte
TextField
em uma linha.você deve usar o Flexible para usar um campo de texto dentro de uma linha.
fonte
Container
, você pode usar oFlexible
diretamente.A solução é envolver o seu
Text()
um dentro dos seguintes widgets: De qualquerExpanded
ouFlexible
. Portanto, seu código usando o Expanded será como:fonte
Como @Asif Shiraz mencionou, eu tinha o mesmo problema e resolvi isso envolvendo a Wrapping Column em um Flexible, aqui assim:
fonte
Uma solução simples é envolver seu
Text()
interior aContainer()
. Portanto, seu código será como:Aqui você também obtém o atributo de largura e altura de um contêiner para ajustar a aparência do seu campo de texto. Não é necessário usar
Flexible
se você estiver agrupando seu campo de texto dentro de um Contêiner.fonte
width: n