May you please assist me, I am stuck, I want to remove the extra spacing beneath a row inside a column, I tried putting padding with a column but it does not work.

My code is below:

                Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Padding(
                        padding: EdgeInsets.only(top: 12),
                        child: Divider(
                          height: 1,
                        ),
                      ),
                      ExpansionPanelList(
                        animationDuration: const Duration(seconds: 1),
                        elevation: 0,
                        expandedHeaderPadding: EdgeInsets.zero,
                        children: [
                          ExpansionPanel(
                              headerBuilder: (context, isOpen) {
                                return Row(
                                  children: [
                                    SizedBox(
                                        width: 32.0,
                                        height: 32.0,
                                        child: OfficialProfilePicture(
                                          official: widget
                                              .matchInformationViewModel
                                              .footballMatchInformation!
                                              .getReferee,
                                          shape: ProfilePictureShape.CIRCLE,
                                        )),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    Expanded(
                                        child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          widget
                                              .matchInformationViewModel
                                              .footballMatchInformation!
                                              .getReferee
                                              .fullName,
                                          style: TextStyle(
                                              fontSize: 12,
                                              color: CustomTheme().neutral500),
                                        ),
                                        Text(
                                          widget
                                              .matchInformationViewModel
                                              .footballMatchInformation!
                                              .getReferee
                                              .type,
                                          style: TextStyle(
                                              fontSize: 12,
                                              color: CustomTheme().neutral400),
                                        )
                                      ],
                                    ))
                                  ],
                                );
                              },
                              body: FootballOfficialsHolder(
                                  officials: widget.matchInformationViewModel
                                      .footballMatchInformation!.officials!),
                              isExpanded: _isOpen,
                              canTapOnHeader: true)
                        ],
                        expansionCallback: (index, isOpen) {
                          setState(() {
                            _isOpen = !isOpen;
                          });
                        },
                      ),
                    ],
                  ),

Screenshot of how it looks like:

The container I am working on is the referee section one at the bottom. I want the top spacing to be equal with the bottom spacing, so there is some extra spacing at the bottom.

May you please assist, I have been stuck for some time now. Your help will be appreciated.

CodePudding user response：

As my suggestion, you applied padding on the bottom widget so kindly you have to remove the padding and your problem may solve

Column(children: [
            const Padding(
              padding: EdgeInsets.only(),
              child: Divider(
                height: 1,
              ),
            ),
            Container(
              color: Colors.black,
              child: ExpansionPanelList(
                animationDuration: const Duration(seconds: 1),
                elevation: 0,
                expandedHeaderPadding: EdgeInsets.zero,
                children: [
                  ExpansionPanel(
                      headerBuilder: (context, isOpen) {
                        return Row(
                          children: [
                            const SizedBox(
                                width: 32.0,
                                height: 32.0,
                                child: CircleAvatar()),
                            const SizedBox(
                              width: 10,
                            ),
                            Expanded(
                                child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: const [
                                Text(
                                  "Herre tiles",
                                  style: TextStyle(
                                    fontSize: 12,
                                  ),
                                ),
                                Text(
                                  "Good",
                                  style: TextStyle(
                                    fontSize: 12,
                                  ),
                                )
                              ],
                            ))
                          ],
                        );
                      },
                      body: Container(),
                      canTapOnHeader: true)
                ],
                expansionCallback: (index, isOpen) {
                  setState(() {});
                },
              ),
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Divider(
                  height: 0,
                ),
                Row(
                  children: const [
                    Expanded(
                        child: Text(
                      "herre",
                      style: TextStyle(fontSize: 12),
                    )),
                    // OptimizedImage(
                    //   widget
                    //       .matchInformationViewModel
                    //       .footballMatchInformation!
                    //       .getChannelDetails
                    //       .channel!
                    //       .liveIcon,
                    //   imageWidth: 24,
                    //   longLived: true,
                    // )
                  ],
                ),
              ],
            ),
            const SizedBox(
              height: 10,
            )
          ]),