I've read and read and understood that: Expanded takes all available sizes Flexible is resonable and only takes its own size
But in this code, when I put expanded I'm told I'm missing a size, if I put flexible I'm told the same thing, but with fittedBox everything works correctly, ?!
The following RenderObject was being processed when the exception was fired: RenderFlex#f02e2 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE:
creator: Column ← Padding ← Column ← ClipRRect ← Padding ← DecoratedBox ← Padding ← Container ←
CustomCard ← LayoutBuilder ← RepaintBoundary ← IndexedSemantics ← ⋯
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=132.7, 0.0<=h<=Infinity)
size: MISSING
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: start
textDirection: ltr
verticalDirection: down
In this code:
import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';
class CustomCard extends StatelessWidget {
final String imagePath;
final String rating;
final String nameType;
final String description;
final String price;
final Color buttonColor;
final BoxConstraints parentConstraints;
const CustomCard({
Key? key,
required this.imagePath,
required this.rating,
required this.nameType,
required this.description,
required this.price,
required this.buttonColor,
required this.parentConstraints,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
SizedBox(
height: parentConstraints.maxHeight * 0.5,
width: double.infinity,
child: Image.asset(
imagePath,
fit: BoxFit.cover
),
),
Positioned(
top: 8,
left: 8,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(8.0),
),
child: Row(
children: [
const Icon(Icons.star, color: Colors.yellow, size: 16),
const SizedBox(width: 4),
Text(
rating,
style: const TextStyle(color: Colors.white),
),
],
),
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
fit: BoxFit.scaleDown,
child: AutoSizeText(
nameType,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
maxLines: 1,
minFontSize: 18,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(height: 4),
Text(
description,
style: const TextStyle(
color: Colors.grey,
fontSize: 18,
),
),
const SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
const Text(
'\$',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
const SizedBox(width: 10),
Text(
price,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
],
),
const Spacer(),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
backgroundColor: buttonColor,
padding: const EdgeInsets.all(3.0),
minimumSize: Size(parentConstraints.maxWidth * 0.3, 0),
),
child: const Text(
'+',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
],
),
],
),
),
],
),
),
);
}
}
Thanks you so much !
I've read and read and understood that: Expanded takes all available sizes Flexible is resonable and only takes its own size
But in this code, when I put expanded I'm told I'm missing a size, if I put flexible I'm told the same thing, but with fittedBox everything works correctly, ?!
The following RenderObject was being processed when the exception was fired: RenderFlex#f02e2 relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE:
creator: Column ← Padding ← Column ← ClipRRect ← Padding ← DecoratedBox ← Padding ← Container ←
CustomCard ← LayoutBuilder ← RepaintBoundary ← IndexedSemantics ← ⋯
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=132.7, 0.0<=h<=Infinity)
size: MISSING
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: start
textDirection: ltr
verticalDirection: down
In this code:
import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';
class CustomCard extends StatelessWidget {
final String imagePath;
final String rating;
final String nameType;
final String description;
final String price;
final Color buttonColor;
final BoxConstraints parentConstraints;
const CustomCard({
Key? key,
required this.imagePath,
required this.rating,
required this.nameType,
required this.description,
required this.price,
required this.buttonColor,
required this.parentConstraints,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
SizedBox(
height: parentConstraints.maxHeight * 0.5,
width: double.infinity,
child: Image.asset(
imagePath,
fit: BoxFit.cover
),
),
Positioned(
top: 8,
left: 8,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(8.0),
),
child: Row(
children: [
const Icon(Icons.star, color: Colors.yellow, size: 16),
const SizedBox(width: 4),
Text(
rating,
style: const TextStyle(color: Colors.white),
),
],
),
),
),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
fit: BoxFit.scaleDown,
child: AutoSizeText(
nameType,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
maxLines: 1,
minFontSize: 18,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(height: 4),
Text(
description,
style: const TextStyle(
color: Colors.grey,
fontSize: 18,
),
),
const SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
const Text(
'\$',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
const SizedBox(width: 10),
Text(
price,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
],
),
const Spacer(),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
backgroundColor: buttonColor,
padding: const EdgeInsets.all(3.0),
minimumSize: Size(parentConstraints.maxWidth * 0.3, 0),
),
child: const Text(
'+',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
],
),
],
),
),
],
),
),
);
}
}
Thanks you so much !
Share Improve this question edited Feb 17 at 6:05 DarkBee 15.5k8 gold badges72 silver badges118 bronze badges asked Feb 12 at 20:24 Asile34Asile34 4391 silver badge10 bronze badges1 Answer
Reset to default 1In this code, you put the Column inside Column which make the parent constraint's become unbounded.
FittedBox(
fit: BoxFit.scaleDown,
child: AutoSizeText(
nameType,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
maxLines: 1,
minFontSize: 18,
overflow: TextOverflow.ellipsis,
),
),
Why FittedBox works?
Because it's independently adjust itself to the child's height so it become bounded (hasSize become fulfilled).
Why Flexible doesn't work?
Because it needs the bounded height to fill the available space. If you want to use Flexible, the solution is by giving the Column MainAxisSize.min so it will free up the free space and shrink it to the children's height.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Text(
nameType,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
...
],
),
Why Expanded still doesn't work?
Even though the Expanded extends Flexible, it has a FlexFit.tight attribute that force it to fill the available space. However, since mainAxisSize is set to MainAxisSize.min, the Column only sizes itself to fit its children, make Expanded has no extra space to take.
Meanwhile, the Flexible by default is Flexfit.loose that made it can satisfied to the available space.
So that, you need to specify the height constraints.
SizedBox(
height: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Text(
nameType,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
...
],
),
),
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745204168a4616503.html
评论列表（0条）