'RenderBox was not laid out' when using ExpansionPanelList - flutter

Question

I want to show a GridView on the left and a ExpansionPanelList on the right. I put them in a Row Widget but it did not work, error is :
Assertion failed:
D:\…\rendering\box.dart:1929
hasSize
"RenderBox was not laid out: RenderRepaintBoundary#bb5e9 NEEDS-LAYOUT NEEDS-PAINT"
The relevant error-causing widget was
Row
lib\main.dart:69
this is all my code in main.dart:
// ignore_for_file: prefer_const_constructors
// ignore_for_file: prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
void main() => runApp(MyApp(UniqueKey()));
class MyApp extends StatelessWidget {
const MyApp(Key key) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyHomePage(UniqueKey()),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage(Key key) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
List<int> getDataList() {
List<int> list = [];
for (int i = 0; i < 96; i++) {
list.add(i);
}
return list;
}
List<Widget> getWidgetList() {
return getDataList().map((item) => getItemContainer(item)).toList();
}
var i = 0;
Widget getItemContainer(int item) {
return Block(item);
}
//创建gridview
Widget buildGrid() {
return GridView.count(
//水平子Widget之间间距
crossAxisSpacing: 10.0,
//垂直子Widget之间间距
mainAxisSpacing: 30.0,
//GridView内边距
padding: EdgeInsets.all(10.0),
//一行的Widget数量
crossAxisCount: 4,
//子Widget宽高比例
childAspectRatio: 2.0,
//子Widget列表
children: getWidgetList(),
);
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("this is title"),
),
body: Container(
child: Row(
children: <Widget>[
Expanded(
child: buildGrid(),
),
ExpansionPanelPage(UniqueKey()),
],
)),
);
}
}
class Block extends StatelessWidget {
final int itemNo;
const Block(this.itemNo, {Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Listener(
onPointerHover: (event) => print(itemNo.toString()),
onPointerMove: (event) => print("aa" + itemNo.toString()),
child: Container(
alignment: Alignment.center,
child: Text(
"item",
style: TextStyle(color: Colors.white, fontSize: 20),
),
color: Colors.blue,
),
);
}
}
// stores ExpansionPanel state information
class Item {
Item({
required this.expandedValue,
required this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
List<Item> generateItems(int numberOfItems) {
return List.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Panel $index',
expandedValue: 'This is item number $index',
);
});
}
class ExpansionPanelPage extends StatefulWidget {
ExpansionPanelPage(Key key) : super(key: key);
#override
_ExpansionPanelPageState createState() => _ExpansionPanelPageState();
}
class _ExpansionPanelPageState extends State<ExpansionPanelPage> {
List<Item> _data = generateItems(1);
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
width: 10,
height: 10,
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanelRadio(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: Column(
children :<Widget>[
Text("1"),
Text("1"),
Text("1"),
Text("1"),
]
),
value: item.headerValue,
);
}).toList(),
);
}
}
..........................................................................
..........................................................................

Answer 1

I know it might be a bit late to answer your question but for those who are facing the same issue, try wrapping ExpansionPanelList with the SingleChildScrollView widget. It helps your panel list to take all available space and to shrink-wrap in both axes. Check the docs for more info!