通过Flutter中的选定选项呈现YouTube播放列表时出现问题

如何解决通过Flutter中的选定选项呈现YouTube播放列表时出现问题

我想根据选择的选项列出我的YouTube播放列表。

我的模型文件：course.dart

import 'package:flutter/material.dart';

class Course {
  final String id;
  final String title;
  final List<String> categories;
  final String url;
  final Color color;

  const Course({
    @required this.id,@required this.title,@required this.categories,@required this.url,this.color = Colors.orange,});
}

我的自定义数据data.dart文件：

const COURSE = const [
  Course(
    id: 't1',title: 'IOT',categories: [
      'c1',],url: 'my custom url',color: Colors.purple,),Course(
    id: 't2',title: 'Artificial Intelligence',color: Colors.red,

我的tutorial_screen.dart文件：

import 'package:WTApp/tutorial/tutorial_item.dart';
import 'package:flutter/material.dart';
import '../data.dart';

class CourseScreen extends StatelessWidget {
  static const routeName = '/course-detail';

  Widget build(BuildContext context) {
    final routeArgs = ModalRoute.of(context).settings.arguments as Map<String,String>;
    final courseTitle = routeArgs['title'];
    final courseId = routeArgs['id'];
    final courseTutorial = COURSE.where((course) {return course.categories.contains(courseId);}).toList();
    return Scaffold(
      appBar: AppBar(title: Text(courseTitle),body: SingleChildScrollView(
          child: Column(
            children: [
              ListView.builder(itemBuilder: (ctx,index){
                return TutorialItem(
                  title: courseTutorial[index].title,url: courseTutorial[index].url,);},itemCount: courseTutorial.length,)
    );
  }

}

我的tutorial_item.dart文件：

import 'dart:convert';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class TutorialItem extends StatefulWidget {
  final String title;
  final String url;

  TutorialItem({this.title,this.url});

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

class _TutorialItemState extends State<TutorialItem> {
  Future<List> getData() async{
    final response = await http.get(widget.url);
    return json.decode(response.body);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),body: FutureBuilder<List>(
        future: getData(),builder: (context,snapshot){
          if(snapshot.hasError) print(snapshot.error);
          return snapshot.hasData ? ListVideo() : CircularProgressIndicator();
        },);
  }
}

class ListVideo extends StatelessWidget {
  final List list;
  ListVideo({this.list});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: list == null?0:list.length,itemBuilder: (context,index){
          return Text(list[index]['snippet']['title']);
    });
  }
}

---

但是我遇到一个错误：

“未布置RenderBox：RenderViewport＃f253f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE”
垂直视口的高度不受限制。
“未布置RenderBox：RenderIgnorePointer＃ae22a relayoutBoundary = up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE”

Error Image