Unwanted Space Between Multiple Children of Column in Flutter

Question

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

Answer 1

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

Answer 2

The space in between appearing in your output is the padding/margin for TextButton widget.

I am not sure why you are using TextButton,however to make a Container tappable you could user either GestureDetector or InkWell as below:

Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: GestureDetector(
                onTap: () {
                   playsound(1);
                },
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {
                   playsound(2);
                },
                child: Container(
                  color: Colors.orange,
                ),
              ),
            ),
            Expanded(
              child: GestureDetector(
                onTap: () {
                   playsound(3);
                },
                child: Container(
                  height: 50,
                  color: Colors.yellow,
                ),
              ),
            )
          ],
        ),
      ),
    );

Output: