Related
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,
),
],
)),
));
}
I have a text element which should be aligned to the left but for some reason it appears centered and I can't figure out why.
What code should be changed / added to make the result string aligned to the right?
return Positioned(
bottom: 0,
right: 0,
left: 0,
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 30),
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
//First row here. The one below is the second row:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 5.0),
child: Icon(Icons.comment),
),
Expanded(
child: Column(children: [
Padding(
padding: EdgeInsets.only(
top: 10.0, left: 5.0, right: 0),
child: Text(
result, //This text is centered. Why?
maxLines: 7,
overflow: TextOverflow.ellipsis,
)),
]),
)
],
),
],
)
)
)
);
It's because row or column alignment.
By default column is centering children, to change that update:
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
...
If this does not solve your problem check:
Under which circumstances textAlign property works in Flutter?
More info on column/row alignment:
https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041
You can use direction for this purpose.
For example:
MaterialApp(
builder: (context, child) {
return Directionality(
textDirection: TextDirection.rtl,
child: child,
);
},
);
In accordance to https://api.flutter.dev/flutter/widgets/Column-class.html on Column-Class, the Column widget does not scroll (and in general it is considered an error to have more children in a Column than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView. For a horizontal variant, see Row.
Also, if you only have one child, then consider using Align or Center to position the child.
For your case, you could add the property crossAxisAlignment to your column as following
... Column(crossAxisAlignment: CrossAxisAlignment.end, ...
as mentioned by #nuts so the text will be align right. Here is a full example also from the above reference under https://api.flutter.dev/flutter/widgets/Expanded-class.html, that i just modified to illustrate how to do it:
/// Flutter code sample for Expanded
// This example shows how to use an [Expanded] widget in a [Column] so that
// its middle child, a [Container] here, expands to fill the space.
//
// 
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({
Key ? key
}): super(key: key);
static
const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({
Key ? key
}): super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Expanded Column Sample'),
),
body: Center(
child: Column(
children: < Widget > [
Container(
color: Colors.blue,
height: 100,
width: 100,
),
Expanded(
child: Container(
color: Colors.amber,
width: 100,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: < Widget > [
Text('We moved this text to the right')
],
),
Container(
color: Colors.blue,
height: 100,
width: 100,
),
],
),
),
);
}
}
Hope, this will help!
I've very much a beginner in Dart and Flutter, and my project is to learn while building an app. I've learned the basics with an online class and I have basis in Java.
Now, in my homepage, I'm trying to have 4 buttons take the whole screen. My current layout is to have them all take an equal amount of space and be stacked vertically.
Problem is, I can't find a way to make the RaisedButton fill automatically. I've tried retrieving the height of the screen and dividing that between the buttons but it's not working. Here's how I do it :
First, the homescreen layout:
class Homescreen extends StatelessWidget {
Widget build(context) {
double height = MediaQuery.of(context).size.height - 60;
return Scaffold(
body: SafeArea(
child: ListView(
children: [
PlanningButton(height),
Container(margin: EdgeInsets.only(top: 20.0)),
BookingButton(height),
Container(margin: EdgeInsets.only(top: 20.0)),
ModifyButton(height),
Container(margin: EdgeInsets.only(top: 20.0)),
CancelButton(height),
],
),
),
);
}
As you can see, I pass the height argument to my buttons all built around this model:
Widget PlanningButton(double pixel_y) {
return RaisedButton(
padding: EdgeInsets.all(pixel_y / 8.0),
onPressed: () {}, //goes to the planning screen
color: Colors.blue[200],
child: Text("Planning"),
);
}
Yet, it's never quite right. I don't think it's taking into account the notification bar or the navigation bar.
I suspect there is a workaround that involves wrapping the buttons into a container or using a different kind of widget that have button-like properties but I can't find what suits my needs.
Thanks for any help !
edit: I'm basically trying to do this
Try removing the variable height logic, and simply wrap your buttons in Expanded widgets. This is pretty much what it was built for.
Check it out here: https://api.flutter.dev/flutter/widgets/Expanded-class.html
You could use a Column and Expanded to do the job. If you want to make your Column scrollable, you can wrap it with SingleChildScrollView. I used SizedBox instead of Container to make the spacing because it is way more efficient and is designed for it.
class Homescreen extends StatelessWidget {
Widget build(context) {
double height = MediaQuery.of(context).size.height - 60;
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: PlanningButton(height)
),
SizedBox(height:20),
Expanded(
child: BookingButton(height),
),
SizedBox(height:20),
Expanded(
child: ModifyButton(height),
),
SizedBox(height:20),
Expanded(
child: CancelButton(height),
),
],
),
),
);
}
If 4 buttons are the only widgets, you dont need to use ListView just use a Column with mainAxisAlignment: MainAxisAlignment.spaceEvenly
class Sample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Center(
child: RaisedButton(
onPressed: () {},
child: Text("button"),
),
),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Center(
child: RaisedButton(
onPressed: () {},
child: Text("button"),
),
),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Center(
child: RaisedButton(
onPressed: () {},
child: Text("button"),
),
),
),
),
Expanded(
child: Container(
color: Colors.yellow,
child: Center(
child: RaisedButton(
onPressed: () {},
child: Text("button"),
),
),
),
),
],
),
),
);
}
}
Before you read this, it's not the best way to do things but it's one I'm using at least for prototyping. You may find using a container with a list and the argument MainAxisAlignment to work better for you.
A lot of comments here might give a solution that works for you but here's mine. I got it to work like I wanted by using SizedBox.
First, I recovered the width of the screen, then I created the buttons and put them into SizedBox fitting the screen's width, I put them in a Column and I added a few Container for the style points.
Result:
Code :
class Homescreen extends StatelessWidget {
Widget build(context) {
double width = MediaQuery.of(context).size.width; //getting screen width
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(margin: EdgeInsets.only(bottom: 20.0)),
PlanningButton(width),
Container(margin: EdgeInsets.only(bottom: 20.0)),
BookingButton(width),
Container(margin: EdgeInsets.only(bottom: 20.0)),
ModifyButton(width),
Container(margin: EdgeInsets.only(bottom: 20.0)),
CancelButton(width),
Container(margin: EdgeInsets.only(bottom: 20.0)),
],
),
),
);
}
Widget PlanningButton(double width) {
return Expanded(
child: SizedBox(
width: width - 20,
child: RaisedButton(
onPressed: () {},
color: Colors.blue,
child: Text(
"planning",
textScaleFactor: 4.0,
),
),
//fit: BoxFit.cover,
),
);
}
The user can tap anywhere on the colored buttons and it will register. Now I'll add images and transparency to make it look good!
appBar: new AppBar(
leading: Stack(
children: <Widget>[
IconButton(
icon: const Icon(Icons.arrow_forward),
onPressed: () {
_nextPage(1);
},
tooltip: 'Next',
padding: EdgeInsets.only(left: 360.0),
),
IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () {
_nextPage(-1);
},
tooltip: 'Previous',
),
],
),
),
Blockquote
The two IconButtons , the first one doesn't work but the second does , when you remove the padding it works fine , How should i do this ? , and using Containers wouldn't help as much because they take space too , so what to do ?
You have many errors there .
First
You are using a Stack, stack will put your widgets over the other, so you have to specify the position using Positioned or Align.
Second
If you check the source code , you'll find there is a width limit for the leading Widget.
if (leading != null) {
leading = new ConstrainedBox(
constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),
child: leading,
);
}
where _kLeadingWidth = 56
1st Solution
Replace your Stack widget by Row widget, if you do this, you'll get an overflow exception because the size of your two IconButtons exceed the width > 56.
Final Solution (you can find more)
Remove your IconButton and use an Icon wrapped by InkWell (in order to receive the tap)
return Scaffold(
appBar: new AppBar(
leading: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
InkWell(
onTap: () => print("1"),
child: Padding(
padding: EdgeInsets.all(2.0),
child: const Icon(Icons.arrow_forward))),
InkWell(
onTap: () => print("2"),
child: Padding(
padding: EdgeInsets.all(2.0),
child: const Icon(Icons.arrow_back))),
],
),
),
);
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.
]
)