How do I dynamically adjust the height of my `CarouselSlider` so that it doesn't overflow when the `ExpansionTile` is expanded?

34 Views Asked by At

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.

0

There are 0 best solutions below