Favourite Shows App (Exercise B)

favourite-show-app-exercise-b.dart

import 'dart:convert';

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'All Shows'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool isFavourite = false;
  List programmes;

  Future<List> getProgrammes() async {
    final response = await http.get(
      'https://discovery.hubsvc.itv.com/platform/itvonline/ctv/programmes?sortBy=title&broadcaster=itv&features=hls,aes',
      headers: {'Accept': 'application/vnd.itv.hubsvc.programme.v3+hal+json'},
    );
    // print('Got response: ${response.body}');
    final decodedResponse = json.decode(response.body);
    return decodedResponse['_embedded']['programmes'];
  }

  @override
  void initState() {
    super.initState();
    getProgrammes().then((results) {
      setState(() {
        programmes = results;
      });
    });
  }

  void updateFavourite() {
    setState(() {
      isFavourite = !isFavourite;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          Row(
            children: <Widget>[
              Icon(
                Icons.favorite,
                color: Colors.white,
                size: 25,
              ),
              SizedBox(width: 5),
              Text(
                '0',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(width: 5)
            ],
          ),
        ],
      ),
      body: Center(
        child: programmes == null
            ? Text('Loading programmes...')
            : ListView(
                children: programmes
                    .map((programme) => ListTile(
                          title: Text(programme['title']),
                          subtitle: Text(programme['synopses']['ninety']),
                        ))
                    .toList(),
              ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class ProgrammeCard extends StatelessWidget {
  ProgrammeCard({this.isFavourite, this.onTap});

  final bool isFavourite;
  final VoidCallback onTap;

  @override
  Widget build(context) {
    return Card(
      color: Colors.greenAccent,
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5),
      ),
      child: InkWell(
        onTap: onTap,
        child: Container(
          height: 200,
          child: Stack(
            children: <Widget>[
              Positioned.fill(
                child: Ink.image(
                  image: NetworkImage('https://picsum.photos/seed/picsum/200/300'),
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Colors.black54,
                      Colors.transparent,
                      Colors.black54,
                    ],
                  ),
                ),
              ),
              Positioned(
                bottom: 18,
                left: 18,
                child: Text(
                  'Programme title',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Positioned(
                left: 18,
                top: 18,
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.watch_later,
                      color: Colors.white,
                    ),
                    SizedBox(width: 5),
                    Text(
                      '120 mins',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
              Positioned(
                right: 18,
                top: 18,
                child: Icon(
                  isFavourite ? Icons.favorite : Icons.favorite_border,
                  color: isFavourite ? Colors.red : Colors.white,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

To run this example, add the http package to your dependencies:

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.2 # <-- Add this line

And run flutter pub get to update your dependencies.

If running on DartPad, update the code as follows:

// import 'package:http/http.dart' as http;
import 'dart:html' hide VoidCallback;

// Amend the getProgrammes() method like this:
  Future<List> getProgrammes() async {
    final response = await HttpRequest.request(
      'https://discovery.hubsvc.itv.com/platform/itvonline/ctv/programmes?sortBy=title&broadcaster=itv&features=hls,aes',
      method: 'GET',
      requestHeaders: {
        'Accept': 'application/vnd.itv.hubsvc.programme.v3+hal+json',
      },
    );
    // print('Got response: ${response.responseText}');
    final decodedResponse = json.decode(response.responseText);
    return decodedResponse['_embedded']['programmes'];
  }
...