Why is my TextField and List not showing when both are together in flutter

Question

I have just started learning flutter this week!, After following a 5 hour video I decided that I would be a good Idea to work on a to do list using my knowledge. I have been having some problems with the layout order because I am used to react native and html. So I have a TextField in which a user can type the a task and then submit it so that it can appear on a list of the added tasks which is below this textfield. In the process I realized that the code is not displaying anything. The code just shows something if the TextField is removed or the list is removed but it looks that they cant be in the same page. How can I fix that problem?

My current code which doesnt display anything (main.dart)

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<String> _toDoItems = [];

  void _addToDoItem(String task) {
    if(task.length > 0) {
      setState(() {  
        _toDoItems.add(task);
      });
    }
  }

  Widget _buildToDoItem(String toDoText) {
    return ListTile(
      title: Text(toDoText)
    );
  }

  Widget _buildToDoList() {
    return ListView.builder(
      itemBuilder: (context, index) {
        if (index < _toDoItems.length) {
          return _buildToDoItem(_toDoItems[index]);
        }
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50),
          child: AppBar(
            centerTitle: true,
            backgroundColor: Colors.red,
            title: Text('To Do List', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold,),),
          )
        ),
        backgroundColor: Colors.white,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                margin: EdgeInsets.all(22),
                child: TextField(
                  autofocus: true,
                  onSubmitted: (val) {
                    _addToDoItem(val);
                  },
                ),
            ), _buildToDoList(),
            
          ],
        ),
    
      ),
    );
  }
}

Now the following code is the one that does display the list but not the TextField

body:  _buildToDoList(),

code that does display the TextField but not the List

body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                margin: EdgeInsets.all(22),
                child: TextField(
                  autofocus: true,
                  onSubmitted: (val) {
                    _addToDoItem(val);
                  },
                  decoration: InputDecoration(
                    hintText: 'Add a tak here...',
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12.0)),
                      borderSide: BorderSide(color: Colors.red, width: 2),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(12.0)),
                      borderSide: BorderSide(color: Colors.red, width: 1.5),
                    ),
                  ),
                ),
            ), // the list widget here is removed so that the text field could appear
            
          ],
        ),

for button next to text field:

body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                margin: EdgeInsets.all(22),
                child: Row(children: [
                  TextField(
                    autofocus: true,
                    onSubmitted: (val) {
                      _addToDoItem(val);
                    },
                    decoration: InputDecoration(
                      hintText: 'Add a tak here...',
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),
                        borderSide: BorderSide(color: Colors.red, width: 2),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(12.0)),
                        borderSide: BorderSide(color: Colors.red, width: 1.5),
                      ),
                    ),
                  ),
                  RaisedButton(
                    child: Text('ADD'),
                    onPressed: null,
                  ),
                ],)
                
            ), 
            _buildToDoList(),    
          ],
        ),

Answer 1

You can copy paste run full code below
You can wrap ListView with Expanded
code snippet

Widget _buildToDoList() {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          if (index < _toDoItems.length) {
            return _buildToDoItem(_toDoItems[index]);
          }
        },
      ),
    );
  }

working demo

full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<String> _toDoItems = [];

  void _addToDoItem(String task) {
    if (task.length > 0) {
      setState(() {
        _toDoItems.add(task);
      });
    }
  }

  Widget _buildToDoItem(String toDoText) {
    return ListTile(title: Text(toDoText));
  }

  Widget _buildToDoList() {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          if (index < _toDoItems.length) {
            return _buildToDoItem(_toDoItems[index]);
          }
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: AppBar(
              centerTitle: true,
              backgroundColor: Colors.red,
              title: Text(
                'To Do List',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            )),
        backgroundColor: Colors.white,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.all(22),
              child: TextField(
                autofocus: true,
                onSubmitted: (val) {
                  _addToDoItem(val);
                },
              ),
            ),
            _buildToDoList(),
          ],
        ),
      ),
    );
  }
}

full code 2

    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<String> _toDoItems = [];

  void _addToDoItem(String task) {
    if (task.length > 0) {
      setState(() {
        _toDoItems.add(task);
      });
    }
  }

  Widget _buildToDoItem(String toDoText) {
    return ListTile(title: Text(toDoText));
  }

  Widget _buildToDoList() {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          if (index < _toDoItems.length) {
            return _buildToDoItem(_toDoItems[index]);
          }
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(50),
            child: AppBar(
              centerTitle: true,
              backgroundColor: Colors.red,
              title: Text(
                'To Do List',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            )),
        backgroundColor: Colors.white,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
                margin: EdgeInsets.all(22),
                child: Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: TextField(
                        autofocus: true,
                        onSubmitted: (val) {
                          _addToDoItem(val);
                        },
                        decoration: InputDecoration(
                          hintText: 'Add a tak here...',
                          enabledBorder: OutlineInputBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(12.0)),
                            borderSide: BorderSide(color: Colors.red, width: 2),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(12.0)),
                            borderSide:
                                BorderSide(color: Colors.red, width: 1.5),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: RaisedButton(
                        child: Text('ADD'),
                        onPressed: null,
                      ),
                    ),
                  ],
                )),
            _buildToDoList(),
          ],
        ),
      ),
    );
  }
}