In this example, I will share how to add video background in flutter. Here is a solution which handles overflow using a FittedBox widget:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import 'package:video_player/video_player.dart'; import 'package:flutter/material.dart'; void main() => runApp(BackgroundVideo()); class BackgroundVideo extends StatefulWidget { @override _BackgroundVideoState createState() => _BackgroundVideoState(); } class _BackgroundVideoState extends State<BackgroundVideo> { VideoPlayerController _controller; @override void initState() { super.initState(); _controller = VideoPlayerController.network( 'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4') ..initialize().then((_) { _controller.play(); _controller.setLooping(true); // Ensure the first frame is shown after the video is initialized setState(() {}); }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Stack( children: <Widget>[ SizedBox.expand( child: FittedBox( fit: BoxFit.cover, child: SizedBox( width: _controller.value.size?.width ?? 0, height: _controller.value.size?.height ?? 0, child: VideoPlayer(_controller), ), ), ), LoginWidget() ], ), ), ); } @override void dispose() { super.dispose(); _controller.dispose(); } } class LoginWidget extends StatelessWidget { const LoginWidget({ Key key, }) : super(key: key); @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ Container(), Container( padding: EdgeInsets.all(16), width: 300, height: 200, color: Colors.grey.withAlpha(200), child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ TextField( decoration: InputDecoration( hintText: 'Username', ), ), TextField( decoration: InputDecoration( hintText: 'Password', ), ), RaisedButton( child: Text('Login'), onPressed: () {}, ), ], ), ), ], ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
