I’m trying to learn Flutter by building a toy example.
Whenever I add my TextField
into this basic example, none of the other Widgets show up. The Layout Explorer in VS Code doesn’t show the layout anymore, and I don’t see any error logs.
Two questions:
1) How I can debug what I’ve done wrong? I want to learn for next time.
2) What have I done wrong?
import 'package:flutter/material.dart';
class PageFive extends StatefulWidget
{
const PageFive({super.key});
@override
State<StatefulWidget> createState()
{
return PageFiveState();
}
}
class PageFiveState extends State
{
TextEditingController tfc = TextEditingController();
@override
Widget build(BuildContext context)
{
return MaterialApp(
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.amber[200] ,
appBar: AppBar(
centerTitle: true,
title: Text("This is light red"),
backgroundColor: Colors.red[300]),
body: Row (
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Padding(padding: EdgeInsets.all(10)),
Text("one"),
Padding(padding: EdgeInsets.all(10)),
TextField( // If I comment out this widget, everything else shows up
controller: tfc,
onChanged: textFieldChangedCallback,
decoration: InputDecoration(
labelText: "This is the label",
border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(12))),
hintText: 'Write something here',
),
),
Padding(padding: EdgeInsets.all(10)),
Text("tfc.value.text"), // yes, I know to lose the quotes. This just made it easier to comment stuff out for now.
],
),
Column(
children: [
Padding(padding: EdgeInsets.all(10)),
Text("two"),
],
),
],
),
),
),
);
}
void textFieldChangedCallback(String newValue)
{
setState(() {
});
}
}
2
Error: An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.
Solution: Wrap both your columns inside Expanded
or Flexible
.
Since TextField
causes the unbounded width issue with Row, wrapping parent widget of TextField (in this case Column) with above widgets should solve the issue.
You can wrap only one Column which has TextField, but wrapping another Column make both Column same width.
0