Author card giving me errors see screen shot

[lc0815]

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

can you help

LC

[jomoka]

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

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:

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.

[lc0815]

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.

[jomoka]

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