Flutter Question posted in
The official Flutter documentation can be found here.

unwanted space between multiple children of column in flutter

i am having problem in removing space between the expanded widgets which are inside a column this is my code for upto 4 expanded widgets there are 3 more i have tried many things it still does’nt 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

Tags:

2

Answers


  1. 0

    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:

    enter image description here

    Login or Signup to reply.
  2. 0

    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,
                ),
              ),
           
          ],
        ),
      ),
    ));
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search