If I uncomment the second text widget, then my shadows are cut off on the sides (as in the screenshot) of this and even others!! widgets on this page, if the second text widget is commented, then the shadow is displayed well on all four sides at this and others widgets on the page, I just can’t understand what could be the matter. It looks like the outer padding is erasing this shadow, because the shadow of all widgets on the page is erased from two sides, but i don't touch the padding, just uncomment the second widget text.
return Container(
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
boxShadow: const [
BoxShadow(
spreadRadius: 0.05,
blurRadius: 7.0,
color: Colors.red,
)
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'random text',
),
SizedBox(
height: 8,
),
// Text(
// 'random text 2',
// ),
],
),
);
Shadow needs empty space to be rendered. The padding of this container is in the inside of the shadow. Try also using margin of the container or placing another Padding widget as a parent to this Container to solve it.
As for why exactly this text is making a difference, it's hard to tell and requires a bit of debugging.
this issue because the padding Fills the empty space of box shadow, for this problem you should add padding in child of container not in container widget because it destroys spaces
do like this code:
Container(
decoration: BoxDecoration(
//some shadow
),
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
children[]
),
),
),
Related
I have a row containing four Expanded widgets. Its code looks as follows:
Row(
children: [
Expanded(
child: Container(
width: double.infinity,
color: Colors.blueGrey,
padding: const EdgeInsets.all(10),
child: (Text(
lessonData.language,
style: const TextStyle(
color: Colors.white,
),
)),
),
),
Expanded(
flex: 1,
child: Container(
width: double.infinity,
color: Colors.blueGrey,
padding: const EdgeInsets.all(10),
child: (Text(
lessonData.cEFRLevelName,
style: const TextStyle(
color: Colors.white,
),
)),
),
),
Expanded(
flex: 1,
child: Container(
width: double.infinity,
color: Colors.blueGrey,
padding: const EdgeInsets.all(10),
child: (Text(
lessonData.lessonTopic,
style: const TextStyle(
color: Colors.white,
),
)),
),
),
Expanded(
child: Container(
width: double.infinity,
color: Colors.blueGrey,
padding: const EdgeInsets.all(10),
child: (
Text(
lessonData.lessonHeading,
style: const TextStyle(
color: Colors.white,
),
)),
),
)
],
),
The resulting display is unsatisfactory if any of the texts in the Containers inside the Expanded widgets are forced to wrap. As in this image:
Click here to display an image of my problem when text has wrapped in one Container but not in the other three.
This image shows something like what I'd like the Row to look like.
I simply can't get the Container widgets containing text without any wrap to expand out to the height of the row.
Among other candidate solutions, I've tried setting the height to double.infinity and double.maxFinite, setting Constraints in the Containers to Constraints: BoxConstraints.expand(). All these options either do nothing or generate an error on hot reload.
I'm reluctant to try an IntrinsicHeight widget because I'm warned that it's very hungry.
I'd be very grateful for any solution and/or comment you might have!
TIA
Jaime
If I understood what you want, I may have a suggestion. It's more of a workaround, but you can move the Container with the colored backgroud up a level and remove each other Container, making the new Container the parent of the whole Row: I put the code in a DartPad, and this is how it looks.
Just an excerpt of the code:
Container(color: Colors.red,child: Row(
children: [
Expanded(...),
Expanded(...),
//and so on...
This works only on an aesthetic level: each Text will still get resized, but you won't notice.
I want to use a widget with a background color that only occupy a specific space without expanding for full screen. But, if I try this with Container it doesn't work like I want:
Container(
decoration: BoxDecoration(
color: AppColors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(24),
),
),
This code occupy the full screen, instead of only using the size it needs.
The idea is to show a Text and a Button in a Column, with a white background color. How can I accomplish this?
Actually I not really understand with your question, but you can wrap container inside container, and add padding in it. Or you can use stack to make your design more dynamic.
here is my code: maybe as you wish
SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: Colors.green
),
child: Container(
color: Colors.orange,
child: Column(
children: [
Text('Text 1'),
FlatButton(onPressed: (){}, child: Text("Button1"))
],
),
)
),
)
hope this can help you, thank you
I want my column to be scrollable and I cannot use a Listview as I want the children in Column view to be spaced evenly. Having said that, I want my column to be scrollable. Placing the Column in SingleChildSCrollView, my entire screen becomes blank. Can anyone please suggest me a good option to make my column scrollable without using listview/singlechildscrollview.
The actual code in which I am facing this issue is too big to trace the real problem. I am providing a sample code which highlights the issue that I am facing. Here is my code:
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.red,
title: Text(
"Beverages",
),
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
flex: 3,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 150.0,
decoration: BoxDecoration(
color: kWhiteColor,
borderRadius: BorderRadius.circular(3.0),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 3.0,
spreadRadius: 1.0,
offset: Offset(2, 2),
)
],
),
),
),
),
Flexible(
flex: 3,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 150.0,
decoration: BoxDecoration(
color: kWhiteColor,
borderRadius: BorderRadius.circular(3.0),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 3.0,
spreadRadius: 1.0,
offset: Offset(2, 2),
)
],
),
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 150.0,
decoration: BoxDecoration(
color: kWhiteColor,
borderRadius: BorderRadius.circular(3.0),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 3.0,
spreadRadius: 1.0,
offset: Offset(2, 2),
)
],
),
),
),
],
)),
Flexible(
flex: 4,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 150.0,
decoration: BoxDecoration(
color: kWhiteColor,
borderRadius: BorderRadius.circular(3.0),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 3.0,
spreadRadius: 1.0,
offset: Offset(2, 2),
)
],
),
),
),
),
],
),
),
);
You can’t use MainAxisAlignment.spaceEvenly when you have your Column inside a SingleChildScrollView. Why this? You're trying to scroll, but your height is somehow infinite and how would you space your children evenly in an infinite space? The same applies when using Flexible widgets. The way to have things scrollable would be if you use either a ListView or a Column inside a SingleChildScrollView. There are other widgets too, but they follow the same logic. I would recommend: you keep your Column wrapped in a SingleChildScrollView and place SizedBox widgets between components to have them evenly separated. Another option would be to use a ListView.builder and place a SizedBox after the Widget to be built. In that way you should be able achieve what you're looking for.
So, about your code: I deleted this spaceEvenly enum because of the reason above. After that, I ran your code and I obtained this:
RenderFlex children have non-zero flex but incoming height constraints
are unbounded
That is the thing with the infinite space I told you the Flexibles are trying to take but they can’t. I also deleted them. So how could you give your Widgets desired size? I would use Containers with static height and inside them, there is where I could then use Expanded or Flexible widgets. If you want something scrollable but don’t want it to occupy the whole screen, try using a Container with static height and inside it a ListView.builder.
I created a parent container with border radius circular but the text does not follow the same and overflows the container on the bottom left.How to make the text adjust to parent container?
Just add some padding using the padding parameter in your container and you are good to go!
Container(padding: EdgeInsets.all(10),)
You'll find everything about it here.
use the property clipBehavior and set it to Clip.antiAlias like the example below
Container(
margin: EdgeInsets.only(left: 10, right: 10),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: const BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 6,
offset: const Offset(0, 3),
),
],
child: Container(
colors: Colors.amber,
child:Text('hello world'),
),
),
Just your text to new container and give the height and width to it, and do not to forget to change overflow property in Text widget. You can also wrap these widgets in to FittedBox, to size text to the container.
I have a Container with a BoxShadow decoration at the top of a page, and below the Container is a ListView with a number of Cards in it. I want the top Container to have a drop shadow that appears in front of the items in the ListView, but this is what I get:
The drop shadow seems to appear behind the Cards instead of in front of it. This is the code:
Widget _buildBody(BuildContext context, ChecklistModel model){
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.red.shade200,
boxShadow: [BoxShadow(
color: Colors.red.shade200,
offset: Offset(0, 10),
blurRadius: 10,
spreadRadius: 10
)]
),
child: ListTile(
title: Text(''),
)
),
Expanded(child: Padding(
padding: const EdgeInsets.all(10),
child: _buildCheckpointListView(context, model))
)
],
)
);
}
I also tried replacing the Container with a Card, but that didn't work either.
It is happening because since you are using an Expanded widget inside Column, it is taking up all the available space on the screen and hence it looks like it is overlapping the Container but actually it's just overlapping the shadow.
Instead of a Column widget, use a Stack to show the Container above the ListView.
You can use Positioned widget to position the child widgets of the Stack.
But in this case, make sure you put the Container code after the ListView code so that it would always be on top.
Example:
Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10),
child: _buildCheckpointListView(context, model)
),
Positioned(
top: 0.0, //To align Container at the top of screen
left: 0.0,
right: 0.0,
child: Container(
decoration: BoxDecoration(
color: Colors.red.shade200,
boxShadow: [
BoxShadow(
color: Colors.red.shade200,
offset: Offset(0, 10),
blurRadius: 10,
spreadRadius: 10
)]
),
child: ListTile(
title: Text(''),
)
),
),
]
)
You can also wrap you ListView inside a Positioned widget if you want to provide a certain margin from top.
Give a bottom margin to the container to introduce some empty space between container and bottom siblings. Like this :
Container(
margin: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
color: Colors.red.shade200,
boxShadow: [BoxShadow(
color: Colors.red.shade200,
offset: Offset(0, 10),
blurRadius: 10,
spreadRadius: 10
)]
),
child: ListTile(
title: Text(''),
)
),