Why adding TextFiled from StatefulWidget won't appear? - flutter

Question

I'm new on Fultter and have the following issue.
I have the following code that works as expected if I disable ShowTextField(), . If I enable ShowTextField(), line then some widgets will disappear and the TextField will not appear too.
1) What could be the reason for that ?
2) Is it correct to "call" StateFulWidget from StatelessWidget ?
Thanks in advance
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter layout demo2',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter layout demo3'),
),
body: Column(
children: <Widget>[
titleSection,
ShowTextField(), //Disable this line will make code work.
],
),
),
);
}
}
class ShowTextField extends StatefulWidget {
#override
_ShowTextFieldState createState() => _ShowTextFieldState();
}
class _ShowTextFieldState extends State<ShowTextField> {
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
color: Colors.red,
child: Container(
padding: const EdgeInsets.all(10),
child: Center(
child: Column(
children: <Widget>[
new TextField(
decoration: InputDecoration(
labelText: 'Hello world',
),
),
],
),
),
),
)
],
);
}
}

Answer 1

1.)The error message says: 'An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.' Then this will work:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter layout demo2',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter layout demo3'),
),
body: Column(
children: <Widget>[
titleSection,
ShowTextField(), //Disable this line will make code work.
],
),
),
);
}
}
class ShowTextField extends StatefulWidget {
#override
_ShowTextFieldState createState() => _ShowTextFieldState();
}
class _ShowTextFieldState extends State<ShowTextField> {
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
color: Colors.red,
child: Container(
width: 300.0, //<--- SET THE WIDTH
padding: const EdgeInsets.all(10),
child: Center(
child: Column(
children: <Widget>[
new TextField(
decoration: InputDecoration(
labelText: 'Hello world',
),
),
],
),
),
),
)
],
);
}
}
2.) Yes, perfectly fine.