DEV Community

ValerianaGitđź’™
ValerianaGitđź’™

Posted on • Updated on

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.

Top comments (1)

Collapse
 
pablonax profile image
Pablo Discobar

wow, that's awesome! if you are interested in this topic, then check this article - dev.to/pablonax/free-flutter-templ...