# Chapter 6 - Grocery Tile Fix

**URL:** <https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855>\
**Category:** Flutter Apprentice\
**Created:** [October 26, 2021, 10:41am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855 "2021-10-26T10:41:09Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![mayank9018](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mayank9018/32/81494_2.png) [@mayank9018](https://forums.kodeco.com/u/mayank9018)\
**Post date:** [October 26, 2021, 10:41am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/1 "2021-10-26T10:41:09Z")

</div>

Under [‘Finishing GroceryTile’ in chapter 6](https://www.raywenderlich.com/books/flutter-apprentice/v2.0/chapters/6-interactive-widgets#toc-chapter-012-anchor-012), using `MainAxisAlignment.spaceBetween` adds space between Container(used for color coding) and SizedBox as well making the GroceryTile look like this:  
 ![image](https://files.chunter.kodeco.com/original/3X/e/2/e2834ff663286b3c54f8e6502a80d05e862c993e.png)

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

```dart
   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
            ],
          ),
        ],
      ),
    );

```

---

<div class="post-metadata">

**Author:** ![alilosoft](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/alilosoft/32/99601_2.png) [@alilosoft](https://forums.kodeco.com/u/alilosoft)\
**Post date:** [October 26, 2021, 11:28am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/2 "2021-10-26T11:28:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jefff9511](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jefff9511/32/102075_2.png) [@jefff9511](https://forums.kodeco.com/u/jefff9511)\
**Post date:** [October 26, 2021, 10:48pm UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/3 "2021-10-26T22:48:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![spgms](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/spgms/32/111854_2.png) [@spgms](https://forums.kodeco.com/u/spgms)\
**Post date:** [October 27, 2021, 1:02am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/4 "2021-10-27T01:02:57Z")

</div>

@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](https://files.chunter.kodeco.com/original/3X/d/9/d900015f8c845aa53507327e2d64ae80d99fb0d1.png)

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:

```auto
   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()
            ],
          )
        ],
      ),
    );

```

---

<div class="post-metadata">

**Author:** ![mayank9018](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mayank9018/32/81494_2.png) [@mayank9018](https://forums.kodeco.com/u/mayank9018)\
**Post date:** [October 27, 2021, 5:43am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/5 "2021-10-27T05:43:21Z")

</div>

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

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

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

```auto
// 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](https://files.chunter.kodeco.com/original/3X/4/a/4ac37a16deea8245a2684f214a7313a99297797d.png)

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

The correct code would be:

```auto
// 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(),
    ]
  ),
),

```

---

<div class="post-metadata">

**Author:** ![spgms](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/spgms/32/111854_2.png) [@spgms](https://forums.kodeco.com/u/spgms)\
**Post date:** [October 28, 2021, 1:54am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/6 "2021-10-28T01:54:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sheldoni](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/sheldoni/32/81494_2.png) [@sheldoni](https://forums.kodeco.com/u/sheldoni)\
**Post date:** [October 29, 2021, 8:13am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/7 "2021-10-29T08:13:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![iphie\_flutter](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/iphie_flutter/32/81494_2.png) [@iphie\_flutter](https://forums.kodeco.com/u/iphie_flutter)\
**Post date:** [November 2, 2021, 4:55pm UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/8 "2021-11-02T16:55:48Z")

</div>

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](https://files.chunter.kodeco.com/original/3X/6/a/6a5d73144e350892e95eed1333020273989bc930.jpeg)

---

<div class="post-metadata">

**Author:** ![iphie\_flutter](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/iphie_flutter/32/81494_2.png) [@iphie\_flutter](https://forums.kodeco.com/u/iphie_flutter)\
**Post date:** [November 2, 2021, 5:00pm UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/9 "2021-11-02T17:00:15Z")

</div>

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

---

<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:** [November 3, 2021, 1:40am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/10 "2021-11-03T01:40:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![iphie\_flutter](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/iphie_flutter/32/81494_2.png) [@iphie\_flutter](https://forums.kodeco.com/u/iphie_flutter)\
**Post date:** [November 6, 2021, 10:50am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/11 "2021-11-06T10:50:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rashidotm](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/rashidotm/32/100456_2.png) [@rashidotm](https://forums.kodeco.com/u/rashidotm)\
**Post date:** [November 10, 2021, 7:58am UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/12 "2021-11-10T07:58:12Z")

</div>

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.

---

<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:** [November 10, 2021, 2:49pm UTC](https://forums.kodeco.com/t/chapter-6-grocery-tile-fix/154855/13 "2021-11-10T14:49:56Z")

</div>

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