Chapter 6 - Grocery Tile Fix

📚 Official Books Flutter Apprentice
1

Under ‘Finishing GroceryTile’ in chapter 6, using MainAxisAlignment.spaceBetween adds space between Container(used for color coding) and SizedBox as well making the GroceryTile look like this:
image

Therfore, to fix this instead of using mainAxisAlignment, a spacer should be used between the Column and Row something like this:

   return SizedBox(
      height: 100.0,
      child: Row(
        // mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(...) // For color coding
          const SizedBox(width: 16.0),
          Column(...), // For item name,date, time and priority
          const Spacer(), // To add space
          Row(
            children: [
              Text(...), // For quantity
              buildCheckbox(), // Checkbox
            ],
          ),
        ],
      ),
    );
3 Likes
2

I’m just starting with Ch6;
Many thanks for sharing.

3

THANKS!!! This should be added to the errata section of the book.

4

@mayank9018 the top level Row should contain two children, which are also Row. Those child rows each have children. This is what you should see.
Screen Shot 2021-10-26 a`t 17.49.25

Please compare your code to the code in the final project folder for all of the code, but at a collapsed view should look like this:

   return SizedBox(
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Container(width: 5.0, color: item.color),
              const SizedBox(width: 16.0),
              Column(...),
            ],
          ),
          Row(
            children: [
              Text(...),
              buildCheckbox()
            ],
          )
        ],
      ),
    );
1 Like
5

@spgms Sorry, my bad. It wasn’t about the Spacer. The code you posted is right, but on following the instructions in the book, it ends up looking like this:

   return SizedBox(
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
         // This should be wrapped in a row
          Container(width: 5.0, color: item.color),
          const SizedBox(width: 16.0),
          Column(...),
         // till here
          Row(
            children: [
              Text(...),
              buildCheckbox()
            ],
          )
        ],
      ),
    );

Initially the Row looks like this:

child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    // TODO 22: Add Row to group (name, date, importance)
    // TODO 23: Add Row to group (quantity, checkbox)
  ],
),

The book says to replace // TODO 22: Add Row to group (name, date, importance) with the following:

// 2
Container(width: 5.0, color: item.color),
// 3
const SizedBox(width: 16.0),
// 4
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 5
    Text(
      item.name,
      style: GoogleFonts.lato(
        decoration: textDecoration,
        fontSize: 21.0,
        fontWeight: FontWeight.bold),
    ),
    const SizedBox(height: 4.0),
    buildDate(),
    const SizedBox(height: 4.0),
    buildImportance(),
 ],
),

image

Giving Row 4 childrens(Container,SizedBox,Column and Row) instead of 2 children[Row(Container,SizedBox,Column),Row]

The correct code would be:

// 1
Row(children: [
  // 2
  Container(width: 5.0, color: item.color),
  // 3
  const SizedBox(width: 16.0),
  // 4
  Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 5
      Text(
        item.name,
        style: GoogleFonts.lato(
          decoration: textDecoration,
          fontSize: 21.0,
          fontWeight: FontWeight.bold),
      ),
    const SizedBox(height: 4.0),
    buildDate(),
    const SizedBox(height: 4.0),
    buildImportance(),
    ]
  ),
),
1 Like
6

Thank you, @mayank9018, I see to what you are referring. This has been reported previously and will be updated in our next release.

3 Likes
7

@mayank9018 You are so keen, thank you for catching error. I went back to my code for that previous code and corrected it thanks to you.

1 Like
8

Am really enjoying chapter 6, am trying to wrap the inkwell inside the Dismissible, but am getting an error on the onTap() function.
IMG_20211102_143549_133

9

I highlighted the widget (
child: it gives me that error

10

@iphie_flutter please check out the final project, this part is a little tricky! You may have wrapped parenthesis or curly braces in the wrong place!

Please do let us know how we can improve the instructions so it’s easier to understand for others as well!

11

thanks @jomoka have corrected it a long time ago, just seeing your reply.

12

hey @jomoka, thanks for all of you and the team’s effort on this book. Why not use “wrap with widget” refactoring at this place rather than manually inserting it. it will be less error prune as the IDE keeps track of it.

1 Like
13

Yes thanks we are in the process of updating some of the instructions to make it more clear for readers. Thank you :slight_smile: