【问题标题】:Exception caught by widgets library: Incorrect use of ParentDataWidget小部件库捕获的异常:ParentDataWidget 的使用不正确
【发布时间】:2022-11-30 20:58:16
【问题描述】:

当我运行 flutter 程序时,2 个不同的文件中出现了相同的 2 个错误,有人知道如何解决这个问题吗?这是我的代码

列表 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,
  );
}

和我的 detailrestaurant.dart 代码

`

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

`

``

错误 当我运行我的 flutter 程序时,2 个不同的文件中出现了相同的 2 个错误,有人知道如何解决这个问题吗?

【问题讨论】:

    标签: flutter


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

    Expanded 的父级必须是 Stack, Column, Row 但在您的示例中这是错误的

    【讨论】:

      【解决方案2】:

      你应该使用展开只在一个列、行或弹性那对它只有最顶层的孩子

      在这里,您在堆栈内部的填充小部件中使用了 Expanded 小部件,而且您不能在堆栈内部使用 Expanded,所以它导致了这个ParentDataWidget错误

      列表 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),
      

      和我的 detailrestaurant.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(//--- 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()
                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        }
      }
      

      可能有一些东西可以得到这个ParentDataWidget问题

      1. 最常见的一种展开只能用于Column、Row 和 Flex 的后代
      2. 不要使用定位的在下面行或列而是使用对齐
      3. 列表显示不要使用垫片而是使用 SizedBox

        希望这可以帮助您解决错误

        快乐学习!!!

      【讨论】:

        猜你喜欢
        • 2021-09-27
        • 2019-06-13
        • 2020-08-18
        • 1970-01-01
        • 2023-03-29
        • 2022-06-12
        • 1970-01-01
        • 2021-11-07
        相关资源
        最近更新 更多