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