To let Flutter know about all the available assets, you have to specify them in the pubspec file.

pubspec.yaml

flutter:

  uses-material-design: true

  assets:

   - videos/IntroVideo.mp4

Using the widget

Now we will start playing videos. For that Chewie provides its widget which is only a wrapper on top of the VideoPlayer which comes directly from the Flutter.

We want to play multiple videos displayed in a ListView, it’s going to be best to put all of the video-playing-related things into its widget. Also, because video player resources need to be released, you need to create a StatefulWidget to get hold of the dispose() method.

Chewie_list_item.dart

import 'package:chewie/chewie.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

class ChewieListItem extends StatefulWidget {

  // This will contain the URL/asset path which we want to play

  final VideoPlayerController videoPlayerController;

  final bool looping;

  ChewieListItem({

    @required this.videoPlayerController,

    this.looping,

    Key key,

  }) : super(key: key);

  @override

  _ChewieListItemState createState() => _ChewieListItemState();

}

class _ChewieListItemState extends State {

  ChewieController _chewieController;

  @override

  void initState() {

    super.initState();

    // Wrapper on top of the videoPlayerController

    _chewieController = ChewieController(

      videoPlayerController: widget.videoPlayerController,

      aspectRatio: 16 / 9,

      // Prepare the video to be played and display the first frame

      autoInitialize: true,

      looping: widget.looping,

      // Errors can occur for example when trying to play a video

      // from a non-existent URL

      errorBuilder: (context, errorMessage) {

        return Center(

          child: Text(

            errorMessage,

            style: TextStyle(color: Colors.white),

          ),

        );

      },

    );

  }

  @override

  Widget build(BuildContext context) {

    return Padding(

      padding: const EdgeInsets.all(8.0),

      child: Chewie(

        controller: _chewieController,

      ),

    );

  }

  @override

  void dispose() {

    super.dispose();

    // IMPORTANT to dispose of all the used resources

    widget.videoPlayerController.dispose();

    _chewieController.dispose();

  }

}

Play the Videos

To play the videos in listview all you have to do is create a page named “mypage”.

Main. dart

import 'package:chewie_prep/chewie_list_item.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

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

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      page: MyPage(),

    );

  }

}

class MyPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Video Player'),

      ),

      body: ListView(

        children: [

          ChewieListItem(

            videoPlayerController: VideoPlayerController.asset(

              'videos/IntroVideo.mp4',

            ),

            looping: true,

          ),

          ChewieListItem(

            videoPlayerController: VideoPlayerController.network(

              'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/table.mp4',

            ),

          ),

          ChewieListItem(

            // This URL doesn't exist - will display an error

            videoPlayerController: VideoPlayerController.network(

           'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/error.mp4',

            ),

          ),

        ],

      ),

    );

  }

}