The final result

The project address

Github.com/Tecode/flut…

Implementation method

Installing a plug-in

Install Video_player, I installed the latest version, please install the corresponding version according to your own version of Flutter, Android can directly use virtual machine, IOS can only play real machine.

Dev_dependencies: Flutter_test: SDK: Flutter Video_player: ^0.10.1+6Copy the code

myFlutterversion

Flutter 1.7.8 + hotfix. 4, the channel stable, https://github.com/flutter/flutter.git Framework, revision 2 e540931f7 (3 days Engine • Revision 54ad777fd2 Tools • Dart 2.4.0Copy the code

use

import 'package:video_player/video_player.dart';
Copy the code

Initialize play

  @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);
        });
      });
  }
Copy the code

Pause during destruction

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

layout

The main part of

Using transform.scale to scale the video, we want a tiled, unstretched display regardless of the video ratio. Center to Center after video amplification, the zoom ratio of _controller. Value. AspectRatio/MediaQuery of (context). Size. AspectRatio, with video divided by the width to height ratio of the aspect ratio of the equipment.

If we were to do something with the video it would also cover the whole screen, but it would stretch and look ugly, so let’s pull down the code and try it out.

  @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("Initializing."C-small (width: mediaquery.of (context).size. Width, bottom: 26.0, child: Column(mainAxisAlignment: MainAxisAlignment center, the children: "Widget > [ClipRRect (borderRadius: borderRadius circular (60.0), the child: MaterialButton( onPressed: () {}, child: Text("Wechat Login", style: TextStyle(fontSize: 15.0, fontWeight: fontweight.bold),), color: color (0xffFFDB2E), textColor: Color(0xff202326), height: 44.0, minWidth: 240.0, elevation: 0.0,), 20.0,), ClipRRect(borderRadius: borderRadius.circular(60.0), Child: MaterialButton(onPressed: () {}, child: Text("Phone number login", style: TextStyle(fontSize: 15.0, fontWeight: fontweight.bold),,), color: color (0xff202326), height: 44.0, minWidth: Elevation: 0.0, textColor: Color(0xffededed),),),"I have read and agree to the Service Agreement and Privacy Policy"C-21 would offer tourists a small glimpse of space., style: TextStyle(color: Colors. White, fontSize: 13.0),)],),, MediaQuery. Of (context). The size. The width, the top: 80.0, child: the Column (mainAxisAlignment: mainAxisAlignment center, the children: <Widget>[ Text("Login", style: TextStyle(fontSize: 40.0, fontWeight: fontweight.w400, color: color.white),), SizedBox(height: 10.0), the Text ("Video Background Login Page", style: TextStyle(color: color.white, fontSize: 15.0),)],)); }Copy the code

Write in the last

Other components will be updated irregularly. Welcome to pay attention. Welcome to STAR.