Flutter реализует страницу входа с фоновым видео

Flutter
Flutter реализует страницу входа с фоновым видео

окончательный эффект

адрес проекта

GitHub.com/код TE/Flutong…

Реализация

Установить плагин

Установитьvideo_player, я установил последнюю версию, пожалуйста, следуйте своимflutterверсию для установки соответствующей версии, Android может напрямую использовать виртуальную машину,IOSВам нужно настоящее устройство, чтобы играть.

dev_dependencies:
  flutter_test:
    sdk: flutter
  video_player: ^0.10.1+6

мойFlutterВерсия

Flutter 1.7.8+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2e540931f7 (3 days ago) • 2019-07-09 13:14:38 -0700
Engine • revision 54ad777fd2
Tools • Dart 2.4.0

использовать

import 'package:video_player/video_player.dart';

Инициализировать воспроизведение

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = VideoPlayerController.network(videoUrl)
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
        _controller.setLooping(true);
        // _controller.setVolume(0.0);
        Timer.periodic(Duration(seconds: 15), (Timer time) {
          print(time);
        });
      });
  }

Пауза при разрушении

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.pause();
  }

макет

Основная часть

использоватьTransform.scaleМасштабируя видео, мы хотим получить эффект, заключающийся в том, что независимо от соотношения сторон видео оно может быть разбито на плитки и отображаться без растяжения.CenterПосле увеличения видео оно отображается в центре, а коэффициент масштабирования_controller.value.aspectRatio /MediaQuery.of(context).size.aspectRatio, разделите соотношение сторон видео на соотношение сторон устройства.

Если мы обработаем видео, оно заполнит весь экран, но будет растянуто и будет выглядеть некрасиво, вы можете сбросить код и попробовать.

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.pause();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      fit: StackFit.expand,
      children: <Widget>[
        Transform.scale(
          scale: _controller.value.aspectRatio /
              MediaQuery.of(context).size.aspectRatio,
          child: Center(
            child: Container(
              child: _controller.value.initialized
                  ? AspectRatio(
                      aspectRatio: _controller.value.aspectRatio,
                      child: VideoPlayer(_controller),
                    )
                  : Text("正在初始化"),
            ),
          ),
        ),
        Positioned(
          width: MediaQuery.of(context).size.width,
          bottom: 26.0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.circular(60.0),
                child: MaterialButton(
                  onPressed: () {},
                  child: Text(
                    "微信登录",
                    style:
                        TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
                  ),
                  color: Color(0xffFFDB2E),
                  textColor: Color(0xff202326),
                  height: 44.0,
                  minWidth: 240.0,
                  elevation: 0.0,
                ),
              ),
              SizedBox(
                height: 20.0,
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(60.0),
                child: MaterialButton(
                  onPressed: () {},
                  child: Text(
                    "手机号登录",
                    style:
                        TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
                  ),
                  color: Color(0xff202326),
                  height: 44.0,
                  minWidth: 240.0,
                  elevation: 0.0,
                  textColor: Color(0xffededed),
                ),
              ),
              SizedBox(
                height: 60.0,
              ),
              Text(
                "我已阅读并同意《服务协议》及《隐私政策》",
                style: TextStyle(color: Colors.white, fontSize: 13.0),
              )
            ],
          ),
        ),
        Positioned(
          width: MediaQuery.of(context).size.width,
          top: 80.0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                "登录",
                style: TextStyle(
                    fontSize: 40.0,
                    fontWeight: FontWeight.w400,
                    color: Colors.white),
              ),
              SizedBox(
                height: 10.0,
              ),
              Text(
                "视频背景登录页面",
                style: TextStyle(color: Colors.white, fontSize: 15.0),
              )
            ],
          ),
        )
      ],
    ));
  }

напиши в конце

Мы будем обновлять другие компоненты время от времени. Добро пожаловать, чтобы обратить внимание. Добро пожаловать в звезду.

Категории