how to make a stack widget take full screen on ios in flutter

Question

I am trying to make an audio player app, and I want to make the player screen fit the whole screen size.

However, the padding at the top and at the bottom doesn't help.

I tried to remove the SafeArea from bottomNavigationBar and other widgets and it didn't work.

How can I handle this?

Image of the player:

(the gray color padding doesn't let the image stretch to the end)

the code of the player:

Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: const Color(0xff1c1c1e),
      body: GetBuilder<OverlayHandler>(
        builder: (getContext) {
          if (!Get.find<OverlayHandler>().inPipMode) {
              return Stack(
                children:[
                  Container(...)
                ]
              ); // player at full screen
          } else {
              return Stack(...); // player at PiP mode 
          }
        }
      )
    );
}
       

the code of the main screen widget:

Widget build(BuildContext context) {
    return GetBuilder<NavigationController>(
        builder: (controller) {
          return Scaffold(
            body: SafeArea(
            // bottom option of this SafeArea doesn't affect the player size
              child: IndexedStack(
                index: controller.tabIndex,
                children: const [
                   ...
                ],
              ),
            ),
            bottomNavigationBar: SafeArea( 
            // bottom option of this SafeArea doesn't affect the player size
              child: SizedBox(
                height: 80,
                child: BottomNavigationBar(
                  items: [
                    ...
                  ],
                ),
              ),
            ),
          );
        }

    );
  }
}

Answer 1

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

TextEditingController controller = TextEditingController();
bool hasHash = false;

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: double.infinity,
            decoration: const BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                  "https://cdn.pixabay.com/photo/2016/09/10/11/11/musician-1658887_1280.jpg",
                ),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              height: 300,
              width: double.infinity,
              color: Colors.black.withOpacity(.7),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: const [
                  Icon(
                    Icons.skip_previous_rounded,
                    size: 55,
                    color: Colors.white,
                  ),
                  Icon(
                    Icons.play_circle_fill_rounded,
                    size: 110,
                    color: Colors.white,
                  ),
                  Icon(
                    Icons.skip_next_rounded,
                    size: 55,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Android screenshot

iOS screenshot

Answer 2

Try removing the Scaffold()'s background color and add extendBody: true, or set the height of the container to height: double.infinity, or inside the stack just add and empty container with height as height: double.infinity,