I'm testing out flutter, but ran into an issue trying to create a specific layout. I'm trying to create a card with 2 parts. At the top is an image spanning the full width of the card and with a set height. Below that is a Container with several Text widgets laid out in a Column. I then wish to add some padding to the bottom container and offset it so it overlaps the bottom of the image.
I've tried doing this using a Stack, see the code below, but my issue is that from what I understand the Stack widget takes it size from all non-positioned widgets. This means the Stack only gets the size of the image and the Container gets cut of at the bottom of the image. The content of the Container is also of variable length, so I can not set a fixed height, but need the card to size itself to it's content, both the image and the Container.
return Card(
child: Stack(
children: <Widget>[
Image.network(
"https://imbo.vgc.no/users/e24/images/5f2fdecdbd09cfad22aa84e922a3e7c7?t%5B0%5D=crop%3Awidth%3D4027%2Cheight%3D2263%2Cx%3D0%2Cy%3D356&t%5B1%5D=maxSize%3Awidth%3D990&t%5B2%5D=resize%3Awidth%3D990&accessToken=e04754e3d904710cb41dc49bb02df916894bdf5a801c49a5965195cee3c86936",
height: 200.0,
),
Positioned(
top: 175.0,
left: 10.0,
right: 10.0,
child: Container(
color: Colors.fromRGBO(0, 0, 0, 1.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("This is the header", style: TextStyle(color: Color.fromRGBO(255, 255, 255, 1.0), fontSize: 20.0)),
Text("This is some content of variable length", style: TextStyle(color: Color.fromRGBO(255, 255, 255, 1.0)))
],
),
),
)
],
),
);
This is a simple version of my code, I've tried all sorts of different variations without achieving what I wish. I would appreciate any help or hints to guide me in the right direction.
Did you try to set overflow ?
Stack(overflow: Overflow.visible ...
You can use Transform.translate Widget to "move up" your Container into to the Image.
Transform.translate{
offset: Offset(xAxisOffset, yAxisOffset),
child: //your Container
}
Check out the Flutter Widget of the Week Video here: https://www.youtube.com/watch?v=9z_YNlRlWfA or read the Documentation for more information about the Widget: https://api.flutter.dev/flutter/widgets/Transform-class.html
You have to add
alignment: Alignment.bottomCenter for Stack widget.
Refer below code:
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Card(
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Image.network(
"https://imbo.vgc.no/users/e24/images/5f2fdecdbd09cfad22aa84e922a3e7c7?t%5B0%5D=crop%3Awidth%3D4027%2Cheight%3D2263%2Cx%3D0%2Cy%3D356&t%5B1%5D=maxSize%3Awidth%3D990&t%5B2%5D=resize%3Awidth%3D990&accessToken=e04754e3d904710cb41dc49bb02df916894bdf5a801c49a5965195cee3c86936",
height: 200.0,
),
Positioned(
left: 10.0,
right: 10.0,
child: Container(
color: Colors.blueGrey,
child: Column(
children: <Widget>[
Text("This is the header",
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1.0),
fontSize: 20.0)),
Text("This is some content of variable length",
style: TextStyle(
color: Color.fromRGBO(255, 255, 255, 1.0)))
],
),
),
)
],
),
),
),
),
);
}
Output:
Related
This is my first question and I'm new in Flutter. I searched a lot but I did not find any suitable answers.
Flutter: I need to set my box height flexible to fit any size of screen. I also need to fit my last box to the right side of screen to fit any screen. I also mentioned my problem in the image of screen. Kindly help. I'm adding my code here.
Output and requirement of my code
void main() {
runApp(const Challange2());
}
class Challange2 extends StatelessWidget {
const Challange2({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.blueGrey,
body: SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
height: 850.0,
width: 100.0,
color: Colors.amberAccent,
child: Text(
'This box height should be flexible according to screen size',
style: TextStyle(color: Colors.black, fontSize: 25),
),
),
const SizedBox(
width: 65,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 100.0,
width: 100.0,
color: Colors.deepPurpleAccent,
child: Text(
'Text2',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
Container(
height: 100.0,
width: 100.0,
color: Colors.deepOrangeAccent,
//Flexible(
child: Text(
'Text3',
style: TextStyle(color: Colors.white, fontSize: 25),
),
),
//),
],
),
const SizedBox(
width: 65,
),
Container(
height: 850.0,
width: 100.0,
color: Colors.blue,
child: Text(
'This box need to be right alignment and height should be flexible according to screen size',
style: TextStyle(color: Colors.black, fontSize: 25),
),
// child: const Align(
// alignment: Alignment.topCenter,
),
],
),
),
),
//),
//return Container();
);
}
}
To adapt to screen height, you can set height of containers to double.infinity,
To keep rigth container aligned to the right, use expanded in the center row child, in order to make this widget grow or shrink as needed.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(children: [
Container(
width: 100,
height: double.infinity,
color: Colors.red,
child: Text(
'This box height should be flexible according to screen size'),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 50,
height: 50,
color: Colors.green,
),
Container(
width: 50,
height: 50,
color: Colors.yellow,
),
]),
),
Container(width: 100,
height: double.infinity,
color: Colors.blue, child:Text("Right Panel"),),
]),
);
}
}
LayoutBuilder() Provides a way to get the actual screen size dynamically and allows you to calculate relative sizes: Youtube - Flutter: LayoutBuidler
Generally when using Rows and Columns you can use Expanded widgets to have relative instead of absolute sizes:
Row(
children: [
Expanded(flex: 1, child: Container()), // This will take up 1 third of the screen
Expanded(flex: 2, child: Container()), // This will take up 2 thirds of the screen
]
),
Expanded(flex: 1, child: Container()),
Expanded(flex: 1, child: Container()),
I'm building a product detail page. As the following piece of code and image shown, when there is a lot of content in the description part, the bottom overflow will occur. I'm wondering how to make the page scrollable, I've tried wrapping the Stack with SingleChildScrollView, but this is definitely not working in my case here. Can anyone help me with that? Thank you very much!!!!!
class DetailsScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: [
buildBody("path/to/image", size),
],
),
);
}
Positioned buildBody(String imagePath, Size size) {
return Positioned.fill(
child: Column(
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(vertical: 60, horizontal: 30),
color: Colors.green,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Hero(
tag: 1,
child: Image.asset(
imagePath,
width: size.width * 0.7,
),
),
),
],
),
),
),
Expanded(
child: Container(
color: Colors.white,
child: Column(
children: [
SizedBox(
height: 100,
),
Container(
margin: EdgeInsets.symmetric(
horizontal: 20,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(),
SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Anvesha Shandilya',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
Text(
'Owner',
style: TextStyle(
color: fadedBlack,
),
),
],
),
Expanded(child: Container()),
Text(
'Dec 16, 2020',
style: TextStyle(
color: fadedBlack,
fontSize: 12,
),
),
],
),
),
SizedBox(
height: 30,
),
Container(
margin: EdgeInsets.symmetric(
horizontal: 20,
),
child: Text(
'A lot of content..................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................',
style: TextStyle(
color: fadedBlack,
height: 1.7,
),
),
),
],
),
),
),
],
),
);
}
}
Error: Bottom Overflowed
To reproduce: Change the path/to/image, to this: A image can be used with the code:
tl;dr remove Expanded widgets -> remove Stack -> replace Column with ListView (for scrollability)
Start by removing Expanded widgets from the tree as you don't really need them. If possible, you should use mainAxisAlignment and crossAxisAlignment to position your widgets. That's exactly how you should handle placing the date next to user's name.
Expanded documentation states with which widgets you can use it:
Creates a widget that expands a child of a Row, Column, or Flex so
that the child fills the available space along the flex widget's main
axis.
Then remove Stack widget. If you don't then it will still work as Stack tries to get as big as its positioned children so it will just get as big as the Column you have inside. It's redundant.
Last but not least, replace Column with ListView. Column doesn't really care about whether it's overflowing or if it's being rendered. So if you create a Column that is bigger than the screen, it will simply display it which will cause the overflow. To fix that you could wrap it SingleChildScrollView, but I think it's more appropriate to just use ListView instead.
Here's an amazing explanation of layout system in Flutter: https://flutter.dev/docs/development/ui/layout/constraints
In the picture below, what I'm trying to achieve, is let the Green part Scrollable, since, in case the keyboard pops up, it doesn't give me the render error.
The whole screen is just a Column, where yellow part is a custom widget, and green part another Column inside it.
I've tried different solutions.
Wrap the whole Column into a SingleChildScrollView, but I would like that yellow part would stay fixed at the top.
I've tried also wrapping only green part into a SingleChildScrollView, but it doesn't work (The Render Error still raised).
I've seen I could use SliverAppBar, but I would like to achieve using my custom widget (yellow part).
I am a little bit stuck.
Scaffold(
body: SafeArea(
child: Column(
children: [
AppBarWidget(height: size.height * 0.15),
Container(
height: size.height - size.height * 0.15 - mediaQuery.padding.top,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
EditableAvatarWidget(
circleRadius: circleRadius,
badge: test,
border: Border.all(color: test.mainColor, width: 5),
),
Column(
children: [
Text(
"Name Surname",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 26,
color: Global.blackGrey),
),
SizedBox(height: 10),
Text(
"mail#mail.com",
style: TextStyle(fontSize: 18, color: Colors.grey),
)
],
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width / 6, vertical: 0),
child: FlatCustomButton(
onPress: () {},
background: Global.editProfileButton,
text: "Edit profile",
textColor: Global.blackGrey,
inkwellColor: Colors.black,
),
)
],
),
),
],
),
),
);
I would maybe also think to implement a ListView (?), but as you can see I've set inside the Column the mainAxisAlignment: MainAxisAlignment.spaceAround to have already my UI preference.
Do you have any idea how I could achieve this?
TL;DR: Let scrollable only GreenPart (Column) that belong to another Column (Whole Screen) and let Yellow Part stay on that fixed position
That's how I fixed.
I've encapsulated the Green Column Part in a Expanded before and then into a SingleChildScrollView.
It works exactly how I wanted.
Now only the green part scroll, and the yellow part stays in a fixed position when keyboard appears.
return Scaffold(
body: SafeArea(
child: Column(
children: [
AppBarWidget(
height: size.height * 0.15,
),
Expanded( //This
child: SingleChildScrollView( // and this fixed my issue
child: Container(
height:
size.height - size.height * 0.15 - mediaQuery.padding.top,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
EditableAvatarWidget(
circleRadius: circleRadius,
badge: test,
border: Border.all(color: test.mainColor, width: 5),
),
Column(
children: [
Text(
"Name Surname",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 26,
color: Global.blackGrey),
),
SizedBox(height: 10),
Text(
"mail#mail.com",
style: TextStyle(fontSize: 18, color: Colors.grey),
)
],
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width / 6, vertical: 0),
child: FlatCustomButton(
onPress: () {},
background: Global.editProfileButton,
text: "Edit profile",
textColor: Global.blackGrey,
inkwellColor: Colors.black,
),
)
],
),
),
),
),
],
),
),
);
You can use SliverAppBar like you have already tried, but inside that you have flexibleSpaceBar which has background property that can accept any kind of Widget.
A sample code is here.
If you can set a fixed height to the Column inside the SingleChildScrollView,
that's probably the best, even if it involves a bit of "hacking" as in the fix you provided.
However, when you need flexible/expanding content in the Column, you can consider using a ConstrainedBox with IntrinsicHeight inside the SingleChildScrollView as the SingleChildScrollView's documentation describes.
I've found that for relatively simple screens this works well. E.g. where you really only need scrolling if you have an input field and the keyboard pops up, as in your code.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
...
Note: with more complex screens, IntrinsicHeight might be too costly, see its docs for more info.
In HTML creating a page that is divided into 2 columns that span 100% of the screen height is easy
<div id="row">
<div id="column1" style="width:75%; height:100%"></div>
<div id="column2" style="width:25%; height:100%"></div>
</div>
Using Flutter this seems more complicated than it should be, i tried to achieve the above in a couple of ways: (The page's outline is CustomScrollView -> SliverToBoxAdapter -> Row -> Columns)
Using MediaQuery to set the columns' height as deviceSize.height. This failed because as the left column got bigger than the right column, the right column did not expand in size to match.
Using Expanded or Flexible (tight or loose) to try and expand the height. This did not work.
My question is how do i achieve 100% height and not 100vh height in Flutter web?
Edit:
This illustrates the problem, the right column is not expanding in size to match the left column.
CustomScrollView(
slivers: <Widget>[
SliverFillRemaining(
child: Container(
color: Colors.purple,
child: SingleChildScrollView(
child: Row(
children: <Widget>[
Container(
color: Colors.blue,
child: Column(
children: <Widget>[
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
],
),
),
Container(
color: Colors.yellow,
child: Column(
children: <Widget>[Text("test")],
),
),
],
),
),
),
),
],
);
Not sure if this is what you want. But based on your statement I think you are looking for two column layout as in here and as shown below in the image.
Following is the code for the same. You can adjust the flex value in the Expanded widget to acquire the required screen width ratio. but if you want to adjust the width each columns like using a drag handle or so, then this alone wont suffice.
import 'package:flutter/material.dart';
class FullHeightDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
color: Colors.red,
child: Center(
child: Text(
'Column-1',
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
),
),
),
),
Expanded(
flex: 1,
child: Container(
child: Container(
color: Colors.teal,
child: Center(
child: Text(
'Column-2',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
),
),
),
)
],
));
}
}
Specifying the height using MediaQuery inside a Scrollable widget could help
Following code places the columns inside a SingleChildScrollableView widget and specifies the height of the container based on MediaQuery to achieve the same. Will this help.? The LayoutBuilder is only there to show that the using the height from its constraints could also lead to error since in this case its height is also infinite.
import 'package:flutter/material.dart';
class FullHeightDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: LayoutBuilder(
builder: (context, constraints) {
var size = MediaQuery.of(context).size;
return Container(
child: Row(
children: <Widget>[
Container(
height: size.height,
// height: constraints.maxHeight,
width: constraints.maxWidth / 2,
color: Colors.red,
child: Center(
child: Text(
'Column 1',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
Container(
color: Colors.green,
height: size.height,
// height: constraints.maxHeight,
width: constraints.maxWidth / 2,
child: Center(
child: Text(
'Column 2',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
),
)
],
),
);
},
),
);
}
}
I need a Container with some text in to auto expand. I have an API call, which can be anything from 5 words to 500 words. I don't want to just have 1 fixed size that's huge, but contains 10 words.
I have tried Expanded() and SizedBox.Expand(), but I might be using them wrong
Card(
elevation: defaultTargetPlatform ==
TargetPlatform.android ? 5.0 : 0.0,
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.all(0.0),
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(color: Colors.black),
width: _screenSize.width,
height: 250,
child: Column(
children: <Widget>[
Container(
color: Colors.black,
width: _screenSize.width,
height: 35,
child: Padding(
padding: const EdgeInsets.only(
left: 15, top: 11),
child: Text("Title".toUpperCase(),
style: TextStyle(
color: Colors.white
),
),
),
),
Container(
color: Colors.white,
width: _screenSize.width,
height: 210,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 5),
child: Text("Title of expanding text", style: TextStyle(
fontSize: 25,
),
),
),
Text("Expanding text", style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.w800
),),
],
),
),
],
),
),
],
),
),
I just need the Container to expand, but stay small/get bigger
Have you tried not specifying height at all? The Container should wrap according to the child in this case.
Otherwise, the widget has a child but no height, no width, no
constraints, and no alignment, and the Container passes the
constraints from the parent to the child and sizes itself to match the
child.
Above is an extract from the official flutter documentation for Container.
Here is the official flutter documentation link.
You can use FittedBox, this will resize your text according to available area.
You can use it like this :
FittedBox(child: Text('...............Your text...............'));
I would suggest you to use Constraints...this will set Container height according to the Text child's requirement. Please see the example...
Container(
constraints: BoxConstraints(
maxHeight: double.infinity,
),
child: Column(
children: [
Text(
'Hello flutter...i like flutter...i like google...',
softWrap: true,
style: TextStyle(
color: Colors.white, fontSize: 20 , ),
),],),)
we just neeed to add mainAxisSize: MainAxisSize.min, properties inside child Column or Row where the child is set to Container
for example
AnythingYourWidget(
child: Container(
child: Column( // For Example Column
mainAxisSize: MainAxisSize.min, // these properties following the children content height available.
children: [
// YourWidget
]
)
)
),
I too had a container with a text widget inside that would not scale as the text increased in character count. Make the widget tree Container -> IntrinsicWidth -> Text/TextField and it seems to play nicely for me.
IntrinsicWidth will scale the size of the container to its child.