flutteruser-interfacewidgetexpansion-tile

Flutter reduce space between widgets


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

Solution

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