How to get ListView Component to scroll up on TextFieldInput

Question

UPDATE 7/15/2021:

I found another similar question that helped me a bit: Programmatically scrolling to the end of a ListView

As of now I am able to get it somewhat looking like what I want it to, but I am still getting an overflow issue.

Here is the updated Code

home.dart

class _HomePageState extends State<HomePage> {

  // added a scroll controller to control my ListView
  ScrollController scrollController = ScrollController(); 

  void addEntry() {
    setState(() {
      entryTextController.text = '';
      this.newEntry = !this.newEntry;
    });

  // on adding an item, I will scroll up in the ListView
    Timer(
        Duration(milliseconds: 100),
        () =>
        scrollController.jumpTo(scrollController.position.maxScrollExtent)
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: [
            Container(), 

               // instead of just the EntryList, I added a container
               // with a fixed height. I'll probably change this later
               Container(
               height: 500.0,
               child: EntriesList(props)
            )
          
          ],
        ),
        floatingActionButton: FloatingActionButton(onTap: addEntry)
        );
  }
}

EntryList.dart

class _EntriesListState extends State<EntriesList> {
    List<Widget> getEntries(snapshot) {

      myList = entryList.map<Widget>((entry) { 
        return Entry();
      }).toList();

      myList.add(Visibility(                  
          visible: widget.newEntry,
          child: Card(
              child: ListTile(
            title: TextFormField(),
          ))));

     // This is the newest change. By adding a Placeholder, I am able to 
     // bring the screen up on the scrollController bringing this into 
    // position so that the user can then see the TextFormField

      myList.add(Opacity(opacity: 0.0, child: Placeholder()))
    return myList;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _entryStream,
      builder: (BuildContext context, AsyncSnapshot snapshot) {

        // Async code here ... 

        return ListView(                     
          children: getEntries(snapshot),    
          padding: EdgeInsets.all(8.0),
          shrinkWrap: true,
        );
      },
    );
  }
}

ORIGINAL:

I'm working on adding an entry to my ListView widget. Within my ListView Widget, I have embedded a hidden TextFieldInput that is shown once a user clicks the addEntry button.

My main issue is that once the list gets long enough, my list does not scroll up to allow the user to see their new entry that they are typing.

Here is my current code. In order to keep my question concise, I have removed some unrelated code.

main.dart

class _HomePageState extends State<HomePage> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: [
            Container(), // top widget here

            // Scrollable list of dates
            EntriesList(),
          ],
        ),
        floatingActionButton: FloatingActionButton()
        );
  }
}

EntriesList.dart

class _EntriesListState extends State<EntriesList> {
  List<Widget> getEntries(snapshot) {
      
      myList = entryList.map<Widget>((entry) { // getting my entry widgets here
        return Entry();
      }).toList();

      myList.add(Visibility(                  // adding my hidden text input widget here
          visible: widget.newEntry,
          child: Card(
              child: ListTile(
            title: TextFormField(),
          ))));
    return myList;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _entryStream,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasError) {
          return Text("Something went wrong");
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }


        return ListView(                     // I added several properties in hopes that it would 
          children: getEntries(snapshot),    // work but to no avail
          padding: EdgeInsets.all(8.0),
          shrinkWrap: true,
          physics:
              BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
        );
      },
    );
  }
}

Answer 1

Use the SingleChildScrollView widget. Can be used in HomePage or EntriesList by simply wrapping it with the SingleChildScrollView widget. Like this in the home page:

class _HomePageState extends State<HomePage> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: [
            Container(), // top widget here

            // Scrollable list of dates
            SingleChildScrollView(child:widgetEntriesList()),
          ],
        ),
        floatingActionButton: FloatingActionButton()
        );
  }
}

Or like this in the EntriesList:

class _EntriesListState extends State<EntriesList> {
  List<Widget> getEntries(snapshot) {
      
      myList = entryList.map<Widget>((entry) { // getting my entry widgets here
        return Entry();
      }).toList();

      myList.add(Visibility(                  // adding my hidden text input widget here
          visible: widget.newEntry,
          child: Card(
              child: ListTile(
            title: TextFormField(),
          ))));
    return myList;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _entryStream,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasError) {
          return Text("Something went wrong");
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }


        return SingleChildScrollView(
          child:ListView(                    
            children: getEntries(snapshot),    // work but to no avail
            padding: EdgeInsets.all(8.0),
            shrinkWrap: true,
            physics:BouncingScrollPhysics(),
          )
        );
      },
    );
  }
}

Instead of wrapping ListView, you could instead wrap the StreamBuilder as well.