Fixed sized button and expanded textfield inside Row Flutter - flutter

I want to develop a UI just like Postman Desktop App. But When I add a text field and fix the sized button in a row it gives an error RenderFlex children have non-zero flex but incoming width constraints are unbounded. But I don’t want to give a fixed size to the text field through MediaQuery. As you can see in this video (Demo UI) Postman text field size is fixed when the screen size decrease it shows a horizontal scrollbar. I want the same behavior. Here is the code.
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: 300,
decoration:
BoxDecoration(border: Border.all(color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: Image.network(
ImageURL,
fit: BoxFit.fitWidth,
),
),
],
),
),
),
SizedBox(
child: Column(
children: [
Row(
children: <Widget>[
const Expanded(child: TextField()),
DarkButton("Save", () {}),
],
),
],
),
),
],
),
),
),
);

Add isDens = true in Textfield.
Just like this:
Expanded(child: TextField(decoration: InputDecoration(isDense: true),)),

this is because you use Expanded inside the SingleChildScrollView.
You can not use Expanded inside the SingleChildScrollView because it covers the maximum width or height.
Just remove SingleChildScrollView error was gone.
you may use listview for this or use CustomScrollView for that

Related

Expand Container to fill remaining space in Column

I have a problem with building a specific layout in flutter.
What I need is:
Scrollable screen, with two columns, where the first col is of certian (but dynamic) height. And the second col has part of certain (but dynamic) height and the rest of the col I want to fill remaining space.
The code structure.
Row(
children: [
Expanded(
child: Column(children:[
someDynamicHeightWidgetsHere()])),
Expanded(child: Column(children: [
someWidgetsHere(),
here fill remainind space to match the first column]))
]
)
Use IntrinsicHeight, This widget only expands to its child height.
This class is useful, for example, when unlimited height is available and
you would like a child that would otherwise attempt to expand infinitely to
instead size itself to a more reasonable height.
Example:
IntrinsicHeight(
child: Row(
children: [
Expanded(
child: Column(
children: [
Container(
height: 800,
color: Colors.blue,
),
],
),
),
Expanded(
child: Column(
children: [
Container(
height: 400,
color: Colors.red,
),
Expanded(
child: Container(
color: Colors.yellow,
),
),
],
),
),
],
),
Output:

Vertically center content inside SingleChildScrollView with min height of screen height

I am trying to create a web layout that that consists of a scrollable column that has a min height of the screen height but can expand past the screen height if the content is too large. I have been able to create the scrolling container but I cannot vertically center the main content while still making the entire sections scrollable. The only working version I can get wont vertically center the content, I have to added a SizedBox above it to create padding to make it look centered but then its not responsive on different heights.
The parent of the content looks like this:
Container(
width: MediaQuery.of(context).size.width / 2,
height: double.infinity,
padding: const EdgeInsets.fromLTRB(100, 30, 100, 0),
child: SingleChildScrollView(
child: Column(
children: [
LoginLayout(),
SizedBox(height: 30),
],
),
),
),
Then to simplify the content column, its basically this:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 30),
child: Image.asset(
'assets/images/2.0x/logo-full.png',
width: 125,
fit: BoxFit.contain,
),
),
// This column needs to be vertically centered if fits in the screen height
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('Welcome Back!', style: _textTheme.headline2),
SizedBox(height: 10),
Text('Sign in to continue', style: _textTheme.bodyText2),
SizedBox(height: 60),
EmailInput(label: 'EMAIL'),
SizedBox(height: 30),
PasswordInput(label: 'PASSWORD'),
SizedBox(height: 60),
Button(
label: 'Login',
icon: Icons.link,
theme: ButtonColor.PRIMARY,
onPressed: () {},
),
],
),
],
);
I was able to apply an Expanded widget around the centered column which did work but then I lost the ability to scroll if the content was larger that the screen height.
Here is an example for reference as well
Not sure how to do that in SingleChildScrollView though,
try using ListView with shrinkWrap: true
Container(
width: MediaQuery.of(context).size.width / 2,
height: double.infinity,
padding: const EdgeInsets.fromLTRB(100, 30, 100, 0),
child: Center(
child: ListView(
shrinkWrap: true,
children: [
LoginLayout(),
],
)
),
)

overflowing flutter columns and rows

I have this list view in flutter which I am trying to make into a chat list. Similar to what you see in WhatsApp and telegram. However I am struggling to get the idea of how rows and columns work because I keep getting overflows.
Here is the code:
ListView(
physics: BouncingScrollPhysics(),
children: [
Dismissible(
key: Key(""),
background: Container(color: Colors.grey[200]),
direction: DismissDirection.endToStart,
child: InkWell(
onTap: () {},
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flex(
direction: Axis.vertical,
children: [
Text("Hello"),
],
),
Flex(
direction: Axis.vertical,
children: [
Text(
"al;skdl;aksd a;skd ;aks;dk a;skd ;laks;d a;lsk d;lkas; dka;lsk d;laks; ldka;slk d;a",
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
),
],
),
),
),
],
Now we often experience the text overflow problem so if we think it that we we have provided column a particular width and restricted it but if we wrap the things up with flexible widget it now tells column/Row that you can change your size and be flexible
order would be
flexible > Container > Column/Row
The reason we are applying this to container is Column/Row will ask immediate parent for width and height
now this problem can also be solved by text overflow property that is we can clip text but what if we dont want too
So all you have to do is Wrap the column/Row in Container and then into Flexible as now it will tell container that yes you can adjust your height
Your concept can be cleared by how actually widgets parent child relationship works i.e in brief
basically If am a child I will ask my parent okay what is my size so since my parent if it has a size it will bound me but if it doesnt has a size it will ask its parent okay tell me what space should I take and it goes on. Expanded and Flexible says that okay you can adjust yourself instead of being Fixed.
Flexible(
child: Container(
margin: EdgeInsets.only(left: 10.0,right: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('${dataBookTitleSearch1[index]} ', style: kGoodSearchResultTextStyle, textAlign: TextAlign.left,),
SizedBox(
height: 10.0,
),
Text('${dataBookAuthorSearch1[index]}', style: kGoodSearchResultTextStyle,textAlign: TextAlign.left),
SizedBox(
height: 10.0,
),
Text('${dataBookExtensionSearch1[index]} ', style: kGoodSearchResultTextStyle,textAlign: TextAlign.left),
SizedBox(
height: 20.0,
),
Container(
width: 80.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Colors.white
),
child: Padding(
padding: const EdgeInsets.only(left:20.0,top: 12.0),
child: Text('Read'),
),
),
],
),
),
)

Flutter Row widget solve RenderFlex overflow by cutting off remaining area

There are a lot of questions here already about Renderflex overflow, but I believe my use case might be a bit different.
Just the usual problem - having a Widget that is too big in a Row widget, and I get the A RenderFlex overflowed by X pixels ... error.
I want to create a Row that cuts off it's overflowing child Widget if they would be rendered outside it's area without getting an error.
First off, wrapping the last element in the Row widget with Expanded or Flexible does not work in my case, as recommended here and here and many other places. Please see code and image:
class PlayArea extends StatelessWidget {
#override
Widget build(BuildContext context) {
final dummyChild = Container(
color: Colors.black12,
width: 100,
child: Text('important text'),
);
final fadeContainer = Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.black26,
Colors.black87,
],
),
),
width: 600,
);
return Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
color: Colors.redAccent,
child: Column(children: [
Expanded(
child: Row(
children: <Widget>[
dummyChild,
fadeContainer,
],
),
),
Expanded(
child: Row(
children: <Widget>[
dummyChild,
Expanded(
child: fadeContainer,
),
],
),
),
Expanded(
child: Row(
children: <Widget>[
Container(
color: Colors.black12,
width: 1100,
child: Text('important text'),
),
Expanded(
child: fadeContainer,
),
],
),
),
]),
),
);
}
}
Key points:
Using Expanded changes the width of Container, which changes the gradient's slope. I want to keep the gradient as it is
Even with Expanded widget, the Row is not prepared for the case when important text's area is too wide and does not fit the screen horizontally - it will get an overflow error for that Widget
it is technically working in the first case, because no red color is drawn on the right side on the green field, it 'just' has an error
How do I cut off the remaining space dynamically without any error - regardless of any screen size and content?
One solution I found is that
Row(
children: <Widget>[
dummyChild,
fadeContainer,
],
)
can be converted to
ListView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
dummyChild,
fadeContainer,
],
)
Creating a horizontal list and preventing scroll on that.
edit.: just found out it that you'll get unbounded vertical height, so it's not the same.

Flutter using wrap_content for TabBarView

in this below code i have Wrap widget into TabBarView and i'm not sure as this widget size, when i use Container with specify height my problem solved, but i miss some layouts which i want to show that with map, how can i resolve this problem? i tested SizedBox.expand but it doesn't any change
Flexible(
child: TabBarView(
children: [
Center(
child: Wrap(
children: feeds.map((feed){
return Container(
width: MediaQuery.of(context).size.width /3.5,
height:MediaQuery.of(context).size.width /3.5,
margin: EdgeInsets.all(2.0),
child: GridTile(
header: feed.feedType ==1?Icon(Icons.video_call)
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(3.0)
child: Image.asset(feed.feedImage))),
),
);
}).toList(),
),
),
],
controller: tabController,
),
),