I probably misuse the widget. I want to make a card scrollable because it overflows on smaller devices :
My code is :
LayoutBuilder(
builder:(BuildContext context,BoxConstraints viewportConstraints){
return _currentItem == 1 ? FadeTransition(
opacity: fadeAnimation,
child: SingleChildScrollView(
child: new HotelAdditionnalInfo(),
),
HotelAdditionnalInfo() is a widget with a fixed height (that's why I want to make it scrollable) being :
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 5.0),
blurRadius: 15.0
),
]
),
width: MediaQuery.of(context).size.width * 0.9,
height: 300.0,
child: Stack( ...
Adding SingleChildScrollView doesn't seem to change anything, there is still this yellow overflow :/
Try wraping your SingleChildScrollView into a Container and then give that Container a height say 300 for example.
Container(
height:300,
child: SingleChildScrollView(
child: new HotelAdditionnalInfo(),
),
),
Related
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 want to have more(in this example 4) items in Row. I tried use Expanded or Flexible or mainAxisAlignment: MainAxisAlignment.spaceEvenly to fill up all width of screen. But I want to heve items lets say specific width and height 50 pixels, and GestureDetector which is around item to be 1/4 of screen(4 items = full width). So everywhere I tap in the row something will be selected. My problem is that every my solution deforms items(circles) or circle must be very huge to width = height to not be deformed.
I also tried wrapping whole _ratingEmoji in Expanded and giving ratingItem.ratingIndicator constraints to max width but with same result.
Row of items:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
for (var ratingItem in editGroceryRatingProvider.foodRatings)
_ratingEmoji(editGroceryRatingProvider, ratingItem, context),
],
),
Item:
Widget _ratingEmoji(EditGroceryRatingProvider editGroceryRatingProvider,
SelectedFoodRating ratingItem, BuildContext context) {
return GestureDetector(
child: ratingItem.selected
? Container(
width: MediaQuery.of(context).size.width / 8,
height: MediaQuery.of(context).size.width / 8,
padding: const EdgeInsets.all(2.0),
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFF312ADB),
width: 3.0,
),
borderRadius: BorderRadius.circular(32.0)),
child: Center(
child: ratingItem.ratingIndicator,
),
)
: ratingItem.ratingIndicator,
onTap: () => editGroceryRatingProvider.updateSelectedRating(ratingItem),
);
}
RatingIndicator which is "circle" item to be on the screen:
Container(
decoration: BoxDecoration(
border: Border.all(
color: color,
width: 1.5,
),
borderRadius: BorderRadius.circular(64.0),
),
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 3.0,
),
borderRadius: BorderRadius.circular(64.0),
),
child: ClipOval(
child: Container(
width: width ?? MediaQuery.of(context).size.width / 7,
height: height ?? MediaQuery.of(context).size.width / 7,
color: color,
),
),
),
);
Thanks a lot.
Update:
Items should stay as they are on screenshot, but "whole" row should be clickable(means even if you click between 2 items, one closer to click should be selected)
Check, please solution.
The whole area is clickable. You just need to add your item instead of mine.
#override
Widget build(BuildContext context) {
final colors = [Colors.red, Colors.blue, Colors.brown, Colors.cyan];
return Scaffold(
body: Container(
alignment: Alignment.center,
color: const Color(0xffFAFAFA),
child: Row(
children: List.generate(
colors.length,
(index) => Expanded(
child: GestureDetector(
onTap: () => print('Tapped:$index'),
child: Container(
height: 50,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: colors[index],
),
),
)),
)),
),
),
);
I am using the following code but my image is stretching, regardless of the box fit value. Need help in making it fill the screen without stretching.
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
GestureDetector(
onTap: () => _optionsDialogBox(),
child: Container(
height: 250.0,
child: _companyLogo == null
? CircleAvatar(
radius: 75.0,
foregroundColor: Colors.deepOrange,
child: Icon(
Icons.camera_alt,
size: 75.0,
),
)
: Image.memory(
base64Decode(_companyLogo),
fit: BoxFit.cover,
),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(0.0, 0.0),
blurRadius: 5.0,
spreadRadius: 1.0)
],
color: constructionOrange,
// gradient: GRADIENT,
),
),
),
I am very new to flutter but I have a logic in mind that can solve this:
let size of image be = w (width) * h (height)
let max size of container be = a (cont. width) * b (cont. height)
find the a/w and then multiply by h such that the size of new image will be a * (h*a/w)
As you can see in the Image there is a Container-widget (grey Box) and in it there's a Markdown-widget from the flutter_markdown Package.
I want that the Markdown-element is centered vertially in the Container ( where the yellow marker is) instead of where the Markdown is now ("Internet").
EDIT:
If the only possible solution is to add a fixed width I need to calculate it somehow, because it can be only one or many lines or a long text without line breaks. If there aren't any line breaks the flutter_markdown widget automatically wraps the text into the widget.
How should it look like
child: Container(
constraints: BoxConstraints.expand(
width: MediaQuery.of(context).size.width * 0.9,
height: MediaQuery.of(context).size.width * 0.7,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
color: _color
),
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Container(
decoration: BoxDecoration(
borderRadius: new BorderRadius.only(
topLeft: new Radius.circular(20.0),
bottomLeft: new Radius.circular(20.0),
),
boxShadow: [
new BoxShadow(
color: _color,
offset: new Offset(5.0, 5.0),
blurRadius: 20.0,
)
],
),
child: Scrollbar(
child: Markdown(
imageDirectory: Store.storageDirectory,
data: _markdownText)),
),
),
Thanks in advance.
Markdown based on ListView and provide the same properties. Works for me:
Center(child: Markdown(
physics: BouncingScrollPhysics(),
shrinkWrap: true,
data: store.subtitle))
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(''),
)
),