skip to Main Content

The same 2 errors appear in 2 different files when I run my flutter program, does anyone know how to fix this? this is my code

code for list restaurant.dart

import 'package:flutter/material.dart';
import 'package:resto_app/data/model/restaurant_list.dart';
import 'package:resto_app/ui/detail_page.dart';

class CardRestaurant extends StatelessWidget {
  final Restaurant restaurant;

  const CardRestaurant({Key? key, required this.restaurant}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InkWell(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return RestaurantDetailPage(idrestaurant: restaurant.id);
          }));
        },
        child: Stack(
          children: <Widget>[
            Container(
              margin:
                  const EdgeInsets.only(left: 40, top: 5, right: 20, bottom: 5),
              height: 170.0,
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.lime.shade100,
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 200, top: 20, right: 20, bottom: 20),
                child: Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(
                        width: 120.0,
                        child: Expanded(child: Text(restaurant.name)),
                      ),
                      _sizebox(10),
                      Row(
                        children: [
                          _icon(Icons.star_rate, 20, Colors.yellow),
                          Text(
                            ' ${restaurant.rating}',
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
              left: 20.0,
              top: 15.0,
              bottom: 15.0,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20.0),
                child: Hero(
                  tag: restaurant.pictureId,
                  child: Image.network(
                    "https://restaurant-api.dicoding.dev/images/small/" +
                        restaurant.pictureId,
                    width: 200,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Widget _sizebox(double height) {
  return SizedBox(
    height: height,
  );
}

Widget _icon(IconData icon, double size, Color color) {
  return Icon(
    icon,
    size: size,
    color: color,
  );
}

and my detailrestaurant.dart code

`

`import 'package:flutter/material.dart';
import 'package:resto_app/data/model/restaurants_detail.dart';
import 'package:resto_app/common/constant.dart';

class RestaurantDetail extends StatelessWidget {
  static const routeName = '/restaurant_detail';
  final Restaurant restaurant;
  const RestaurantDetail({Key? key, required this.restaurant})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Hero(
                tag: restaurant.pictureId,
                child: Image.network(
                  "https://restaurant-api.dicoding.dev/images/medium/" +
                      restaurant.pictureId,
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(restaurant.name),
                            _sizebox(10),
                            Row(
                              children: [
                                _icon(Icons.location_city, 20, Colors.grey),
                                const SizedBox(
                                  width: 10,
                                ),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(restaurant.city),
                                    Text(restaurant.address),
                                  ],
                                )
                              ],
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            _icon(Icons.star_rate, 20, Colors.yellow),
                            Text(
                              ' ${restaurant.rating}',
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  _barrierContent(),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        padding:
                            const EdgeInsets.only(top: 10, right: 20, left: 20),
                        child: Text('Description'),
                      ),
                      Container(
                          padding: const EdgeInsets.only(
                              top: 10, right: 20, left: 20, bottom: 20),
                          width: double.infinity,
                          child: Text(restaurant.description)),
                    ],
                  ),
                  _barrierContent(),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 20),
                    child: Column(
                      children: [
                        Text('Category'),
                        ListBody(
                          children: restaurant.categories.map((food) {
                            return Text(
                              '- ${food.name}',
                            );
                          }).toList(),
                        ),
                      ],
                    ),
                  ),
                  _barrierContent(),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 20),
                    child: Column(
                      children: [
                        Text('Menu Food'),
                        ListBody(
                          children: restaurant.menus.foods.map((categori) {
                            return Text(
                              '- ${categori.name}',
                            );
                          }).toList(),
                        ),
                      ],
                    ),
                  ),
                  _barrierContent(),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 20),
                    child: Column(
                      children: [
                        Text('Menu Drink'),
                        ListBody(
                          children: restaurant.menus.drinks.map((drink) {
                            return Text('- ${drink.name}');
                          }).toList(),
                        ),
                      ],
                    ),
                  ),
                  _barrierContent(),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 10),
                    child: Column(
                      children: [
                        Text('Comment'),
                        ListBody(
                          children: restaurant.customerReviews.map((review) {
                            return Padding(
                              padding: const EdgeInsets.all(16.0),
                              child: Expanded(
                                child: Row(children: [
                                  Container(
                                    width: 40,
                                    decoration: const BoxDecoration(
                                        shape: BoxShape.circle,
                                        color: Colors.blue),
                                    child: Center(
                                        child: Text(
                                      review.name.characters.elementAt(0),
                                      style: const TextStyle(
                                          color: Colors.white, fontSize: 20),
                                    )),
                                  ),
                                  const SizedBox(
                                    width: 15,
                                  ),
                                  Expanded(
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Row(
                                          children: [
                                            Text(
                                              review.name,
                                              style: const TextStyle(
                                                  fontSize: 16,
                                                  fontWeight: FontWeight.bold),
                                            ),
                                            Text(
                                              ' ${review.date}',
                                              style: TextStyle(
                                                  fontSize: 14,
                                                  color: Colors.grey.shade500),
                                            )
                                          ],
                                        ),
                                        SizedBox(
                                          width: 270,
                                          child: Text(
                                            review.review,
                                            maxLines: 2,
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        )
                                      ],
                                    ),
                                  )
                                ]),
                              ),
                            );
                          }).toList(),
                        ),
                      ],
                    ),
                  ),
                  _barrierContent()
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Widget _barrierContent() {
  return Container(
    height: 10,
    color: Colors.grey.shade200,
  );
}

Widget _sizebox(double height) {
  return SizedBox(
    height: height,
  );
}

Widget _icon(IconData icon, double size, Color color) {
  return Icon(
    icon,
    size: size,
    color: color,
  );
}

`

error
The same 2 errors appear in 2 different files when I run my flutter program, does anyone know how to fix this?

Error

2

Answers


  1. child: Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(
                        width: 120.0,
                        child: Expanded(child: Text(restaurant.name)),
                      ),
    

    parent of Expanded must be Stack, Column, Row but in your example it’s wrong

    Login or Signup to reply.
  2. You should use Expanded only within a Column, Row or Flex & that to its top most child only

    Here you have use Expanded widget inside padding widget which is inside stack and also you can’t use Expanded inside stack, so it causing this ParentDataWidget Error

    code for list restaurant.dart

        class CardRestaurant extends StatelessWidget {
      final Restaurant restaurant;
    
      const CardRestaurant({Key? key, required this.restaurant}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: InkWell(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return RestaurantDetailPage(idrestaurant: restaurant.id);
              }));
            },
            child: Stack( //---------------
              children: <Widget>[
                Container(
                  margin:
                      const EdgeInsets.only(left: 40, top: 5, right: 20, bottom: 5),
                  height: 170.0,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Colors.lime.shade100,
                    borderRadius: BorderRadius.circular(20.0),
                  ),
                  child: Padding(//---------
                    padding: const EdgeInsets.only(
                        left: 200, top: 20, right: 20, bottom: 20),
                    child: Expanded(//--------- you can't use expanded inside Stack 
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(
                            width: 120.0,
                            child: Expanded(child: Text(restaurant.name)),
                          ),
                          _sizebox(10),
    

    and my detailrestaurant.dart code

    class RestaurantDetail extends StatelessWidget {
      static const routeName = '/restaurant_detail';
      final Restaurant restaurant;
      const RestaurantDetail({Key? key, required this.restaurant})
          : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Hero(
                    tag: restaurant.pictureId,
                    child: Image.network(
                      "https://restaurant-api.dicoding.dev/images/medium/" +
                          restaurant.pictureId,
                    ),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(restaurant.name),
                                _sizebox(10),
                                Row(
                                  children: [
                                    _icon(Icons.location_city, 20, Colors.grey),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(restaurant.city),
                                        Text(restaurant.address),
                                      ],
                                    )
                                  ],
                                ),
                              ],
                            ),
                            Row(
                              children: [
                                _icon(Icons.star_rate, 20, Colors.yellow),
                                Text(
                                  ' ${restaurant.rating}',
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                      _barrierContent(),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            padding:
                                const EdgeInsets.only(top: 10, right: 20, left: 20),
                            child: Text('Description'),
                          ),
                          Container(
                              padding: const EdgeInsets.only(
                                  top: 10, right: 20, left: 20, bottom: 20),
                              width: double.infinity,
                              child: Text(restaurant.description)),
                        ],
                      ),
                      _barrierContent(),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            vertical: 10, horizontal: 20),
                        child: Column(
                          children: [
                            Text('Category'),
                            ListBody(
                              children: restaurant.categories.map((food) {
                                return Text(
                                  '- ${food.name}',
                                );
                              }).toList(),
                            ),
                          ],
                        ),
                      ),
                      _barrierContent(),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            vertical: 10, horizontal: 20),
                        child: Column(
                          children: [
                            Text('Menu Food'),
                            ListBody(
                              children: restaurant.menus.foods.map((categori) {
                                return Text(
                                  '- ${categori.name}',
                                );
                              }).toList(),
                            ),
                          ],
                        ),
                      ),
                      _barrierContent(),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            vertical: 10, horizontal: 20),
                        child: Column(
                          children: [
                            Text('Menu Drink'),
                            ListBody(
                              children: restaurant.menus.drinks.map((drink) {
                                return Text('- ${drink.name}');
                              }).toList(),
                            ),
                          ],
                        ),
                      ),
                      _barrierContent(),
                      Padding(
                        padding: const EdgeInsets.symmetric(
                            vertical: 10, horizontal: 10),
                        child: Column(
                          children: [
                            Text('Comment'), 
                            ListBody(//--- this is top most child
                              children: restaurant.customerReviews.map((review) {
                                return Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Expanded(//--------- This causing problem here, you can only use Exapnded to column top most child
                                    child: Row(children: [
                                      Container(
                                        width: 40,
                                        decoration: const BoxDecoration(
                                            shape: BoxShape.circle,
                                            color: Colors.blue),
                                        child: Center(
                                            child: Text(
                                          review.name.characters.elementAt(0),
                                          style: const TextStyle(
                                              color: Colors.white, fontSize: 20),
                                        )),
                                      ),
                                      const SizedBox(
                                        width: 15,
                                      ),
                                      Expanded(//---- This one also causing Problem
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Row(
                                              children: [
                                                Text(
                                                  review.name,
                                                  style: const TextStyle(
                                                      fontSize: 16,
                                                      fontWeight: FontWeight.bold),
                                                ),
                                                Text(
                                                  ' ${review.date}',
                                                  style: TextStyle(
                                                      fontSize: 14,
                                                      color: Colors.grey.shade500),
                                                )
                                              ],
                                            ),
                                            SizedBox(
                                              width: 270,
                                              child: Text(
                                                review.review,
                                                maxLines: 2,
                                                overflow: TextOverflow.ellipsis,
                                              ),
                                            )
                                          ],
                                        ),
                                      )
                                    ]),
                                  ),
                                );
                              }).toList(),
                            ),
                          ],
                        ),
                      ),
                      _barrierContent()
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
    

    Keep this point in mind to avoid basic error

    1. Most common one Expanded can only use to a descendant of Column,Row & Flex
    2. Don’t use Positioned under Row or Column instead use Align
    3. Under ListView don’t use Spacer instead use SizedBox

    Hope this might help you to solve your Error

    Happy Learning!!!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search