I am working on a mobile app in flutter. For a particular section. I am trying to create a CarouselSlider of ExpansionTiles. When I press expand on the tile, the CarouselSlider has a fixed height, so it causes a render overflow error.
View the behavior from the simulator
Here is the code associated:
Widget _buildConnectedUsersSection(List<UserWithAssets> connectedUsers) => Stack(
children: [
CarouselSlider(
options: CarouselOptions(
aspectRatio: 34 / 9,
viewportFraction: 1,
initialPage: 0,
enableInfiniteScroll: false,
reverse: false,
autoPlay: false,
enlargeCenterPage: true,
enlargeFactor: 0.2,
scrollDirection: Axis.horizontal,
),
items: connectedUsers.map((user) {
String firstName = user.info['name']['first'] as String;
String lastName = user.info['name']['last'] as String;
String companyName = user.info['name']['company'] as String;
Map<String, String> userName = {'first': firstName, 'last': lastName, 'company': companyName};
double totalUserAssets = 0.00, latestIncome = 0.00;
for (var asset in user.assets) {
switch (asset['fund']) {
case 'AGQ Consulting LLC':
break;
case 'AK1 Holdings LP':
break;
default:
latestIncome = asset['ytd'];
totalUserAssets += asset['total'];
}
}
return Builder(
builder: (BuildContext context) => _buildConnectedUserBreakdownSection(
userName,
totalUserAssets,
latestIncome,
user.assets,
),
);
}).toList(),
),
],
);
Widget _buildConnectedUserBreakdownSection(Map<String, String> userName, double totalUserAssets, double latestIncome, List<Map<String, dynamic>> assets) {
// Initialize empty lists for the tiles
List<ListTile> assetTilesAGQ = [];
List<ListTile> assetTilesAK1 = [];
for (var asset in assets) {
switch (asset['fund']) {
case 'AGQ Consulting LLC':
try {
asset.entries.where((entry) {
if (entry.key == 'company') {
return true;
}
return false;
}).forEach((entry) {
assetTilesAGQ.add(_buildAssetTile(entry.key, (entry.value).toDouble(), 'agq', companyName: userName['company']));
});
// for each entry in the document that is not total, latestIncome, or fund
// create a ListTile and add it to the list
for (var entry in asset.entries) { if (entry.value is num && entry.key != 'total' && entry.key != 'company') {
assetTilesAGQ.add(_buildAssetTile(entry.key, entry.value.toDouble(), 'agq'));
}}
} on TypeError catch (e) {
log('Error building asset tile for AGQ Consulting LLC for user ${userName['first']} + ${userName['last']}: $e');
}
break;
case 'AK1 Holdings LP':
try {
asset.entries.where((entry) {
if (entry.key == 'company') {
return true;
}
return false;
}).forEach((entry) {
assetTilesAK1.add(_buildAssetTile(entry.key, (entry.value).toDouble(), 'ak1', companyName: userName['company']));
});
// for each entry in the document that is not total, latestIncome, or fund
// create a ListTile and add it to the list
for (var entry in asset.entries) { if (entry.value is num && entry.key != 'total' && entry.key != 'company') {
assetTilesAK1.add(_buildAssetTile(entry.key, entry.value.toDouble(), 'ak1'));
}}
} on TypeError catch (e) {
log('Error building asset tile for AGQ Consulting LLC for user ${userName['first']} + ${userName['last']}: $e');
}
break;
}
}
log('Asset Tiles for AGQ Consulting LLC for ${userName['first']} ${userName['last']}: ${assetTilesAGQ.length}');
log('Asset Tiles for AK1 Holdings LP for ${userName['first']} ${userName['last']}: ${assetTilesAK1.length}');
return Theme(
data: ThemeData(
splashColor: Colors.transparent, // removes splash effect
),
child: ExpansionTile(
title: Row(
children: [
Text(
'${userName['first']} ${userName['last']}',
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Titillium Web',
),
),
SizedBox(width: 10),
Image.asset(
'assets/icons/green_arrow_up.png',
height: 20,
),
SizedBox(width: 5),
Text(
_currencyFormat(latestIncome),
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white,
fontFamily: 'Titillium Web',
),
),
],
),
subtitle: Text(
_currencyFormat(totalUserAssets),
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.normal,
color: Colors.white,
fontFamily: 'Titillium Web',
),
),
maintainState: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(color: Colors.white), // Add this line
),
collapsedShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(color: Colors.white), // And this line
),
collapsedBackgroundColor: Colors.transparent,
backgroundColor: Colors.transparent,
iconColor: Colors.white,
collapsedIconColor: Colors.white,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 25.0, right: 25.0, bottom: 10.0, top: 10.0),
child: Divider(color: Colors.grey[300]),
), // Add a light divider bar
Column(
children: assetTilesAK1,
),
Column(
children: assetTilesAGQ,
),
],
),
);
}
Here's the error:
The relevant error-causing widget was:
ExpansionTile ExpansionTile:file:///Users/zaminshaikh7/team_shaikh_app/lib/screens/dashboard/dashboard.dart:683:14
: To inspect this widget in Flutter DevTools, visit: http://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A64598%2FlkQI0H1skXk%3D%2F&inspectorRef=inspector-0
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#85f66 relayoutBoundary=up5 OVERFLOWING
parentData: offset=Offset(1.0, 1.0) (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, h=93.5)
size: Size(358.7, 93.5)
direction: vertical
mainAxisAlignment: start
mainAxisSize: min
crossAxisAlignment: center
verticalDirection: down
child 1: RenderSemanticsAnnotations#367e8 relayoutBoundary=up6
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, 0.0<=h<=Infinity)
size: Size(358.7, 72.0)
child: RenderSemanticsAnnotations#32edb relayoutBoundary=up7
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, 0.0<=h<=Infinity)
size: Size(358.7, 72.0)
child: RenderMouseRegion#a51ad relayoutBoundary=up8
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, 0.0<=h<=Infinity)
size: Size(358.7, 72.0)
behavior: opaque
listeners: enter, exit
cursor: SystemMouseCursor(click)
child: RenderSemanticsAnnotations#f4e9c relayoutBoundary=up9
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, 0.0<=h<=Infinity)
size: Size(358.7, 72.0)
child 2: RenderClipRect#62a4f relayoutBoundary=up6
parentData: offset=Offset(0.0, 72.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, 0.0<=h<=Infinity)
size: Size(358.7, 98.7)
child: RenderPositionedBox#531d4 relayoutBoundary=up7
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, 0.0<=h<=Infinity)
size: Size(358.7, 98.7)
alignment: Alignment.center
textDirection: ltr
widthFactor: expand
heightFactor: 0.2
child: RenderOffstage#78c15 relayoutBoundary=up8
parentData: offset=Offset(0.0, -164.6) (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, 0.0<=h<=Infinity)
size: Size(358.7, 428.0)
offstage: false
child: RenderPadding#5f203 relayoutBoundary=up9
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=358.7, 0.0<=h<=Infinity)
size: Size(358.7, 428.0)
padding: EdgeInsets.zero
textDirection: ltr
════════════════════════════════════════════════════════════════════════════════
I tried wrapping the CarouselSlider in a IntrinsicHeight, ListView, and ValueListenableBuilder Widget.