Develop Reference

Flutter - can I make a SingleChildScrollView fill the available space?

I have a Flutter app which I'm building for Android. The structure goes broadly like this:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: SingleChildScrollView(
child: Container(
decoration: const BoxDecoration(
gradient: ...
),
child: ...
),
)
);
}
The goal here is to have the gradient background fill all the screen below the app bar, and if the content is larger than that space then to make it scrollable.
If I omit the SingleChildScrollView, the Container fills the space. But of course if it overflows then there is no scrolling. With the code as above, the scroll view does its thing on small screens but on large screens the gradient background doesn't fill the whole available area.
If I change it around like this:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: Container(
decoration: const BoxDecoration(
gradient: ...
),
child: Column(children: [
SingleChildScrollView(
child: ...
),
Expanded(child:Container())
]),
)
);
}
then the gradient fills the background but the scroll view doesn't do the right thing - the content overflows the screen but can't be scrolled. How do I get it to do both?

The reason you're facing this issue is that your container is inside the SingleChildScrollView Widget and is getting scrolled along the SingleChildScrollView Widget. And Removing the SingleChildScrollView will result in renderflex overflow error
The Expanded keyword will throw incorrect use of ParentDataWidget
Also, you have added SingleChildScrollView widget inside the column you have to swap these well
Here is an example that I have given which will help you achieve it.
Widget build(BuildContext context) {
return Scaffold(
body: Container(
// Add The Container gradient here
width: double.infinity,
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 100,
width: 50,
color: Colors.red,
),
Container(
height: 100,
width: 50,
color: Colors.blue,
),
Container(
height: 1000,
width: 50,
color: Colors.yellow,
),
Container(
height: 1000,
width: 50,
color: Colors.orange,
),
],
)),
));
}

Hero Animation intially overflows then adjusts

Building a hero animation for list->detail, with responsive layouts for screen sizes.
Initially upon transitioning I get a brief renderflex error then it adjusts and is fine.
I solved this with the column (phone) layout with a ListView but the other layout is a row (side by side screens). No matter what combination of flexes and expanded and Lists and every other widget I could think of, I can't get it solved. Thanks
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
child: Hero(
tag: content.timestamp,
child: MediaQuery.of(context).size.width < 600
? ... Column layout
: Row(
children: [
FadeInImage.assetNetwork(
placeholder: 'assets/icons/barc-lodge.png',
image: 'https://www.barclodge.ca/android/diary/${content.image}',
width: 300,
),
// Expanded exists to wrap text
Expanded(
child: diaryContent(context, content),
),
],
),
),
onTap: () => Navigator.pop(context),
),
);
}
Widget diaryContent(BuildContext ctx, BarcLodgeDiary words) {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(12.0, 12.0, 0.0, 0.0),
child: Text(words.title, style: Theme.of(ctx).textTheme.headline1),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Text('${words.datestamp} at ${words.timestamp}', style: Theme.of(ctx).textTheme.caption),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(words.diaryentry, style: Theme.of(ctx).textTheme.bodyText1),
),
],
);
}

This might be your issue. The Hero widget needs a Material widget inside it to provide a canvas for the splash, you can read about it in the docs here. The section is about building your own hero widget but I think it still applies, if this doesn't fix your issue, try wrapping the Hero widget with the Material widget.

One thing I did not try apparently in a couple hours was GridView. Remove the Expanded, change Row to GridView.count and everything is a-ok.

Borderless selection highlight effect in Flutter

Context: I'm rewriting my Android app with Flutter. On Android, there was this interesting touch feedback effect when setting clickable View's background property to ?android:selectableItemBackgroundBorderless:
Note that the red border wasn't in the real UI, it's there just to show View's borders. As you can see, the ink forms a circle that is circumscribed around the rectangular view.
I would like the ink in my Flutter app to be also circumscribed around the view, i.e. the selection area needs to be circular and to encompass the view. I'm trying to achieve this by using InkResponse component, but the result looks miserable:
The body of the Scaffold used in the example:
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Material(
color: Color(0xff008080),
child: Center(
child: InkResponse(
onTap: () {
/* ... */
},
child: Container(
child: Center(
child: Text('BUTTON'),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
width: 200.0,
height: 200.0,
),
highlightColor: Colors.transparent,
),
),
),
),
If I make the radius property of the InkResponse big enough, it can go beyond the view's bounds, and if my view had static size, I could tweak the property to achieve the desired effect, but in my real app it's dynamic.
Is it possible to do it without making a custom component?

For these purposes, I think InkResponse should be used:
Container(
width: 80,
height: 80,
child: InkResponse(radius: 110, onTap: () {}, child: Text("text")));
Working Example

Have you tried this, its click is bound into the red area.
Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Material(
color: Color(0xff008080),
child: Center(
child: InkWell(
onTap: () {
/* ... */
},
child: Container(
child: Center(
child: Text('BUTTON'),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
),
highlightColor: Colors.transparent,
),
),
),
),

Flutter Multiline for text

All I need is my text to be multi-line. Am giving the property of maxLines but its still getting RenderFlex overflowed error to the right as the next is not going to 2nd line,
Align( alignment: Alignment.bottomCenter,
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(20.0),
child: new Text(
"This is a very bigggggggg text !!!",textDirection: TextDirection.ltr,
style: new TextStyle(fontSize: 20.0, color: Colors.white),
maxLines: 2,
),
)
],
),
)

Short answer
All that is required for multi-line text, is that your Text() widgets' width is limited by a parent widget. For example:
SizedBox(
width: 150,
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
),
),
Long answer
Minimal working example + explanation:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold( //Text widgets, multi-line or not, need a Scaffold widget somewhere up the widget tree.
body: Row( //Widgets which help to display a list of children widgets are the 'culprit', they make your text widget not know what the maximum width is. In OP's example it is the ButtonBar widget.
children: [
Container(
width: 100, //This helps the text widget know what the maximum width is again! You may also opt to use an Expanded widget instead of a Container widget, if you want to use all remaining space.
child: Center( //I added this widget to show that the width limiting widget doesn't need to be a direct parent.
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
),
),
),
],
),
),
);
}
}
Extra
You also mentioned maxlines. This property limits the
maximum amount of lines. If this is what you want, I recommend you also play with the overflow property.
SizedBox(
width: 100,
child: Text(
"This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
UPDATE
I came across this video on the official Flutter channel which explains this issue quite well. They recommend using a LimitedBox widget.

Just wrap your text widget with Expanded as below
Expanded(
child: Text('data', maxLines: 4,
overflow: TextOverflow.ellipsis,
textDirection: TextDirection.rtl,
textAlign: TextAlign.justify,),
),

try this:
Expanded(
child: Text(
'a long text',
overflow: TextOverflow.clip,
),
),
in my implementation I put this inside a row and surrounded it with sized boxes on each side so that I have some space between my elements, why using expanded you may ask, well it's used to take as much space as possible so the text would look good in portrait or landscape mode.
and here is a full example on how to make it even react vertically not just horizontally:
Card(
child: InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
SizedBox(
height: 70, // default\minimum height
),
Container(
height: 44,
width: 44,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(22))),
),
SizedBox(
width: 15,
),
Expanded(
child: Text(
'the very long title',
overflow: TextOverflow.clip,
),
),
SizedBox(
width: 10,
),
Text(
'value', //some other text in the end of the card or maybe an icon instead
),
SizedBox(
width: 30,
),
],
),
),
),
)

I think you forgot to add overflow type.
You can use something like this:
Text(
"TOP ADDED",
textAlign: TextAlign.justify,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 18.0),
maxLines: 2,)

Use Expanded widget with column to achieve multiline text.
Expanded(child:
Column(crossAxisAlignment: CrossAxisAlignment.start ,
children: [
Text(food.title),
Text(food.price)
]
))

Just wrap the text widget in Flexible. As it only use space that it need.
After maxLines, it just cut to ellipsis.
If you want unlimited lines, just remove maxLines attribute. With the help of Flexible, it uses space which widget needs.
Flexible(
child: Text('Long Text', maxLines: 3,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
),
),

Best way to handle this:
Expanded(
child: Text(document['content'],
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
maxLines: 20,
))

You can use this trick.
Text( ''' This is very big text''' ),
Just wrap a text around three single quotes and flutter will format a text as per its length . No need to use max lines and text field.

Maybe try using TextField:
new TextField(
keyboardType: TextInputType.multiline,
maxLines: 2,
)

wrap your Text widget with AutoSizeText widget and also Flexible widget.
AutoSizeText adjust your text size as per the screen size
Flexible control your widget not to overflow outside
for get AutoSizeText you have to add dependency.
auto_size_text: ^3.0.0 - Example

Maxline is used for set how many lines you want to set or see.
Text(
"Name Safal Bhatia",
style: TextStyle(fontSize: 16),
maxLines: 3,)

Flutter Keyboard makes textfield hide

I'm new to flutter. I've added a form with a text field and when I clicked the textfield and keyboard comes, the textfield goes up.
This is my code :
Widget build(BuildContext context) {
MediaQueryData mediaQuery = MediaQuery.of(context);
return new Scaffold(
body: new Container(
color: Colors.purple,
constraints: new BoxConstraints.expand(),
padding: EdgeInsets.only(top: 10.0,left: 10.0,right: 10.0, bottom: mediaQuery.viewInsets.bottom, ),
child: SingleChildScrollView(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 12.0),
Text(
'What is your Business Name?',
style: TextStyle(fontSize: 24.0),
),
AppForm(),
],
),
padding: EdgeInsets.only(left: 10.0,right: 10.0, bottom: mediaQuery.viewInsets.bottom),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
color: Colors.white,
),
)
)
),
);
}
This is the result without opening the keyboard:
Image without keyboard
This is the image after opening the keyboard:
Image after opening the keyboard
Here is my flutter doctor output.
Doctor summary (to see all details, run flutter doctor -v): [√] Flutter
(Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale
en-US) [√] Android toolchain - develop for Android devices (Android SDK
28.0.0) [√] Android Studio (version 3.1) [!] VS Code, 64-bit edition (version
1.25.1) [!] Connected devices ! No devices available ! Doctor found issues in
2 categories.
any idea how to fix this?

new Scaffold(
appBar: new AppBar(
...
resizeToAvoidBottomInset: true,
....
Fixed problem textfield was hidden by keyboard

This answer is not specific the question above but may be useful to those who are still having issues with the keyboard covering the selected text field, no matter what they do. I got to this page while trying to resolve such an issue.
Prior to the problem I had been making some changes to try and improve my splash screen on app startup. As per someone's recommendation, I had included the following line in the <resources><style> section of the styles.xml file in the android/app/src/main/res/values folder
<item name="android:windowFullscreen">true</item>
This had the unexpected effect of stopping any fields scrolling up in the main app when the keyboard is displayed. This might be obvious to some, but it wasn't to me.
Hope this info helps someone.

This was the case with me . You are definitely wrapping a scaffold inside another scaffold . there should be only one scaffold widget inside your flutter app i.e the main layout . Simple remove all the ancestor scaffolds you have and keep only one scaffold . dont wrap a scaffold into another scaffold .inspite of that you can wrap a scaffold inside a container .
Make sure in your main.dart file you are not doing this :-
✖✖
return Scaffold(
body : YourNewFileName(),
);
Inspite of the above code do this:-
✔✔
return YourNewFileName();

You can simply wrap the widget you want to never be hidden by the keyboard inside a padding, like follow :
Padding(
child: YourWidget()
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom));

resizeToAvoidBottomPadding is Deprecated
use instead resizeToAvoidBottomInset: true

<item name="android:windowFullscreen">true</item>
Removing above line from
android/app/src/main/res/values/styles.xml
made my app fixed to input field auto scroll upwards to come in view able on keyboards opens
thanks #GrahamD

You should add SingleChildScroolView into your Scaffold and add reverse: true into your SingleChildScroolView
Scaffold(
body: SingleChildScrollView(
reverse: true,
child: Container()));

Just cut and paste your body code in this -
SingleChildScrollView(
child: Stack(
children: <Widget>[
// your body code
],
),
),
had the same issue got the answer here

If you are using Scaffold than wrap the body with SingleChildScrollView
for Example like this:
...
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
TextField(),
TextField(),
TextField(),
],
),
),
);
...
this was really a lifesaver for me.
Now the scaffold will become scrollable.

resizeToAvoidBottomInset is true by default.
return Scaffold(
resizeToAvoidBottomInset: false,
);
I set it to false and it worked fine

Consider using scroll padding on the Textfield
return Scaffold(
appBar: AppBar(
title: Text("Demo SoftKeyboard"),
),
body: SingleChildScrollView(
child: Column(
children: [
TextField(
scrollPadding: EdgeInsets.only(bottom:40), // THIS SHOULD SOLVE YOUR PROBLEM
),
],
),
),
);

The fix for me was similar to GrahamD's answer.
I was declaring my own theme using a parent that had .Fullscreen, for example:
<style name="NormalTheme" parent="#android:style/Theme.Black.NoTitleBar.Fullscreen">
<item name="android:windowBackground">#android:color/white</item>
</style>
I've raised an issue with the Flutter team because it should be possible to use a Fullscreen theme and have normal Chat app behaviour.

I resolved the above issue by adding a Stack() as the body of my Scaffold(), this allows the TextField() object to slide up above the soft keyboard. Initially I used SingleChildScrollView() for the body which resulted in the TextField() objects being obscured by the soft keyboard.
Solution that worked for me:
child: Scaffold(
resizeToAvoidBottomInset: true,
body: Stack(
children: <Widget>[]

As per the flutter updates(2021), "resizeToAvoidBottomInset:true" gives a yellow-black strip error when keyboard appears.
This is how I fixed the above issue:
Inside build() method, check if keyboard is open, bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
Set resizeToAvoidBottomInset:true inside Scaffold
Wrap your widget with a SizedBox() and set height like this: height: keyboardIsOpen
? MediaQuery.of(context).size.height * 0.2
: MediaQuery.of(context).size.width * 0.6,

In Flutter, to prevent from this problem - Flutter Keyboard makes TextField hidden – we can do an easy job. We have to Wrap the TextFields with SingleChildScrollView as a widget for body argument in Scaffold. Only use SingleChildScrollView in that place. If you did not do so, it would not work well. For instance:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("App"),
),
body: SingleChildScrollView(
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width: double.infinity,
child: Card(
color: Colors.blue,
elevation: 5,
child: Text()
),
),
TextField(),
TextField(),
],
Also, there is another way do this. In the above code, you can replace Column with ListView Widget like the below code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("App"),
),
body: Container(
height: 300,
child: ListView(
children: [
Container(
width: double.infinity,
child: Card(
color: Colors.blue,
elevation: 5,
child: Text(),
),
),
TextField(),
TextField(),
],

Here's a complete example which dynamically updates the padding:
import 'dart:ui';
import 'package:flutter/material.dart';
class KeyboardPaddingTest extends StatefulWidget {
const KeyboardPaddingTest({Key? key}) : super(key: key);
#override
_KeyboardPaddingTestState createState() => _KeyboardPaddingTestState();
}
class _KeyboardPaddingTestState extends State<KeyboardPaddingTest> {
EdgeInsets _viewInsets = EdgeInsets.zero;
SingletonFlutterWindow? window;
final _textFieldController = TextEditingController();
#override
void initState() {
super.initState();
window = WidgetsBinding.instance?.window;
window?.onMetricsChanged = () {
setState(() {
final window = this.window;
if (window != null) {
_viewInsets = EdgeInsets.fromWindowPadding(
window.viewInsets,
window.devicePixelRatio,
).add(EdgeInsets.fromWindowPadding(
window.padding,
window.devicePixelRatio,
)) as EdgeInsets;
}
});
};
}
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.greenAccent[100],
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.only(bottom: _viewInsets.bottom),
child: Column(
children: [
Expanded(
child: Center(
child: Container(
width: 200.0,
color: Colors.lightBlueAccent[100],
child: TextField(
controller: _textFieldController,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Tap to show keyboard',
),
),
),
),
),
const Text(
'Testing Keyboard',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
}

Be careful to do not remove those two lines from AndroidManifest.xml
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
I did this mistake, all my SingleChildScrollView were not working and the keyboard was hidding the textfield of all my form.

If you use ScreenUtilInit package then maybe setting useInheritedMediaQuery: true in the constructor of ScreenUtilInit will help you. It helped me :)

I also faced with this issue. This's my solution:
1/ Wrap the Column Widget (content of Dialog) inside the Padding Widget with property padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom,)
2/ Wrap all widgets above inside SingleChildScrollView
Below is full code for my Dialog:
Future<T?> showDialogLikeBorrowBook<T>(
BuildContext context, {
bool barrierDismissible = true,
required String labelDialog,
required String labelMainButton,
required Widget contentDialog,
required Function() onTap,
}) async {
return await showGeneralDialog(
context: context,
barrierLabel: "barrierLabel",
barrierDismissible: barrierDismissible,
barrierColor: Colors.black.withOpacity(0.4),
transitionDuration: const Duration(milliseconds: 300),
transitionBuilder: (_, anim1, __, child) {
return ScaleTransition(
scale: Tween<double>(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: anim1,
curve: Curves.fastOutSlowIn,
),
),
child: child,
);
},
pageBuilder: (_, __, ___) {
return Material(
type: MaterialType.transparency,
child: Align(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: R.dimens.mediumSpacing1)
.copyWith(
top: MediaQuery.of(context).viewPadding.top, // This attribute used to make sure the Dialog widget always show below the AppBar/StatusBar
//if the Dialog widget has size with height large more normal size when the keyboard be shown
),
child: GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode()); // Wrap Dialog widget inside Gesture Detector to every time the user tap outside the TextField widget but still inside scope of Dialog widget,
//the FocusNode of TextField will be unfocus
},
child: Container(
constraints: const BoxConstraints(maxWidth: double.infinity),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(R.dimens.smallRadius)),
color: Colors.white,
),
padding: EdgeInsets.all(R.dimens.mediumSpacing),
child: _ShowContentDialog(
labelDialog: labelDialog,
labelMainButton: labelMainButton,
contentDialog: contentDialog,
onTap: onTap,
),
),
),
),
),
);
},
);
}
class _ShowContentDialog extends StatelessWidget {
const _ShowContentDialog();
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom, // This attribute will auto scale size of Column widget when the keyboard showed
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_renderLabelDialog(),
... something widget,
CustomTextField(
labelTextField: "Ghi chú",
hintText: "Nhập ghi chú",
textInputType: TextInputType.text,
maxLines: 4,
textController: _editNoteController,
),
_renderButton(context),
],
),
),
);
}
}
Dialog without the keyboard
Dialog with the keyboard when touch on the TextField widget

Wrap the entire widget in a Scaffold, then all other widgets contained in a SingleChildScrollView.

I had same problem i also used SingleChildScrollView but that doesn't solved my problem.
My problem was accruing in this code.
Stack(
childern:[
SingleChildScrollView(),// In scollView i have textFeild when keyboard opens doneButton hide the textFeild.
doneButtonWidget()//this button align with the bottom of the screen.
]
)
To Solve the problem i follow this and it solved my problem.
Column(
childern:[
Expaned(
child:SingleChildScrollView(),// In scollView i have textFeild when keyboard opens doneButton hide the textFeild.
flex:1
),
doneButtonWidget()//this button align with the bottom of the screen.
]
)