How to get ListView Component to scroll up on TextFieldInput - flutter

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.