Flutter Create Expandable & Scrollable Text and TextField Widgets

ValerianaGit💙 - Apr 27 '21 - - Dev Community

If you would like to see the full context, check it out HERE in my github repo

Text

Expanded(
child: SingleChildScrollView(
//scrollable Text - > wrap in SingleChildScrollView -> wrap that in Expanded
child: Text(
'',
overflow: TextOverflow.visible,
),
),
);

TextField

Expanded(
//makes textfield scrollable - wrap in Expanded widget + maxlines = null
child: TextField(
maxLines: null, //wrap text
autofocus: true,
autocorrect: true,
cursorColor: Colors.purple[900],
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Notes and Thoughts',
),
onChanged: (newValue) {
newContent = newValue;
},
),
);

Notes

  • Read Expanded documentation - As of this writing, Expanded widget must be enclosed by a Row, column or flex widget. So do enclose the Expanded widget with whichever of these widgets will work for your content.
. . . . . . . . . . . . . . . . . . . .