flutterdartspacing

Unwanted Space Between Multiple Children of Column in Flutter


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


Solution

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