List Youtube Playlist by selected option in Flutter

I want to List my Youtube playlist based on which option I select.

My model file: 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,
  });
}

My custom data, data.dart file:

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

My tutorial_screen.dart file:

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,
                ),
            ],
          ),
        )
    );
  }

}

My tutorial_item.dart file:

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']);
    });
  }
}

But I am getting an error:

“RenderBox was not laid out: RenderViewport#f253f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE”

Vertical viewport was given unbounded height.

“RenderBox was not laid out: RenderIgnorePointer#ae22a relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE”

Error Image

Column needs to know how much height to give to it;s children, but when we give a scrollable child to a Column, this height goes to infinity and hence the error.

The code below is causing the error. You would have to either wrap ListView.builder with Expanded(this will give the maximum available height) or if you are not planning to add any more elements to the column then just simply remove Column and SingleChildScrollView, they are not needed. List is scrollable on it’s own.

 SingleChildScrollView(
          child: Column(
            children: [
              ListView.builder(itemBuilder: (ctx, index){