To play two videos side by side simultaneously in Flutter, you need to create separate video player controllers for each video and play them simultaneously. You can modify your code to create two separate controllers and initialize them with separate video files, like this:
final _controller1 = VideoPlayerController.asset('video1.mp4');
final _controller2 = VideoPlayerController.asset('video2.mp4');
Then, you can use the FutureBuilder widget to wait for both controllers to initialize and build the UI once both controllers are ready:
SizedBox(
width: deviceWidth,
height: deviceHeight,
child: FutureBuilder(
future: Future.wait([
_controller1.initialize(),
_controller2.initialize(),
]),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return Row(
mainAxisSize: MainAxisSize.max,
children: [
SizedBox(
width: deviceWidth / 2,
child: Chewie(
controller: ChewieController(
videoPlayerController: _controller1,
autoPlay: true,
looping: true,
),
),
),
SizedBox(
width: deviceWidth / 2,
child: Chewie(
controller: ChewieController(
videoPlayerController: _controller2,
autoPlay: true,
looping: true,
),
),
),
],
);
}
},
),
)
In the above code, the FutureBuilder widget waits for both controllers to initialize using the Future.wait method and then builds the UI once both controllers are ready. Once both controllers are ready, you can create two separate Chewie widgets, one for each controller, and add them to a Row widget to display them side by side.
Note that you should also dispose the video player controllers when the widget is disposed to avoid memory leaks:
@override
void dispose() {
_controller1.dispose();
_controller2.dispose();
super.dispose();
}