How to place the player at top position

Question

I am trying to place the video player on the top of the screen but it is always placed in the center of the screen - even though I tried using a container too.

Below is my dart file, please check and let me know. For the player, I am using the chewie library for controllers and playing the network urls. Inside the chewie library, they are using video player plugin.

import 'package:chewie/chewie.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ottdemo_flutter/image_model.dart';
import 'package:video_player/video_player.dart';


class ChewieDemo extends StatefulWidget {

  final Datum imageData;
  ChewieDemo({ this.title = 'Player', Key key, @required this.imageData }): super(key:key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return _ChewieDemoState();
  }
}

class _ChewieDemoState extends State<ChewieDemo> {

  TargetPlatform _platform;
  VideoPlayerController _videoPlayerController1;
  VideoPlayerController _videoPlayerController2;
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    print('url player :${widget.imageData.dataUrl}');
    // 'https://www.sample-videos.com/video123/mp4/480/big_buck_bunny_480p_20mb.mp4'
    _videoPlayerController1 = VideoPlayerController.network('${widget.imageData.dataUrl}');
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController1,
      aspectRatio: 3 / 2,
      autoPlay: true,
      looping: true,
      // Tried playing around with some of these other options:

      // showControls: false,
      // materialProgressColors: ChewieProgressColors(
      //   playedColor: Colors.red,
      //   handleColor: Colors.blue,
      //   backgroundColor: Colors.grey,
      //   bufferedColor: Colors.lightGreen,
      // ),
      // placeholder: Container(
      //   color: Colors.grey,
      // ),
      // autoInitialize: true
    );
  }

  @override
  void dispose() {
    _videoPlayerController1.dispose();
    _videoPlayerController2.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: widget.title,
      theme: ThemeData.light().copyWith(
        platform: _platform ?? Theme.of(context).platform,
      ),
       home: DefaultTabController(
    length: 3,
    child: Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
      bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
      ),
    ),
    body: SafeArea(
        child: Column(
          children: <Widget>[
            Chewie(
              controller: _chewieController,
            ),
            TabBarView(
              children: [
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            )
          ],
        )
      ),
    ),
  ),
);
}}

Answer 1

Wrap Chewie inside a Container set the required height and width

Answer 2

Since you want Chewie to be on top I assume you're trying to add additional Widgets below the player.

You could, for example embed Chewie into a Column().
By default a Column() has set its mainAxisAlignment property to MainAxisAlignment.start which means the children will start at the upper edge of the screen growing downwards.

Just like this:

Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Chewie(
            controller: _chewieController,
          )
        ],
      ),
    );
  }

Also. In order to keep notches and other stuff clear at the top you might want to wrap the entire content in a SafeArea() widget.

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        children: <Widget>[
          Chewie(
            controller: _chewieController,
          )
        ],
      ),
    ),
  );
}