flutter video width not being filled with bottom navigation bar both Android and iOS

Question

I'm playing video.
And without bottom navigation bar, view looks perfect.
Width is the same as device's width.
But with bottom navigation bar, width becomes little bit smaller.
So, video's width doesn't fill device's width and there will be white space both sides.
I have no idea what's the problem. Like these image

Code

     // bottom navigation
              return WillPopScope(
              onWillPop: () async {
                await Future<bool>.value(true);
              },
              child: CupertinoTabScaffold(
              tabBar: CupertinoTabBar(
              iconSize: 36.0,
              activeColor: Colors.black,
              inactiveColor: Colors.grey,
              backgroundColor: Colors.white,
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Container(),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.whatshot),
                  title: Container(),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  title: Container(),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.subscriptions),
                  title: Container(),
                ),
              ],
            ),
            tabBuilder: (BuildContext context, int index) {
              return CupertinoTabView(
                builder: (_) {
                    return _pages[index];
                },
              );
            },
          ),
        );

 // video page
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Center(
              child: AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Icon(Icons.history, color: Colors.white)
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Icon(Icons.tag_faces, color: Colors.white),
                  Icon(Icons.lightbulb_outline, color: Colors.white)
                ],
              ),
            )
          ],
        )
      )
    );

Does anyone know what's the problem?

Answer 1

The bottom navigation bar is not in the stack so it shrinks the space allocated for the stack. The video is has a set aspect ratio so when the vertical space is reduced the width is decreased as well. Try wrapping the video player in a FittedBox.

FittedBox(fit: BoxFit.fitWidth, child: VideoPlayer(_controller));