I am having a problem removing space between the expanded widgets which are inside a column this is my code for up to 4 expanded widgets there are 3 more i have tried many things it still doesn't work.
class XylophoneApp extends StatelessWidget {
const XylophoneApp({super.key});
void playsound(int num) {
final player = AudioPlayer();
player.play(AssetSource('note$num.wav'));
}
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: TextButton(
onPressed: () {
playsound(1);
},
child: Container(
color: Colors.red,
),
),
),
Expanded(
child: TextButton(
onPressed: () {
playsound(2);
},
child: Container(
color: Colors.orange,
),
),
),
Expanded(
child: TextButton(
onPressed: () {
playsound(3);
},
child: Container(
color: Colors.yellow,
),
),
],
),
),
));
}
}
I am gettingthis is my output
I want this is the output I want
The TextButton
reason for the margin of the between on your elements. You could use Inkwell
instead of TextButton
to remove the gap between the Column
widgets of your design. Thus you can get rid of problems in this way.
class XylophoneApp extends StatelessWidget {
const XylophoneApp({super.key});
void playsound(int num) {
final player = AudioPlayer();
player.play(AssetSource('note$num.wav'));
}
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Inkwell(
onTap: () {
playsound(1);
},
child: Container(
color: Colors.red,
),
),
),
Expanded(
child: Inkwell(
onTap: () {
playsound(2);
},
child: Container(
color: Colors.orange,
),
),
),
Expanded(
child: Inkwell(
onTap: () {
playsound(3);
},
child: Container(
color: Colors.yellow,
),
),
],
),
),
));
}
}