Flutter Create Expandable & Scrollable Text and TextField Widgets

valerianagit

ValerianaGit💙

Posted on April 27, 2021

Flutter Create Expandable & Scrollable Text and TextField Widgets

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.
💖 💪 🙅 🚩
valerianagit
ValerianaGit💙

Posted on April 27, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related