Flutter video_player can not show the video

Question

I use video_player 0.10.4+1 but when i run the application my video can not play it's transparent. Like this. here is the problem And This is my code for showing the video.

class VideoApp extends StatefulWidget {
@override
_VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
 VideoPlayerController _controller;

 @override
 void initState() {
  super.initState();
  _controller = VideoPlayerController.asset(
      'assets/vi1.mp4')
    ..initialize().then((_) {
    setState(() {});
  });
 }

@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Video Demo',
  home: Scaffold(
    body: Center(
      child: _controller.value.initialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )
          : Container(),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _controller.value.isPlaying
              ? _controller.pause()
              : _controller.play();
        });
      },
      child: Icon(
        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
      ),
    ),
  ),
);
}

@override
void dispose() {
 super.dispose();
 _controller.dispose();
}
}

This is how i import the above file.

class ActivityClip extends StatefulWidget {
ActivityClip({Key key, this.title}) : super(key: key);

final String title;

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

class _ActivityState extends State<ActivityClip> {
final List<String> numbers = [
'Soft Music',
'Meditation',
'Pray',
'Breathing',
'Relex'
 ];
@override
Widget build(BuildContext context) {
return Container(
    margin: const EdgeInsets.only(right: 10, left: 10, top: 350),
    height: MediaQuery.of(context).size.height * 0.3,
    child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: numbers.length,
        itemBuilder: (context, index) {
          return Container(
              width: 200,
              margin: const EdgeInsets.only(right: 10),
              child: RaisedButton(
                color: Colors.brown,
                child: Container(
                  child: Center(
                      child: Text(
                    numbers[index].toString(),
                    style: TextStyle(color: Colors.white, fontSize: 30.0),
                  )),
                ),
                onPressed: () {
                  _showMaterialDialog();
                 //activityVideo(context);
                },
              ));
        }));  
       }

_showMaterialDialog() {
showDialog(
    context: context,
    builder: (_) => new AlertDialog(
          title: new Text("Material Dialog"),
          content: Container(
    height: 400,
     width: 300,
          child: VideoApp()),
          actions: <Widget>[
            FlatButton(
              child: Text('Close me!'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        ));
       }


     }

I'm not sure that this code is wrong or from my device because there is on error at all.
Thank you for all suggestion.

Answer 1

After adding any package or assets it is always advisable to do flutter clean and flutter run.