Flutter程序报错：Incorrect use of ParentDataWidget 求修复方案

运行Flutter程序时，list_restaurant.dart和detail_restaurant.dart两个文件都触发了Incorrect use of ParentDataWidget错误，核心原因是**Expanded组件被错误嵌套在非弹性布局容器中**——Expanded只能作为Row、Column、Flex的直接子节点使用，不能放在Padding、SizedBox这类容器下面。

一、修复list_restaurant.dart #

错误点： #

1. Padding的子节点直接用了Expanded，但Padding不是弹性布局容器
2. SizedBox的子节点嵌套了Expanded，同样不符合规则

修复后的完整代码： #

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 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: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    width: 120.0,
                    child: Text(restaurant.name, overflow: TextOverflow.ellipsis),
                  ),
                  _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,
  );
}

关键修改说明： #

• 移除了Padding子节点的Expanded，直接用Column作为子节点（父容器Container已有固定高度，无需弹性扩展）
• 移除了SizedBox内的Expanded，直接放置Text，并添加overflow属性处理文本过长的情况
• 去掉了不必要的MaterialApp包裹（CardRestaurant作为子组件不需要单独的MaterialApp，会和全局的MaterialApp冲突）

二、修复detail_restaurant.dart #

错误点： #

在customerReviews的遍历中，Expanded被嵌套在Padding的子节点，而Padding不是弹性布局容器，导致报错。

修复后的完整代码： #

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 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: 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),
                                        )
                                      ],
                                    ),
                                    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,
  );
}

关键修改说明： #

• 移除了Padding子节点的Expanded，把Expanded移到Row内部作为右侧内容的容器（Row是弹性布局，符合Expanded的使用规则）
• 去掉了不必要的MaterialApp包裹（RestaurantDetail是页面组件，应该由全局的MaterialApp管理，不需要单独嵌套）
• 移除了评论中Text外面的固定宽度SizedBox，改用Expanded自动适配剩余空间

内容的提问来源于stack exchange，提问作者alu