What is this white spaces in stack and how to fix it

Question

Can someone explain why is there white spaces on top and bottom of this stack widget despite of no padding here? I have a stack of progress bar and music details. Although I didn't add any padding but why is there the whitespaces in my widget? Is there anyway to fix this. My code: mini_player.dart

import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:webtoon/miniplayer/widgets/progress_bar.dart';

import '../riverpod/song_provider.dart';
import 'widgets/control_button.dart';

class MiniPlayer extends ConsumerWidget {
  const MiniPlayer({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final audioPlayer = ref.watch(audioHandlerProvider);

    return GestureDetector(
      child: Align(
        alignment: const AlignmentDirectional(0, 1),
        child: Container(
          color: Theme.of(context).scaffoldBackgroundColor,
          height: 80,
          child: Stack(
            children: [
              Align(
                alignment: Alignment.bottomLeft,
                child: Row(
                  children: <Widget>[
                    Image.asset('assets/artwork.jpg',
                        width: 60, height: 60, fit: BoxFit.cover),
                    Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        children: <Widget>[
                          Text(
                            'The Weeknd',
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Theme.of(context).primaryColor,
                                fontSize: 18),
                          ),
                          Text(
                            'Blinding Lights',
                            style: TextStyle(
                                fontWeight: FontWeight.normal,
                                color: Theme.of(context).secondaryHeaderColor,
                                fontSize: 13),
                          ),
                        ],
                      ),
                    ),
                    const Spacer(),
                    Control(
                      audioPlayer: audioPlayer,
                      size: 20.0,
                    )
                  ],
                ),
              ),
              StreamBuilder<PositionData>(
                  stream: PositionData.positionDataStream(audioPlayer),
                  builder: (context, snapshot) {
                    final positionData = snapshot.data;

                    return ProgressBar(
                      barHeight: 5,
                      baseBarColor: Colors.black,
                      bufferedBarColor: Theme.of(context).secondaryHeaderColor,
                      progressBarColor: Theme.of(context).primaryColor,
                      thumbColor: Theme.of(context).primaryColor,
                      timeLabelTextStyle: TextStyle(
                        color: Theme.of(context).primaryColor,
                        fontSize: 0,
                      ),
                      progress: positionData?.position ?? Duration.zero,
                      buffered: positionData?.bufferedPosition ?? Duration.zero,
                      total: positionData?.duration ?? Duration.zero,
                      onSeek: audioPlayer.seek,
                    );
                  }),
            ],
          ),
        ),
      ),
      onTap: () => Navigator.of(context).pushNamed('/play'),
    );
  }
}

I have thought about changing the Container height from 80 to 60 to match the image height, the whitespaces did got away but instead i got overflow like this How to fix this T_T, thanks very much.

Answer 1

Here are some tips on how to use the Widget Inspector to debug layout issues in Flutter:

Step 1:
Run your app directly in your IDE by clicking the "Run" button.

Step 2:
On the Run toolbar that appears, click the "Widget Inspector" icon.

Step 3:
Click the "Toggle select widget mode" on the top right of the inspector window.

Step 4:
Tap on the widget you want to inspect on your emulator or device.

Step 5:
The widget inspector will jump to the source code. Review the code and widget tree too look for any extra padding or margins.

Extra Tip 1:
You can also turn on the "Overlay guidelines" feature in the widget inspector window:

Extra Tip 2:
This will show an "X-Ray" view of your layout on your emulator.