Flutter reduce space between widgets

168 Views Asked by At

I try to display a ExpansionTile with some text in it followed by an Image. Referring to the screenshot you can see that there is some space between both widgets. Does someone know how I can reduce this space?

Screenshot

class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: backGround,
        appBar: AppBar(
          title: const Text('Aromatics'),
          backgroundColor: appbarColor,
        ),
        body: Column(
          children: [
            ExpansionTile(
                iconColor: titleColor,
                title: const Text('Tst', style: TextStyle(color: titleColor)),
                subtitle: const Text('Test subtitle',
                    style: TextStyle(color: Colors.white)),
                children: [
                  Container(
                    margin: const EdgeInsets.only(left: 20),
                    child: Column(
                      children: const [
                        Text('Test text',
                            style:
                                TextStyle(color: Colors.white, fontSize: 13)),
                      ],
                    ),
                  ),
                ]),
            const SizedBox(
              height: 1,
            ),
            Expanded(
              child: Image.asset('assets/images/test.webp'),
            ),
          ],
        ));
  }
}
3

There are 3 best solutions below

0
On BEST ANSWER

Just remove the Expanded widget around the image because it is taking all the remaning space in the Column for the image.

Current Code:

Column(
    children: [
       ...
       Expanded(
           child: Image.asset('assets/images/test.webp'),
       ),
       ...
    ],
),

New Code:

Column(
    children: [
       ...
       Image.asset('assets/images/test.webp'),
       ...
    ],
),```
1
On

As per the ExpansionTile Doc, you can use childrenPadding to manage the padding for the children widget

Specifies padding for children. If this property is null then ExpansionTileThemeData.childrenPadding is used. If that is also null then the value of childrenPadding is EdgeInsets.zero.

0
On

Won't removing Expanded suit your goals?

...
const SizedBox(
  height: 1,
),
Image.asset('assets/images/test.webp'),
...