# Author card giving me errors see screen shot

**URL:** <https://forums.kodeco.com/t/author-card-giving-me-errors-see-screen-shot/153442>\
**Category:** Flutter Apprentice\
**Created:** [October 16, 2021, 7:39pm UTC](https://forums.kodeco.com/t/author-card-giving-me-errors-see-screen-shot/153442 "2021-10-16T19:39:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lc0815](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/lc0815/32/81494_2.png) [@lc0815](https://forums.kodeco.com/u/lc0815)\
**Post date:** [October 16, 2021, 7:39pm UTC](https://forums.kodeco.com/t/author-card-giving-me-errors-see-screen-shot/153442/1 "2021-10-16T19:39:47Z")

</div>

![Screen Shot 2021-10-16 at 1.06.30 PM](https://files.chunter.kodeco.com/original/3X/f/3/f34782fd32bfc44eedf8e84a32af947adfd2d2a7.jpeg)

the author card favorite button comes up with error that I do not understand

can you help

LC

---

<div class="post-metadata">

**Author:** ![jomoka](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jomoka/32/109828_2.png) [@jomoka](https://forums.kodeco.com/u/jomoka)\
**Post date:** [October 17, 2021, 4:51am UTC](https://forums.kodeco.com/t/author-card-giving-me-errors-see-screen-shot/153442/2 "2021-10-17T04:51:32Z")

</div>

@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.

![Screen Shot 2021-10-17 at 11.19.46 AM](https://files.chunter.kodeco.com/original/3X/3/5/3505b7ec2d30dbafcb395e01957b98d2b929241e.jpeg)

There are actually 2 different ways you can solve this:

1. Use a `Wrap` widget, if there is no space it will simply wrap the child widgets below.
2. Give the text widget a fixed width (Not ideal, not flexible, i wouldn’t recommend this)

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:

```auto
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:

![Screen Shot 2021-10-17 at 11.49.36 AM](https://files.chunter.kodeco.com/original/3X/2/d/2d977a7cca84c191b3cb1a4b17f1ae19dd3a2e44.jpeg) ![Screen Shot 2021-10-17 at 11.49.32 AM](https://files.chunter.kodeco.com/original/3X/9/d/9db9b0aa2808e775e9ea3c95e492d442b01047b2.jpeg) ![Screen Shot 2021-10-17 at 11.49.29 AM](https://files.chunter.kodeco.com/original/3X/1/8/1837955c204b6a5f183cfb52e42925d7d3aa4748.jpeg)

Hope this helps!

**Thank for catching this issue! I believe this is something we will need to update in our next release.**

---

<div class="post-metadata">

**Author:** ![lc0815](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/lc0815/32/81494_2.png) [@lc0815](https://forums.kodeco.com/u/lc0815)\
**Post date:** [October 29, 2021, 7:31pm UTC](https://forums.kodeco.com/t/author-card-giving-me-errors-see-screen-shot/153442/3 "2021-10-29T19:31:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jomoka](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jomoka/32/109828_2.png) [@jomoka](https://forums.kodeco.com/u/jomoka)\
**Post date:** [October 30, 2021, 1:58am UTC](https://forums.kodeco.com/t/author-card-giving-me-errors-see-screen-shot/153442/4 "2021-10-30T01:58:54Z")

</div>

@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:

1. Change the way the layout works, like the solution i suggested above (Wrap widget)
2. Automatically scale text smaller when it doesn’t fit. `FittedBox` with fit setting `BoxFit.scaleDown:`. This will make the text smaller as there is less space.