Flutter avoiding resize screen when i have TextFormField into PageView - flutter

in this simplified code i have two TextFormField into one of flutter PageView pages, that they are into another class which that extended from Container, not any Scaffold, now when i click into one of this TextFormFields, resizeToAvoidBottom* don't work in my code
Widget build(BuildContext context) {
return Consumer<ThemeManager>(builder: (context, theme, child) {
return Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
key: _scaffoldKey,
backgroundColor: theme.accentColor,
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: false,
body: NotificationListener<OverscrollIndicatorNotification>(
onNotification: (overScroll) {
overScroll.disallowGlow();
return false;
},
child: Container(
width: double.infinity,
height: double.infinity,
child: IntrinsicHeight(
child: Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 50,
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
BuildLoginHeaderScreen(theme: theme),
Expanded(
child: PageView(
controller: _pageController,
children: <Widget>[
... // contains two TextFormFields
],
),
),
],
),
),
],
),
),
),
),
),
);
});
}

You can go around using resizeToAvoidBottomPadding by wrapping appropriate part of your code with SingleChildScrollView. For example
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
BuildLoginHeaderScreen(theme: theme),
Expanded(
child: PageView(
controller: _pageController,
children: <Widget>[
... // contains two TextFormFields
],
),
),
],
),
),
This will prevent pixel overflow when the keyboard reduces the view area.

Related

flutter scrollview and SingleChildScrollView throws bottom overflow and is not scrolling

The widgets inside the child scroll view doesn't scroll and throws bottom overflow exception on the screen when there are more widgets in that list view. I am not sure where I am doing a mistake.
home: Scaffold(
body: Column(
children: [
APPbar(),
Container(
color: Colors.grey[200],
child: Expanded(
child: Column(
children: [
searchBar(),
Row(children: casewidgets),
],
)
),
)
SingleChildScrollView(
child:Column(
children: [
Text("a new column"),
Text("a new column"),
Text("a new column"),
Text("a new column"),
],
)
),
]
)),
You can use Expanded on SingleChildScollView to get aviable height, and remove column's Expanded.
home: Scaffold(
body: Column(children: [
// APPbar(),
Container(
color: Colors.grey[200],
child: Column(
children: [
// searchBar(),
Row(children: []),
],
),
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
for (int i = 0; i < 33; i++) Text("a new column"),
],
)),
),
])),
You cannot use expand when using a singlechildscrollview in appropriate way. First you need to understand that expand covers the maximum height and width on the screen or the specific section in which you use expand.
Instead of using SingleChildScrollView, It's easier to use CustomScrollView with a SliverFillRemaining. and it's works work's great.
CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: <Widget>[
const Text('TextData'),
Expanded(
child: Container(
color: Colors.green,
child: Text("Your Text Data",),
),
),
const Text('Add Other Widgets'),
],
),
),
],
),

Cannot put PageView into Column in Flutter

I want to put a small PageView into a Column, but I got error RenderBox was not laid out: RenderRepaintBoundary#db5f8 relayoutBoundary=up14 NEEDS-PAINT. The PageView will hold inconsistent data so I cannot set the height for it. Can anyone help me? This is my code:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: BottomAppBar(
child: Container(
height: 70,
color: Colors.white,
),
),
body: FutureBuilder(
future: Data.getProductDetails(id: widget.product.id),
builder: (context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(color: Colors.grey));
} else {
List iList = [];
iList.add(widget.product.mainImg);
for (ProductImages i in snapshot.data.imgList) {
iList.add(i.image);
}
return CustomScrollView(
slivers: [
SliverAppBar(...),
SliverToBoxAdapter(
child: SingleChildScrollView(
padding: EdgeInsets.all(15),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(...),
Row(...),
SizedBox(height: 10),
brandField(snapshot),
SizedBox(height: 5),
categoryField(snapshot),
SizedBox(height: 5),
tagsField(snapshot),
SizedBox(height: 20),
pageIndicator(),
Expanded(
child: PageView(
children: [
Container(height: 400, color: Colors.red),
Container(height: 600, color: Colors.blue),
],
),
)
],
),
),
),
],
);
}
},
),
);
}
You get this error because PageView and other widgets like ListView require size constraints from its parents and Column do not provide constraints to its children. So to solve the issue you can wrap you PageView inside Flexible or Expanded like so:
Column(
children:[
Expanded(child:PageView(),),
]
)
For better understanding of constrains in flutter, read: Understanding Constrains: Flutter.dev

How To Make A Widget Just Stick To Bottom Of Page

I am trying to build a view as in the image below.
The tweet your reply is just stack at the bottom while the other stuff are scrollable.
I've been banging my head on how to achieve this for a couple of hours.
Exactly;y like in the image below. There are four sections:
The post (tweet)
The row of icons
The comments (which scrolls)
The tweet your reply which is static
The solution would be to use the Align Widget. So in your Stack you would put as the last element in the stack:
Align(
alignment: Alignment.bottomCenter,
child: // your widget would go here
),
I'm judging by your question that you have figured out how to do all of the other parts, and was just wondering about the bottom part. You can use Align to align things in other ways as well (such as topCenter, bottomLeft, etc). Hope this helps, and if so please up vote and accept as answer and if not leave a comment below.
Edit:
I wouldn't use a Stack. I would wrap the entire widget tree in a Column, and put the post in a Expanded Widget with a flex factor of 1, and a Row of Icons below it. Then put a ListView in an Expanded Widget with a flex of 4 (you can experiment with values). And lastly in the Column I would add you "Tweet you reply" Widget.
Simple layout code to give you an idea of how to implement it:
Column(
children: <Widget>[
Expanded(
child: ListView(
shrinkWrap: true,
children: <Widget>[
//your post
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// your icons
],
),
//your comments
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: // you textField,
),
],
)
Try this
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(50),
child: Center(
child: Text(
"A POST"
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.details),
Icon(Icons.print),
Icon(Icons.translate),
Icon(Icons.map)
],
),
Expanded(
child: ListView(
children: List.generate(10, (index) => ListTile(title: Text("Comment $index"),)),
),
)
],
),
),
TextField(
decoration: InputDecoration(
labelText: "Tweet your reply"
),
)
],
),
),
);
}
}
The output:
If you want the post to scroll with it, this should help
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(50),
child: Center(
child: Text(
"A POST"
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.details),
Icon(Icons.print),
Icon(Icons.translate),
Icon(Icons.map)
],
),
Column(
children: List.generate(10, (index) => ListTile(title: Text("Comment $index"),)),
)
],
),
),
),
TextField(
decoration: InputDecoration(
labelText: "Tweet your reply"
),
)
],
),
),
);
}
}

Can't find correct layout option for how to use ListView in a custom Widget

I am trying to extract re-use a simple widget that is then referenced in parent widget. The custom widget simply uses a row to layout a textField and a button, and below this I Want to have a listview showing items. I then embed in the customwidget in parent, but it continually throws Error. I have not figured out how to get the custom widget working where I can use ListView or column layout inside. Below is the 2 simplified widgets that demo the issue.
Here is the parent widget, which is where I call the custom widget PlayListControl()
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Playlists'),
),
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
alignment: Alignment.center,
margin: EdgeInsets.all(20),
child: Text('Test'),
),
PlayListControl(),
],
),
),
drawer: SideDrawer(),
);
}
}
And here is the playlistcontrol widget.
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
child: TextField(),
),
ButtonTheme(
minWidth: 30,
child: RaisedButton(
textColor: Colors.white,
child: Text('add'),
onPressed: () {},
)),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
],
),
)
],
),
);
}
}
No matter what I try, it always complains about layout issue related to height. I would have thought wrapping the ListView in Expanded would solve the issue, but it doesn't. Only if I use a container and specify height do I not get the errors, but I want to use whatever available space there is.
How can I get this playlistcontrol() widget to properly render inside a parent control?
you forgot to wrap the first container of PlayListControl in Expanded widget..
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('My Playlists'),
),
body: Container(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
alignment: Alignment.center,
margin: EdgeInsets.all(20),
child: Text('Test'),
),
PlayListControl(),
],
),
),
));
}
}
class PlayListControl extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
child: TextField(),
),
ButtonTheme(
minWidth: 30,
child: RaisedButton(
textColor: Colors.white,
child: Text('add'),
onPressed: () {},
)),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
],
),
)
],
),
),
);
}
}

Can't set ListView into LayoutBuilder Widget (Flutter)

I need to have some structure like this
I use LayoutBuilder to get the height of content (between App Bar and TabsBottomNavigation). Here i build Profile Info Container and want to build ListView with some List Tiles, but when I try to build it in Layout Builder I have errors in console.
If I create ListView out of LayoutBuilder it works!
Please help me to solve it.
My code below:
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Container(
height: viewportConstraints.maxHeight * .44,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(bottom: 2),
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName)
],
),
),
),
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
)
],
),
)
],
),
),
);
},
);
}
Use below build method will work in your case. (I have checked and it's working, so I hope it will work in your case also and will fit in your requirement.)
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return Container(
child: Column(
children: <Widget>[
Container(
height: viewportConstraints.maxHeight * .44,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(bottom: 2),
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName),
],
),
),
),
SizedBox(height: 16),
Flexible(
child: ListView(
children: <Widget>[
Card(
child: ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
),
),
],
),
),
],
),
);
},
);
}
I think SingleChildScrollView is of no use in this case so I removed it but you can use it if you fill so.
You still need to do some UI improvement as per your wish as this is the basic structure as per your requirement.
Hope this will help you.
You are using the LayoutBuilder in a wrong way.
It's supposed to be used to change the layout with the size of the device and/or orientation.
What you are trying to do is best accomplished with MediaQuery:
MediaQuery.of(context).padding.top //APP bar height
MediaQuery.of(context).padding.bottom //Bottom bar height
MediaQuery.of(context).size.height //Screen height
Widget build(BuildContext context) {
return Column(
children:<Widget>[
Expanded(
child:LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Container(
height: viewportConstraints.maxHeight * .44,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(bottom: 2),
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName)
],
),
),
),
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
)
],
),
)
],
),
),
);
},
),
),
]
);
}
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ListView(
shrinkWrap: true,
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height/3,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(bottom: 2),
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName)
],
),
),
),
new ListView(
shrinkWrap: true,
children: <Widget>[
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
)
],
)
],
),
);
},
);
}
If you read the error log, it says non-zero flex incoming but constraints are unbounded. To understand that clearly, imagine Flutter is trying to draw pixels of something that not finite. That's the our problem.
Widgets like ListView or SingleChildScrollView are flex widgets and has no limits unlike Column or Row.
If you have children that sizes are not definite, then you have to define flex for your ListView. For that, you can use shrinkWrap or Flexible, Expanded widgets for both ListView itself or children.
And here is the my solution, simplified as much as possible:
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return ListView(
shrinkWrap: true, // That's it
children: <Widget>[
Container(
color: Theme.of(context).primaryColor,
height: viewportConstraints.maxHeight * .44,
padding: EdgeInsets.only(bottom: 2),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName)
],
),
),
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
),
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
),
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
)
],
);
},
);
}
Meanwhile, you have too many children that does nothing. If you want different scrolling behavior inside the Profile Info and ListTiles parts, tell me because we will must create yet another ListView for achieve that.
Also if you share your buildProfileImage widget, we can optimize your code even further, because you may even not need the LayoutBuilder widget in this case.