the author card favorite button comes up with error that I do not understand
can you help
LC
the author card favorite button comes up with error that I do not understand
can you help
LC
@lc0815 this is because the width of the container is too small.
If you pull up dart dev tools, you will see that the text widget’s width is unconstrained.
E.g. if the container width of the card is 200, the render will overflow, as there is not enough space to layout the entire text widget.
There are actually 2 different ways you can solve this:
Wrap
widget, if there is no space it will simply wrap the child widgets below.For now here is a temporary solution. I have changed the Row
widgets to Wrap
widgets. Please see the enhance code for author_card.dart
below:
import 'package:flutter/material.dart';
import 'circle_image.dart';
import 'fooderlich_theme.dart';
class AuthorCard extends StatelessWidget {
// 1
final String authorName;
final String title;
final ImageProvider? imageProvider;
const AuthorCard({
Key? key,
required this.authorName,
required this.title,
this.imageProvider,
}) : super(key: key);
// 2
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
child: Wrap(
children: [
// 1
Wrap(children: [
CircleImage(
imageProvider: imageProvider,
imageRadius: 28,
),
// 2
const SizedBox(width: 8),
// 3
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
authorName,
style: FooderlichTheme.lightTextTheme.headline2,
),
Text(
title,
style: FooderlichTheme.lightTextTheme.headline3,
)
],
),
]),
IconButton(
// 4
icon: const Icon(Icons.favorite_border),
iconSize: 30,
color: Colors.grey[400],
// 5
onPressed: () {
const snackBar = SnackBar(content: Text('Favorite Pressed'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
),
],
),
);
}
}
You will notice if you modify Card2
widget’s width, the child widgets will wrap below. As shown below:
Hope this helps!
Thank for catching this issue! I believe this is something we will need to update in our next release.
thank you very much for your answer, it turns out that I after much reading I resolved the issue by incrementally changing the size of the author’s text until it stopped giving me the error and this was before you send me your proposed answer.
thank you very much for your support.
I’m on c5/6, awesome but difficult.
@lc0815 ah yes changing the size of the author text is a solution but it’s not a scalable solution.
Couple ways you can do this:
FittedBox
with fit setting BoxFit.scaleDown:
. This will make the text smaller as there is less space.