Как разместить видео плеер на всех страницах, как YouTube в флаттер?

Question

Я хочу создать видеоплеер, например, YouTube, который будет появляться по всему экрану, как приложение YouTube.

После сворачивания или возврата нажмите эту видео будет воспроизводиться так на всех экранах:

Answer 1

Вы можете скопировать и вставить полный код ниже
Вы можете использовать Stack и Positioned

фрагмент кода

body: Stack(children: <Widget>[
        Positioned(
          //top: 100,
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            //height: 100,
            color: Colors.blue,
            child: VideoPage(),
          ),
        ),
        Center(
          child: _widgetOptions.elementAt(_selectedIndex),
        ),

рабочая демонстрация

полный код

import 'package:flutter/material.dart';
import 'package:mini_video_player/mini_video_player.dart';

class VideoPage extends StatefulWidget {
  @override
  _VideoPageState createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {

  MiniVideoPlayerController viewPlayerController;

  void onViewPlayerCreated(viewPlayerController) {
    this.viewPlayerController = viewPlayerController;
    this.viewPlayerController.loadUrl(
        "http://xianshi.img-cn-shanghai.aliyuncs.com/bachelordom/1558858006627.mp4");
  }

  @override
  void dispose() {
    super.dispose();
    viewPlayerController.dealloc();
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = 100.0; //MediaQuery.of(context).size.height-200;

    MiniVideoPlayer videoPlayer = new MiniVideoPlayer(
        onCreated: onViewPlayerCreated,
        hiddenControlView: true,
        width: width,
        height: height);

    return Container(
      child: Column(
        children: <Widget>[
          Container(
            child: videoPlayer,
            width: width,
            height: height,
          ),
          Wrap(
            children: <Widget>[
              FlatButton(
                child: Text('pause'),
                onPressed: (){
                  viewPlayerController.pause();
                },
              ),
              FlatButton(
                child: Text('resume'),
                onPressed: (){
                  viewPlayerController.resume();
                },
              ),
            ],
          )
        ],
      ),
    );
  }
}

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Stack(children: <Widget>[
        Positioned(
          //top: 100,
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            //height: 100,
            color: Colors.blue,
            child: VideoPage(),
          ),
        ),
        Center(
          child: _widgetOptions.elementAt(_selectedIndex),
        ),
      ]),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}