RanderBox was not laid out

[chi-yuer]

I have already wrapped chart with container, but still some abnormalities have occurred

Exception:

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building LineChart(duration: 150ms, dirty, dependencies: [MediaQuery], state: LineChartState#9b069(ticker active)):
'package:flutter/src/rendering/box.dart': Failed assertion: line 1692 pos 18: 'debugDoingThisResize || debugDoingThisLayout ||
                 (RenderObject.debugActiveLayout == parent && _size._canBeUsedByParent)': is not true.

════════ Exception caught by widgets library ═══════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#d69fc NEEDS-LAYOUT NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'

[imaNNeo]

May I ask you to share your code to reproduce it?
Thanks!

[imaNNeo]

Hello?

[chi-yuer]

This is my code

class EpeOverviewEvalution extends StatefulWidget {
  @override
  EpeOverviewEvalution({
    Key key,
    int flex: 1,
    String rank: "",
  })
    : this._itemFlex = flex,
      this._rank = rank,
      super(key: key);

  // 单行元素个数
  final int _itemFlex;
  // 当前等级
  final String _rank;
  // 评价指标数据
  final List _evalutionDataSet = [
    {
      "name": "Example1",
      "value": 10,
      "historyValue": [1, 2, 3, 4, 5, 6, 7, 8, 9,],
      "unit": "",
    },
    {
      "name": "Example2",
      "value": 10,
      "historyValue": [1, 2, 7, 8, 3, 4, 5, 8, 9,],
      "unit": "",
    },
    {
      "name": "Example3",
      "value": 10,
      "historyValue": [6, 5, 2, 4, 5, 6, 7, 8, 9,],
      "unit": "",
    },
  ];

  @override
  EpeOverviewEvalutionState createState() => EpeOverviewEvalutionState();
}

class EpeOverviewEvalutionState extends State<EpeOverviewEvalution> {
  // 单个元素的宽度
  double _itemWidth = double.infinity;
  // 元素间距
  final double _itemSpacing = 8.0;

  @override
  void initState() {
    // item 的宽度 = 设备宽度 / 2 - 外边距 - item间距 / 2
    this._itemWidth = (window.physicalSize.width / window.devicePixelRatio.abs() - 10 * 2 - _itemSpacing * (widget._itemFlex - 1)) / widget._itemFlex;
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.only(
        top: 12.0,
        left: 10.0,
        right: 10.0,
      ),
      child: Ink(
        padding: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10.0),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Color(0x30000000),
              blurRadius: 8.0,
            ),
          ],
        ),
        child: Container(
          width: double.infinity,
          child: Wrap(
            spacing: _itemSpacing,
            runSpacing: _itemSpacing,
            children: List.generate(widget._evalutionDataSet.length, (int index) {
              Map _evalution = widget._evalutionDataSet[index];
              List<double> _history = [0];
              _evalution["historyValue"].forEach((dynamic value) {
                if (value is double) {
                  _history.add(value);
                }
              });
              double _maxValue = _history.reduce(max);
              if (_maxValue != 0)
                for (int i = 0; i < _history.length; i++) {
                  _history[i] = _history[i] / _maxValue * 100;
                }
              return OverviewEvalutionItem(
                width: _itemWidth,
                title: CommonUtil.getString(_evalution["name"]),
                value: CommonUtil.getString(_evalution["value"]),
                history: _history,
                unit: CommonUtil.getString(_evalution["unit"]),
              );
            }),
          ),
        ),
      ),
    );
  }
}

// 指标的 item
class OverviewEvalutionItem extends StatelessWidget {
  @override
  OverviewEvalutionItem({
    Key key,
    String title: "",
    String value: "",
    String unit: "",
    double width: double.infinity,
    List<double> history,
  })
    : this._itemWidth = width,
      this._itemTitle = title,
      this._itemValue = value,
      this._itemUnit = unit,
      this._itemHistory = history,
      super(key: key);

  // 宽度
  final double _itemWidth;
  // 标题
  final String _itemTitle;
  // 值
  final String _itemValue;
  // 单位
  final String _itemUnit;
  // 历史数据
  final List<double> _itemHistory;
  // 边距
  final EdgeInsets _itemPadding = EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0);
  // 值的文字样式
  final TextStyle _itemValueStyle = TextStyle(
    color: Color(0xff333333),
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
  );
  // 单位的文字样式
  final TextStyle _itemUnitStyle = TextStyle(
    color: Color(0xff333333),
    fontSize: 12.0,
    fontWeight: FontWeight.bold,
  );
  // 标题的文字样式
  final TextStyle _itemTitleStyle = TextStyle(
    color: Color(0xff9c9c9c),
    fontSize: 14.0,
  );
  // 图表尺寸
  final double _itemIndicatorSize = 40.0;
  // Icon 尺寸
  final double _itemIconSize = 24.0;
  // 增幅文字样式
  final TextStyle _itemIndicatorStyle = TextStyle(
    color: Color(0xff9c9c9c),
    fontSize: 14.0,
  );

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _itemWidth,
      padding: EdgeInsets.symmetric(vertical: 5.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(2.0),
        child: Container(
          width: double.infinity,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              // 评价指标值
              Container(
                padding: _itemPadding,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    // 值
                    Container(
                      child: Text.rich(
                        TextSpan(
                          children: <TextSpan>[
                            TextSpan(
                              text: _itemValue,
                              style: _itemValueStyle,
                            ),
                            TextSpan(
                              text: " " + _itemUnit,
                              style: _itemUnitStyle,
                            ),
                          ],
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.clip,
                      ),
                    ),
                    // 标题
                    Container(
                      margin: EdgeInsets.only(top: 2.0),
                      child: Text(_itemTitle,
                        style: _itemTitleStyle,
                        textAlign: TextAlign.center,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
              ),
              // 历史数据
              Container(
                width: 120.0,
                height: 50.0,
                child: LineChart(
                  LineChartData(
                    titlesData: FlTitlesData(
                      show: false,
                    ),
                    gridData: FlGridData(
                      drawVerticalGrid: true,
                      verticalInterval: _itemHistory.length / 30,
                      drawHorizontalGrid: true,
                      horizontalInterval: 10,
                      getDrawingHorizontalGridLine: (double) {
                        return FlLine(
                          color: Color(0x20c4c4c4),
                          strokeWidth: 1,
                        );
                      },
                      getDrawingVerticalGridLine : (double) {
                        return FlLine(
                          color: Color(0x20c4c4c4),
                          strokeWidth: 1,
                        );
                      }
                    ),
                    borderData: FlBorderData(
                      show: false
                    ),
                    minY: 0,
                    maxY: 100,
                    lineBarsData: <LineChartBarData>[
                      LineChartBarData(
                        spots: List.generate(_itemHistory.length, (int index) {
                          return FlSpot(index.toDouble(), _itemHistory[index]);
                        }),
                        isCurved: true,
                        preventCurveOverShooting: true,
                        colors: const [Colors.transparent],
                        barWidth: 2.0,
                        isStrokeCapRound: true,
                        dotData: FlDotData(
                          dotColor: Colors.transparent,
                        ),
                        belowBarData: BarAreaData(
                          show: true,
                          colors: const [Color(0xff3c8ce7), Color(0xff00eaff)],
                          gradientColorStops: const [0, 1],
                          gradientFrom: Offset(0, 0),
                          gradientTo: Offset(1, 1),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[imaNNeo]

Thanks, and in which version of the fl_chart you ran it?

[chi-yuer]

Flutter： 1.9.1+hotfix.6 fl_chart： 0.4.2

[imaNNeo]

Can you please test it with the latest version of the fl_chart?

[chi-yuer]

It seems to be fixed when I upgrade to 0.5.0. Thanks for your help.

[imaNNeo]

Great to hear that.
Feel free to close it if everything is fine.
Thanks!