Flutter reduce space between widgets

147 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 answers

0
Moaz El-sawaf 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
Sujan Gainju 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
Alex Verbitski On

Won't removing Expanded suit your goals?

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