I want my body to be scrollable with this code below i included and image of what is is now
I need help in getting this thing to work
any opinions
to get a better idea
it is an e-commerce app with a carousel then below it categories and the below them the products
i need scrolling to be as if all of this is on part
how?
body: new Column(
children: <Widget>[
// ================= IMAGE CAROUSEL BEGINS HERE ==================
new ImageCarouselUI(),
// ================= HORIZONTAL LIST SECTION ====================
//padding widget
new Padding(padding: const EdgeInsets.all(6.0),
child: Container(
alignment: Alignment.centerLeft,
child: new Text('Categories', style: new TextStyle(fontSize: 15.0),)),
),
//Horizontal list view begins here
HorizontalList(),
//padding widget
new Padding(padding: const EdgeInsets.all(10.0),
child: new Container(
alignment: Alignment.centerLeft,
child: new Text('Recent products')),),
//grid view
new Flexible(
child: Products()
),
],
),
Image Of What I Want It to be:
If all your body is only one complex widget you can use use a SingleChildScrollView class.
//...
body: SingleChildScrollView ( // this will make your body scrollable
child: Column(
/// your parameters
children: <Widget> [
// your widgets,
// your widget...
],
),
)
,
Related
This question already has answers here:
Bottom overloaded by 213 pixels in flutter
(18 answers)
Closed 12 months ago.
I had an error "Bottom Overflowed by 199 pixel" when creating an Image inside the ListView, and after i google it, all of them suggest me to add:
resizeToAvoidBottomPadding: false
But, it doesnt work! The error is still there.
SafeArea widget is also doesnt solve the problem. Here is the short code version of my layout:
body: ListView(
children:<Widget> [
new Container(
child: new Stack(
children:<Widget> [
//THE WIDGET
new Container(), //THE BACKGROND IMAGE
new Positioned(
child: Column(
children:<Widget>[
new Transform(),
new FadeTransition(),
new FadeTransition(),
Divider(),
new Row(),
//THE IMAGE THAT I WANT TO ADD
new Container(
height: 360.0
decoration: BoxDecoration(
image: DecorationImage(
image: Assetimage('lake.jpg)
Use Scaffold property "resizeToAvoidBottomPadding: false" and "SingleChildScrollView" as parent of Scaffold body:
home: Scaffold(
resizeToAvoidBottomInset : false,
appBar: AppBar(
title: Text("Registration Page"),
),
body: SingleChildScrollView(
child: RegisterUserPage(),
)),
put your contents in a SingleChildScrollView and add ConstrainedBox like this:
body :SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: ListView(
children:<Widget> [
new Container(
child: new Stack(
children:<Widget> [
//THE WIDGET
new Container(), //THE BACKGROND IMAGE
new Positioned(
child: Column(
children:<Widget>[
new Transform(),
new FadeTransition(),
new FadeTransition(),
Divider(),
new Row(),
//THE IMAGE THAT I WANT TO ADD
new Container(
height: 360.0
decoration: BoxDecoration(
image: DecorationImage(
image: Assetimage('lake.jpg)
This is may make your screen scrollable and adding constraint will make it finite scroll.
Nothing, Just include your widget inside Expanded like this
Expanded(
child: sectionList(),
)
//this solved my issue
Using resizeToAvoidBottomInset: true, in Scaffold and wrapping the first child in the body with SingleChildScrollView solved my problem.
Just Use
SingleChildScrollView()
like as
body: SingleChildScrollView(
child: Column(
children: [
widgetClassSectionButton(),
listAttandance.isNotEmpty ? headLineContainer() : msgNothingToShow(),
listAttandance.isNotEmpty ? widgetStudentList():widgetMsgEmpty(),
CustomButton("Submit Data",context)
],
),
)
The parameter in scaffold works for me, envolve your widget for this error.
singlechildscrollview
This works for me for long form:
return Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: IntrinsicHeight(
child: Form(
key: _formKey,
child: Column(...
This is How I solved it, adding a resizeToAvoidBottomInset: false, inside Scaffold() and using SingleChildScrollView() inside the body.
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.grey,
appBar: AppBar(
title: Text("Quotes"),
backgroundColor: Colors.green,
),
body: SingleChildScrollView(
child: Column(
children: quotes.map((quote) => quotesTemplete(quote)).toList(),
),
)
);
This aligns the item from bottom to top:
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
reverse: true,
I am trying to make a simple chat app, so I created a scaffold and my body, will be the messages and my bottomNavigationBar would be my typing field and sending icon.
I added a text field but when typing the navigation bar is hidden by the keyboard.
this is the code of my BottomNavigationBar :
bottomNavigationBar: new Container(
height: ScreenSize.height/12,
/*color: Colors.red,*/
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Container(
child: new Icon(Icons.send),
width:ScreenSize.width/6,
),
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Material(
child: new Container(
child: new TextField(
autofocus: false,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(9.0),
border: InputBorder.none,
hintText: 'Please enter a search term',
),
),
width:ScreenSize.width*4/6,
),
elevation: 4.0,
/*borderRadius: new BorderRadius.all(new Radius.circular(45.0)),*/
clipBehavior: Clip.antiAlias,
type: MaterialType.card,
)
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Container(
child: Text('HELLO C1'),
color: Colors.green,
width:ScreenSize.width/6,
),
],
)
],
),
),
here is how it looks when focused :
if you use a Stack on your Scaffold's body, instead of bottomNavigationBar, your nav will push up above the keyboard. even if you fix to the bottom with a Positioned:
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: MyNav(),
),
simply wrap your bottom navigation bar with Padding and set it to MediaQuery.of(context).viewInsets,
bottomNavigationBar: Padding(
padding: MediaQuery.of(context).viewInsets,
child: ChatInputField(),
),
Literally just worked through the same issue. Given the code i was refactoring, this worked like a charm. Peep the github link, review his change and apply. Couldn't be much more straight forward: https://github.com/GitJournal/GitJournal/commit/f946fe487a18b2cb8cb1d488026af5c64a8f2f78..
Content of the link above in case the link goes down:
(-)BottomAppBar buildEditorBottonBar(
(+)Widget buildEditorBottonBar(
BuildContext context,
Editor editor,
EditorState editorState,
BottomAppBar buildEditorBottonBar(
folderName = "Root Folder";
}
*REPLACE* return BottomAppBar(
elevation: 0.0,
color: Theme.of(context).scaffoldBackgroundColor,
child: Row(
children: <Widget>[
FlatButton.icon(
icon: Icon(Icons.folder),
label: Text(folderName),
onPressed: () {
var note = editorState.getNote();
editor.moveNoteToFolderSelected(note);
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
*WITH THE WRAPPER* return StickyBottomAppBar(
child: BottomAppBar(
elevation: 0.0,
color: Theme.of(context).scaffoldBackgroundColor,
child: Row(
children: <Widget>[
FlatButton.icon(
icon: Icon(Icons.folder),
label: Text(folderName),
onPressed: () {
var note = editorState.getNote();
editor.moveNoteToFolderSelected(note);
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
);
}
class StickyBottomAppBar extends StatelessWidget {
final BottomAppBar child;
StickyBottomAppBar({#required this.child});
#override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom),
child: child,
);
}
}
I achieved this by a mix of two things I found separated in the web:
1 - Inside the Scaffold, I put other with only a bottomNavigationBar with a empty Container. For some reason, this trick push all my real bottomNavigationBar up to the top of the keyboard.
Scaffold(
bottomNavigationBar: Container(
height: 0,
),
body: Scaffold(
body: MyWidget(
But, I did not want all the content up, so I got that Package:
2 - I added flutter_keyboard_visibility: ^5.1.0 from
https://pub.dev/packages/flutter_keyboard_visibility
With this Package, you can do anything you want in response to keyboard visibility - is up to you. In my case, I made all content of my real bottomNavigationBar disappear except the textfield, which stay on the top of the keyboard:
[TextFormField] // dont go away,
//The others:
KeyboardVisibilityBuilder(builder: (context, visible) {
return Column(
children: [
visible
? SizedBox(
height: 0,
)
: OtherWidgets(
If you need some kind of button; you can do:
Scaffold(
bottomNavigationBar: bottomNavigationBar,
floatingActionButton: ExampleButton(
text: 'Hello',
),
body: body,
),
You can apply further customizations on the Floating Action Button using parameters in the Scaffold.
There is a simple way to do this if you want to really need to use the bottom navigation bar of the scaffold to put your widgets in rather than put it on a stack. Just wrap your scaffold with another scaffold and it should solve the problem.
return Scaffold(
body: Scaffold(
bottomNavigationBar: yourBottomNavigationBarWidget(),
body: yourBody(),
This works best especially when the height of your widget changes dynamically (because the text user types may introduce multiple lines) and you want the body to resize accordingly. A body in the stack, as suggested by many, will require a bottom padding to be visible over the text field and need to change dynamically as user types which is difficult to handle when you have multiple widgets sitting in and around the text field.
I'm trying to build a generic home page and I want to align the last child of my column (which contains all the widgets for the page) to the bottom of the screen but the widget wrapped in the Align is not moving. The following is what makes the most sense to me:
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ChildA(),
ChildB(),
Align(
alignment: Alignment.bottomCenter,
child: BottomAlignedChild()
)
]
)
What am I doing wrong?
You can use Expanded to make the last widget expand to the whole remaining space.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Layout',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Align Bottom Demo"),
),
body: new Column(children: <Widget>[
new Text("Text 1"),
new Text("Text 2"),
new Expanded(
child: new Align(
alignment: Alignment.bottomCenter,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.star),
new Text("Bottom Text")
],
)))
]),
);
}
}
Here is the result
Another approach is using Spacer():
...
Column(children: [Text1, Text2, Spacer(), YourBottomWidget()]),
...
I have always used Spacer for these kind of cases in Column or Row. Spacer takes up all the available space between two widgets of Row/Column.
For given example, you can try following
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
ChildA(),
ChildB(),
Spacer(),
BottomAlignedChild()
]
)
There are multiple ways of doing it.
Use Spacer:
Column(
children: <Widget>[
TopContainer(),
Spacer(), // <-- Spacer
BottomContainer(),
],
)
Use mainAxisAlignment:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- spaceBetween
children: <Widget>[
TopContainer(),
BottomContainer(),
],
)
Combine Expanded and Align:
Column(
children: <Widget>[
TopContainer(),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: BottomContainer(),
),
),
],
)
Screenshot (same for all)
If you are flexible to change column to a stack, you can do the following.
body: Container(
child: Stack(children: <Widget>[
Text('Text 1'),
Text('Text 2'),
Align(
alignment: Alignment.bottomCenter,
child: Text(
"Text in bottom",
),
),
]),
),
You can try wrapping the widgets which needs to be at the top inside another Column widget, thereby making the root widget containing only two children. 1st child containing all the widgets which need to be aligned at the top and the 2nd child containing widget which is to be placed at the bottom. Now you use mainAxisAlignment: MainAxisAlignment.spaceBetween to align 1st child to the top and second to the bottom.
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
children: <Widget>[
ChildA(),
ChildB(),
]
),
BottomAlignedChild(),
]
);
In Android we can position elements in a linear layout using LayoutGravity , I would like to know how to achieve the same in Flutter. I have widgets in a column and I would like some widgets to be position on the left, some on the right and some on the left. How can I achieve this? Here is my code:
return new Container(
margin: const EdgeInsets.only(top: 16.0),
color: Colors.white,
child: new Column(
children: <Widget>[
//the following textfields must be positioned on the right, but they are on the center
new Text("Hair cut",),
new Text("Shampoo",),
//the button is in the center and that is correct
new RaisedButton(
onPressed: ()=>{},
color: Colors.purple,
child: new Text("Book",style: new TextStyle(color: Colors.white),),
)
],
),
);
Setting crossAxisAlignment to CrossAxisAlignment.end moves everything to the right. I tried adding the textfields in their own Column widget and setting crossAxisAlignment to end but nothing happens.
You can set crossAxisAlignment for a generic alignment. And then override it for a specific item by wrapping it in Align widget.
new Column(
children: <Widget>[
//the following textfields must be positioned on the right, but they are not the center
new Align(
alignment: Alignment.centerRight,
child: new Text("Hair cut"),
),
new Align(
alignment: Alignment.centerRight,
child: new Text("Shampoo"),
),
//the button is in the center and that is correct
new RaisedButton(
onPressed: () => {},
color: Colors.purple,
child: new Text(
"Book",
style: new TextStyle(color: Colors.white),
),
)
],
),
You may also want to wrap your Column into a IntrinsicWidth if you don't want your column to fill the width.
I have a Stack widget with some children. One of those children is an Align which has a Container child which has a Column child. This Column has some children. Now, in my Stack, the Column is way bigger than it should be (it fills the complete screen) although a third of that space would be enough. I'd like to know how I can use something like Flexible so I can use the fit property to tighten up the space. Is this possible?
Here is a representation of my code:
new Stack(
children: <Widget>[
new Container(...),
new Align( // This takes up way more space than needed!
alignment: new Alignment(1.0, 1.0) // This widget should be displayed at the bottom
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget> [
new Container(child: new Center(child: new Text("text"))),
new Row(children: [...]),
new Row(children: [...]),
new Row(children: [...]),
new Row(children: [...]),
]
)
)
)
]
)
I tried playing around with the fit property but without any luck.
By default, Column has mainAxisSize defaulting to MainAxisSize.max.
Which means that Column will take all the available height.
In your case, you don't want that. So you can set that value to MainAxisSize.min, which will do the opposite : fit it's children.
The end result is :
child: new Stack(
children: <Widget>[
new Container(...),
new Align(
alignment: Alignment.bottomCenter,
child: new Container(
color: Colors.purple,
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[new Text("foo"), new Text("hello world")],
),
),
)
],
),