I'm trying to build a very simple ToDo app. It consists of a TextField
and a Button
(a form) on the top of the screen that allow the user to add items to the ListView
that is just under the TextField
.
I'm capable to display the TextField
and the Button
, and I'm also capable to display a ListView
, but when I try to display both at the same time, the screen is empty.
Am I missing something? I try to display the ListView into a Column widget but it looks like it doesn't work.
Here is my short code without the form:
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: "Mon app",
home: Scaffold(
appBar: AppBar(
title: Text("My app")
),
body: Column(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
)
])),
);
}
}
Thanks!
You should use an Expanded
widget around your ListView. What is does is to expand its child (in this case, the ListView) to fit the maximum available space on the parent, excluding the space taken by other widgets.
Then, when you want to add the input on the bottom, you can just put the normal widget there inside the Column
, but outside the ListView
, so the list will scroll and the TextField will always stay on the bottom of the page.
Here's the code with the bottom input ready, but I suggest you try to understand carefully what's going on with Columns, Rows and Expanded widgets.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
title: "Mon app",
home: Scaffold(
appBar: AppBar(
title: Text("My app")
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "What to do?"
),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: (){
//do something
},
)
],
)
],
),
),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With