Trying to use ListView inside YoutubePlayerBuilder in flutter - flutter

Question

I'm trying to basically have a youtube video on top, with a scrollable Listview below. Can't get the listview to be scrollable though. Here's the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.blueAccent,
),
);
runApp(YoutubePlayerDemoApp());
}
class YoutubePlayerDemoApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Youtube Player Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
appBarTheme: const AppBarTheme(
color: Colors.blueAccent,
textTheme: TextTheme(
headline6: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w300,
fontSize: 20.0,
),
),
),
iconTheme: const IconThemeData(
color: Colors.blueAccent,
),
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
YoutubePlayerController _controller;
TextEditingController _idController;
TextEditingController _seekToController;
PlayerState _playerState;
YoutubeMetaData _videoMetaData;
double _volume = 100;
bool _muted = false;
bool _isPlayerReady = false;
final List<String> _ids = [
'srqZ5jsvXEc',
];
final testData = ["## Ingredients", "### 1 cup peanuts", "### Example2", "### Example 2", "### Example100", "## ", "## Method", "### This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text. This is a paragraph with long text.", "### Set aside to cool. Then serve."];
#override
void initState() {
super.initState();
_controller = YoutubePlayerController(
initialVideoId: _ids.first,
flags: const YoutubePlayerFlags(
mute: false,
autoPlay: false,
disableDragSeek: false,
loop: false,
isLive: false,
forceHD: false,
enableCaption: true,
),
)..addListener(listener);
_idController = TextEditingController();
_seekToController = TextEditingController();
_videoMetaData = const YoutubeMetaData();
_playerState = PlayerState.unknown;
}
void listener() {
if (_isPlayerReady && mounted && !_controller.value.isFullScreen) {
setState(() {
_playerState = _controller.value.playerState;
_videoMetaData = _controller.metadata;
});
}
}
#override
void deactivate() {
// Pauses video while navigating to next page.
_controller.pause();
super.deactivate();
}
#override
void dispose() {
_controller.dispose();
_idController.dispose();
_seekToController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final _markDownData = testData.map((x) => "$x\n").reduce((x, y) => "$x$y");
return YoutubePlayerBuilder(
onExitFullScreen: () {
// The player forces portraitUp after exiting fullscreen. This overrides the behaviour.
SystemChrome.setPreferredOrientations(DeviceOrientation.values);
},
player: YoutubePlayer(
controller: _controller,
showVideoProgressIndicator: true,
progressIndicatorColor: Colors.blueAccent,
topActions: <Widget>[
const SizedBox(width: 8.0),
Expanded(
child: Text(
_controller.metadata.title,
style: const TextStyle(
color: Colors.white,
fontSize: 18.0,
),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
],
onReady: () {
_isPlayerReady = true;
},
onEnded: (data) {
_controller
.load(_ids[(_ids.indexOf(data.videoId) + 1) % _ids.length]);
},
),
builder: (context, player) => Scaffold(
key: _scaffoldKey,
appBar: AppBar(
leading: Padding(
padding: const EdgeInsets.only(left: 12.0),
child: Image.asset(
'assets/ypf.png',
fit: BoxFit.fitWidth,
),
),
title: const Text(
'Youtube Player Flutter',
style: TextStyle(color: Colors.white),
),
),
body: ListView(
children: [
player,
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Vegan Burritos',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
),
),
FlatButton(child: Icon(Icons.favorite_border, color: Colors.redAccent,), onPressed: () {
print('favourite button was pressed');
},),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star_half),
Icon(Icons.star_border),
SizedBox(width: 10.0,),
Text('Rate Recipe'),
],
),
),
Container(
height: 1000.0,
child: Markdown(data: _markDownData),
),
],
),
),
],
),
),
);
}
}
Any ideas? I figure its probably because i'm trying to do it inside the YoutubePlayerBuilder but not sure how else to do it. I tried wrapping the YoutubePlayerBuilder inside a listview, but it didn't work.
Thanks in advance,
Jason

Answer 1

SOLVED!!! I just had to change
Container(
height: 1000.0,
child: Markdown(data: _markDownData),
),
to:
Container(
height: 1000.0,
child: MarkdownBody(data: _markDownData),
),
Hope this helps someone in the future!