Home > Software design >  Flutter reduce space between widgets
Flutter reduce space between widgets

Time:06-03

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'),
            ),
          ],
        ));
  }
}

CodePudding user response:

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.

CodePudding user response:

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'),
       ...
    ],
),```

CodePudding user response:

Won't removing Expanded suit your goals?

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