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?

FuzzyNovaGoblin · Accepted Answer · 2018-12-10 00:59:44Z

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));

answered Dec 10, 2018 at 0:59

FuzzyNovaGoblin

761 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daibaku Over a year ago

Thank you for your comment! Is is gonna keep aspect ratio of the video?

FuzzyNovaGoblin Over a year ago

You can wrap the video in an aspect ratio and wrap that in a fitted box if you want to be safe.

Daibaku Over a year ago

Not working it says unbounded size was given. Any idea?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related