flutterwidgetthemes

Add separator color to null in ExpandableTile flutter


I want to remove grey separator when tile is expanded, Used theme divider color but the divider is taking outside color not the line between tile and expansion.

I used to two different ways to remove it but none is working

   return Theme(
                        data: Theme.of(context)
                            .copyWith(dividerColor: Colors.yellow,),
                        child: Column(
                          children: [
                            ExpansionTile(
                              shape: Border.all(color: Colors.yellow),
                             // shape: Border(),
                              backgroundColor: CoreColor.neutral0,
                              collapsedBackgroundColor: CoreColor.neutral0,
                              tilePadding: const EdgeInsets.only(
                                  left: 16, right: 16, bottom: 8),
                              title: Text(
                                faq.question!,
                                style: CoreTextStyle.mRegular
                                    .copyWith(color: CoreColor.neutral900),
                              ),
                              trailing: state.faq![index].isExpanded
                                  ? Assets.coreSvgs.downwardArrow.svg()
                                  : Assets.coreSvgs.forwardArrow.svg(),
                              onExpansionChanged: (value) {
                                setState(() {
                                  state.faq![index].isExpanded = value;
                                });
                              },
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(
                                      left: 16, right: 16, bottom: 8),
                                  child: Text(
                                    faq.answer!,
                                    style: CoreTextStyle.mRegular
                                        .copyWith(color: CoreColor.neutral600),
                                  ),
                                ),
                              ],
                            ),
                            const Divider(
                              color: CoreColor.dangerMain,
                              height: 0,
                            ),
                          ],
                        ),
                      );
                     
                      return ExpansionTile(
                        backgroundColor: CoreColor.neutral0,
                        collapsedBackgroundColor: CoreColor.neutral0,
                        tilePadding: const EdgeInsets.symmetric(
                          vertical: 8,
                          horizontal: 16,
                        ),
                        shape: Border.all(color: Colors.red),
                        onExpansionChanged: (value) {
                          setState(() {
                            state.faq![index].isExpanded = value;
                          });
                        },
                        trailing: state.faq![index].isExpanded
                            ? Assets.coreSvgs.downwardArrow.svg()
                            : Assets.coreSvgs.forwardArrow.svg(),
                        title: Text(
                          faq.question!,
                          style: CoreTextStyle.mRegular
                              .copyWith(color: CoreColor.neutral900),
                        ),
                        children: [
                          Padding(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 16,
                              vertical: 8,
                            ),
                            child: Text(
                              faq.answer!,
                              style: CoreTextStyle.mRegular
                                  .copyWith(color: CoreColor.neutral600),
                            ),
                          ),
                        ],
                      );

I want to remove grey divider between tile and expansion

enter image description here


Solution

  • Remove Some Dividers from your code like below:

    Theme(
          data: Theme.of(context).copyWith(
            dividerColor: Colors.transparent,
          ),
          child: Column(
            children: [
              ExpansionTile(
                tilePadding:
                    const EdgeInsets.only(left: 16, right: 16, bottom: 8),
                title: Text(
                  'faq.question!',
                ),
                onExpansionChanged: (value) {},
                children: [
                  Padding(
                    padding:
                        const EdgeInsets.only(left: 16, right: 16, bottom: 8),
                    child: Text(
                      ' faq.answer!',
                    ),
                  ),
                ],
              ),
              ExpansionTile(
                tilePadding: const EdgeInsets.symmetric(
                  vertical: 8,
                  horizontal: 16,
                ),
                onExpansionChanged: (value) {},
                title: Text(
                  ' faq.question!',
                ),
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16,
                      vertical: 8,
                    ),
                    child: Text(
                      'faq.answer!',
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
    

    Result- image