skip to Main Content

I have this expansion tile which takes too much padding which results in a lot of wasted space, how can I get down the top and bottom padding of this expansion tile?

  Widget additiveCard(
  BuildContext context, List<FoodAdditive> additives, Product product, bool good) {
  String subtitleText = good ? "השפעה נמוכה" : "השפעה גבוהה";

  return Theme(
    data: Theme.of(context).copyWith(
      dividerColor: Colors.transparent,
    ),
    child: ExpansionTile(
      tilePadding: EdgeInsets.symmetric(horizontal: 16),
      onExpansionChanged: (bool expanding) {
        setState(() => isExpanded = expanding);
        isExpanded ? _controller.forward() : _controller.reverse();
      },
      title: Row(
        children: [
          Expanded(
            child: ListTile(
              contentPadding: EdgeInsets.zero,
              title: Text(
                getTitle("תוספים"),
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              leading: Icon(Icons.science),
              subtitle: Text(subtitleText),
            ),
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              buildRatingCircle(16, good ? Colors.green : Colors.red),

            ],
          ),
        ],
      ),
      children: [
        Padding(
            padding: const EdgeInsets.all(8.0),
            child: Align(
              alignment: Alignment.centerRight,
              child: Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: product
                      .countAdditivesByRating(additives)
                      .entries
                      .where((entry) => entry.value > 0)
                      .map((entry) {
                    int rating = entry.key;
                    int ratingCount = entry.value;
                    return buildAdditiveCircle(16, ratingCount, rating);
                  })
                      .toList()
                      .reversed
                      .toList(),
                ),
              ),
            ),
          ),
      ],
    ),
  );
}

I just want to adjust the height of it when it’s collapsed not when it’s open.

I tried wrapping it with a container of a fixed height but that’s just taking all the space it needs in advance and implies it to the whole expansiontile and not just the first row with the details.

2

Answers


  1. Set the height of ExapnsionTile for example:- height 200 with Container.

                 Padding(
                    paading:EdgeEnsets.all(10)
                    child: Container(
                      height: 200, // Set the desired height
                      child: ExpansionTile())
                  ),
    
    Login or Signup to reply.
  2. Add this block

    listTileTheme: ListTileTheme.of(context).copyWith(
    //               dense: true,
                  minVerticalPadding: isExpanded ? null : 20,
                ),
    

    in the wrapping Theme class

    Adding that allows you to control the theme of ListTile which is basically what Expansion ListTile is made of.

    So you would have

      Widget additiveCard(
      BuildContext context, List<FoodAdditive> additives, Product product, bool good) {
      String subtitleText = good ? "השפעה נמוכה" : "השפעה גבוהה";
    
      return Theme(
        data: Theme.of(context).copyWith(
          dividerColor: Colors.transparent,
          listTileTheme: ListTileTheme.of(context).copyWith(
    //               dense: true,
                  minVerticalPadding: isExpanded ? null : 20,
           ),
        ),
        child: ExpansionTile(
          tilePadding: EdgeInsets.symmetric(horizontal: 16),
          onExpansionChanged: (bool expanding) {
            setState(() => isExpanded = expanding);
            isExpanded ? _controller.forward() : _controller.reverse();
          },
          title: Row(
            children: [
              Expanded(
                child: ListTile(
                  contentPadding: EdgeInsets.zero,
                  title: Text(
                    getTitle("תוספים"),
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  leading: Icon(Icons.science),
                  subtitle: Text(subtitleText),
                ),
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  buildRatingCircle(16, good ? Colors.green : Colors.red),
    
                ],
              ),
            ],
          ),
          children: [
            Padding(
                padding: const EdgeInsets.all(8.0),
                child: Align(
                  alignment: Alignment.centerRight,
                  child: Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: product
                          .countAdditivesByRating(additives)
                          .entries
                          .where((entry) => entry.value > 0)
                          .map((entry) {
                        int rating = entry.key;
                        int ratingCount = entry.value;
                        return buildAdditiveCircle(16, ratingCount, rating);
                      })
                          .toList()
                          .reversed
                          .toList(),
                    ),
                  ),
                ),
              ),
          ],
        ),
      );
    }
    

    It gives a flicker behaviour when switching between collapsed and expanded view, but I think you can modify the minVerticalPadding’s value to get the best possible outcome.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search