尝试在 Flutter 中使用 YoutubePlayerBuilder 中的 ListView

Question

我基本上是想在顶部放一个 youtube 视频，在下面放一个可滚动的列表视图。虽然无法使列表视图可滚动。这是代码：

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),
                  ),

                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}

有什么想法吗？我认为这可能是因为我正在尝试在 YoutubePlayerBuilder 中执行此操作，但不确定该怎么做。我尝试将 YoutubePlayerBuilder 包装在列表视图中，但它不起作用。

提前致谢，

贾森

Answer 1

已解决！！！我只需要改变

Container(
                    height: 1000.0,
                    child: Markdown(data: _markDownData),
                  ),

至：

Container(
                    height: 1000.0,
                    child: MarkdownBody(data: _markDownData),
                  ),

希望这对以后的人有所帮助！

尝试在 Flutter 中使用 YoutubePlayerBuilder 中的 ListView

Trying to use ListView inside YoutubePlayerBuilder in flutter

youtube

markdown

dart

flutter