Solvedflutter Wrapping a Column with an expanded in a SingleChildScrollView throws an exception
escamoteur posts at
30 Answers
Share
Original✔️Accepted Answer
It can be done this way:
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AppBar'),
),
body: LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Text('header'),
Expanded(
child: Container(
color: Colors.green,
child: Text('body'),
),
),
Text('footer'),
]
),
)
)
);
})
);
}
}
Other Answers:
One workaround I tries was to have an Expanded widget with an empty container. Then whatever you want to add to bottom, add it after the expanded container.
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(),
body: new Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Text(
'Line 1',
),
new Text(
'Line 2',
),
new TextField(),
Expanded(child: new Container(),),
Column(
children: <Widget>[
new TextField(),
new Text(
'Should be at the bottom',
),
],
)
],
),
);
}Does this help?
You must make Container height equals to double.maxInfinite
child: Container( height: double.maxFinite, child: .....
Working fine for me in master branch 2.1.0-30.
fwiw, here's a re-usable null safe version of this:
class ScrollableColumn extends StatelessWidget {
const ScrollableColumn(
{Key? key,
required this.children,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.textDirection,
this.mainAxisAlignment = MainAxisAlignment.start,
this.mainAxisSize = MainAxisSize.max,
this.verticalDirection = VerticalDirection.down,
this.textBaseline})
: super(key: key);
final List<Widget> children;
final CrossAxisAlignment crossAxisAlignment;
final TextDirection? textDirection;
final MainAxisAlignment mainAxisAlignment;
final MainAxisSize mainAxisSize;
final VerticalDirection verticalDirection;
final TextBaseline? textBaseline;
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (_, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
// Constrained box stops the column from getting too small, forcing it to be at least as tall as it's parent
constraints: BoxConstraints(minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
// Intrinsic height stops the column from expanding forever when it's height becomes unbounded
// It will always use the full height of the parent, or the natural size of the children, whichever is greater.
child: IntrinsicHeight(
child: Column(
children: children,
crossAxisAlignment: crossAxisAlignment,
textDirection: textDirection,
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
verticalDirection: verticalDirection,
textBaseline: textBaseline,
),
),
),
);
});
}
}
Usage:
Widget build(BuildContext context){
Widget _box(String name) =>
Container(color: RandomColor().randomColor(), child: Text(name, style: TextStyle(fontSize: 128)));
return ScrollableColumn(
children: [
Expanded(child: _box("Content1")),
Expanded(child: _box("Content2")),
Expanded(child: _box("Content3")),
],
)
}
Scz2u5yuet.mp4
The recent refactor of SliverFillRemaining (#35810) should be able to provide a solution here as well.
I've re-worked the workaround above to illustrate:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AppBar'),
),
body: SafeArea(
child: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: TextField(),
),
SliverFillRemaining(
hasScrollBody: false,
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Container(
color: Colors.green,
child: Text('body'),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
child: Text('Bottom'),
onPressed: () {},
),
),
],
),
),
),
],
),
),
);
}
}There is another use case in #38641 that shows another SliverFillRemaining layout.
Issues #38640 and #35753 refer to improving documentation around this widget and others that use flexible spacing/sizing and scrolling views.
Related Issues:
782
flutter Android dependency 'androidx.core:core' has different version for the compile (1.0.0) and runtime (1.0.1) classpath. You should manually set the same version via DependencyResolution
Still does not work after all the suggestions No joke I know what this problem means but I don't kno...
459
flutter Multiple commands produce '/build/ios/Debug-iphonesimulator/Runner.app/Frameworks/Flutter.framework
I was able to fix it by opening the Runner workspace project in Xcode 10 Then navigate to File ...
449
flutter App Store iOS submission fails: The bundle Runner.app/Frameworks/App.framework does not support the minimum OS Version specified in the Info.plist
After doing a flutter clean changing MinimumOSVersion (inside /ios/Flutter/AppframeworkInfo.plist) t...
418
flutter 'com.android.support:appcompat-v7' has different version for the compile (26.1.0) and runtime (27.0.1) classpath
is like this i receive an error when i run flutter run My gradle.build file is: flutter doctor: ...
409
flutter Why does my text not wrap?
You have to wrap Column in a flexible Without flexible the column's width is not constrained to the ...
383
flutter Unexpected top padding in ListView put inside scaffold with no appBar
Yeah this is intentional If you put a widget before the ListView you should wrap the ListView with a...
315
flutter Missing xcode dependency: Python module "six"
try python2.x -m pip install six by @humblerookie's suggest or brew reinstall python@2 pip install s...
285
flutter flutter messaging: set the notification icon
Hey guys I fought with this for the better part of a day For some strange reason there are no tutori...
281
flutter Issue with cloud_firestore - Cannot fit requested classes in a single dex file.
As a workaround you can try enabling mutlidex for Android App by following Enable multidex for apps ...
265
flutter D8: Program type already present: io.flutter.BuildConfig
@smrucv I received the same error but after flutter clean and flutter packages get everything works ...
250
flutter Wrapping a Column with an expanded in a SingleChildScrollView throws an exception
It can be done this way: Hi lets take this simple App ...
238
flutter Introduction of characters package causes crash on flutter run for preexisting Flutter applications
In my case I resolved the issue with flutter clean After e0ed12c I get this error when building: @ju...
221
flutter Making Network http error SocketException: Failed host lookup
@hoc081098 Double-check / make sure you have <uses-permission android:name=android.permission.INTERN...
216
flutter Support inlining Android/iOS views
iOS view embedding support has landed on master This is still just a preview There are multiple open...
207
flutter ✗ Android license status unknown.
Hi everyone Steps to Reproduce Please tell us what you were doing and what went wrong If you are run...
185
flutter idevice_id cannot run on catalina
When you're developing on Catalina Steps to Reproduce Run flutter doctor on macOS Catalina I get the...
181
flutter type 'List<dynamic>' is not a subtype of type 'List<String>'
The problem is your fromMap constructor is reading from a Map<String dynamic> ...
178
flutter TextField is hidden by keyboard inside of a Modal Bottom Sheet
This may not work for all situations but I have a modalBottomSheet that contains only a TextField ...
160
flutter Dismissing keyboard programatically
This is a better way as it also clears the focus: FocusScope.of(context).requestFocus(new FocusNode(...
157
flutter How to solve: Android license status unknown and also Android sdkmanager tool not found? Tried everything(as i think)
The answer is here Uncheck Hide Obsolete Packages and you'll see Android SDK Tools (Obsolete) 26.1.1...
156
flutter MissingPluginException: No implementation found for method
@mravn-google Yeah turned out I had to quit the flutter run process and start it up again Just a ful...
156
flutter firebase_auth: ^0.8.0+1 crashes on Android
Here i put this in file: android/gradle.properties: and changed targetSdkVersion to 28 and it worked...
153
flutter Android sdkmanager tool not found (C:...\Local\Android\sdk\tools\bin\sdkmanager)
This worked for me: open Android Studio's SDK Manager go to the Android SDK tab under SDK Tools ...
149
flutter 1.22.2 - Flutter plugin not installed; this adds Flutter specific functionality.
Hey @bhanuka96 try this line of code How do I fix this android plugin error? This error is being com...
139
flutter [ios][release] GeneratedPluginRegistrant.m Module not found
I may have found the answer from this comment: #21989 (comment) Seems like by opening up the project...
137
flutter [App.framework] Linked and embedded framework 'App.framework' was built for iOS/iOS Simulator
Does rm -rf ios/Flutter/App.framework get you unstuck? SOLUTION @jmagman has written an article on h...
134
flutter Bad state: Future already completed
I had the same issue.. The problem was the same that @soaresgabriel said but I was not navigating di...
129
flutter Execution failed for task ':app:compileFlutterBuildDebug' Issue
Hi @Ramihtet your logs show a different flutter version; could you please run flutter channel stable...
124
flutter Unable to load Asset - wrong indentation in pubspec.yaml
Is your assets key underneath a flutter: key as well? https://flutter.io/assets-and-images/ ...
124
flutter Flutter 1.12.13+hotfix.5: Flutter Run: The shrinker may have failed to optimize the Java bytecode.
The plugin seems to work correctly after adding minifyEnabled true as shown above in app-level build...
121
flutter Create iOS IPA from command line
This is what I ended up using as a complete release script ready for uploading to the Play Store/App...
118
flutter FutureBuilder rebuilds unnecessarily when we long press on FAB button or appBar UI.
Hello I believe the problem here is that didUpdateWidget of the FutureBuilder state is being called ...
112
flutter LinearGradient stops/colors properties as named parameters fail
Ah nice I'm on master but also had to flutter clean and then restart VS Code and now it has gone awa...
109
flutter gradle initializing taking forever
MacOS Android Studio 3.0.1 Try to install gradle manually (https://services.gradle.org/distributions...
102
flutter invalid text selection: TextSelection with TextEditingController
Can also confirm clearing text in single textfield throws exactly same exception FocusScope.of(conte...
102
flutter Bad state: Unexpected diagnostics:
Was able to fixed After add this in pubspec.yaml the error gone Thanks #62996 and #62240 ...
98
flutter [cloud_firestore 0.12.6] CloudFirestorePlugin.m:6:9: fatal error: 'UserAgent.h' file not found
I tried this • flutter clean • Clean Build Folder from Xcode • delete Podfile.lock But this didn't w...
95
flutter How to run on iOS simulator?
Make sure you have run sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xc...
95
flutter some firebase_core issue after upgrading flutter from 1.23.0 to 1.25.0
what helped at least logs ...
92
flutter flutter run failed due to 'Permission denied' when replacing signature of 'Flutter.framework'
After investigating i think the root cause was the xcode_backend.sh will mark the files under Flutte...
91
flutter [firebase_crashlytics] Gradle build failed
@TheVinhLuong Had the same issue your workaround worked thanks! @livingstonex If you've followed ins...
91
flutter "Minimum supported Gradle version is 5.4.1. Current version is 4.10.2."
Ran across this problem myself If anyone comes across this from google Steps to Reproduce Not much i...
91
flutter Analyzer 0.39.15 seems to break build_runner or json_serializable
For anyone searching here you can set the override for now inside your pubspec.yaml: As explained in...
89
flutter Execution failed for task ':firebase_auth:compileDebugJavaWithJavac'.
This is what helped me: Go to android/app/build.gradle file and change compileSdkVersion and targetS...
88
flutter flutter doctor returns [Unhandled exception: Exception: idevice_id returned an error]
running sudo pkill usbmuxd worked for me on Mac OSX I ran the flutter doctor there were some brew in...
88
flutter "-bash: webdev: command not found"
This worked for me: I am trying to get the web flutter running Updated the bash_profile with export ...
86
flutter [Error: Could not resolve the package 'characters' in 'package:characters/characters.dart'.] after enabling web
Hi @gamepro110 new project follow steps on this link for the SETUP only trying to build for android ...
85
flutter type 'Color' is not a subtype of type 'MaterialColor' of 'primarySwatch' where Color is from dart:ui
Looks like this is working as intended: primarySwatch takes a ColorSwatch [which MaterialColor exten...
83
flutter TextFormField Android "Failed assertion: 'initialValue == null || controller == null': is not true." Despite controller being null in debug.
I just had this problem For anyone else coming along check if you have passed both initialValue and ...
82
flutter AAPT: error: resource android:attr/fontVariationSettings not found after Flutter Upgrade
Setting compileSdkVersion 28 in app/build.gradle fixed the issue for me. My flutter application used...
Hi,
lets take this simple App, it should have a Textfield and a Text always at the bottom of the screen:
Which is a pretty common use case. Unfortunately the Textfield at the bottom won't get scrolled into view when getting focus so I wrap the Scaffold in a
SingleChildScrollViewwhich leads to this exception:Moving the
SingleChildScrollViewinside the Scaffold's body doesn't work either:I know that there is a workaround explained here https://docs.flutter.io/flutter/widgets/SingleChildScrollView-class.html but for such a standard requirement of using
Expandedinside a Column that must be able to scroll up when the keyboard appears there should be a better solution. @Hixie wrote that Scaffold would take care of this but obviously doesn't.Please see also #18558 which shows another limitation of the workaround.
The sample app is here https://github.com/escamoteur/column_in_scrollable_repro