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

final link =
    "****";

Future<String> getData() async {
  var res = await http
      .get(Uri.encodeFull(link), headers: {"Accept": "application/json"});
  if (res.statusCode == 200) {
    var data = json.decode(res.body);
    var page = data["page"] as Map;
    //var container = data["container"] as List;
    //var item = data["item"] as List;
    //print(page["title"]);
    var attributes = page["attributes"] as List;
    //print(attributes[11]["value"]);
    //print(container[0]["title"]);

    for (var i = 0; i < attributes.length; i++) {
      if (attributes[i]["key"] == "image") {
        return attributes[i]["value"].toString();
      }
    }
  }

  return "https://picsum.photos/200/300";
}

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    FutureBuilder<String>(
      future: getData(), // if you mean this method well return image url

      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        return Image.network(snapshot.data);
      },
    );
    return Scaffold(
        backgroundColor: Colors.black,
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              primary: true,
              expandedHeight: 430.0,
              backgroundColor: Colors.black,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Container(
                  child: Stack(
                    fit: StackFit.loose,
                    children: <Widget>[
                      Container(
                        width: screenSize.width,
                        height: 220,
                        child: Center(
                          child: Container(
                            height: 64.0,
                            width: 64.0,
                            child: OutlineButton(
                              padding: EdgeInsets.all(0.0),
                              onPressed: () => print('play'),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(32.0),
                                ),
                              ),
                              child: Container(
                                height: 64.0,
                                width: 64.0,
                                decoration: BoxDecoration(
                                  color: Color.fromRGBO(0, 0, 0, 0.3),
                                  borderRadius: BorderRadius.circular(32.0),
                                ),
                                child: Icon(
                                  Icons.play_arrow,
                                  color: Colors.white,
                                  size: 48.0,
                                ),
                              ),
                            ),
                          ),
                        ),
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: NetworkImage("https://picsum.photos/200/300"
                                //getData().toString(),
                                ),
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                      ),
                      Container(
                        width: screenSize.width,
                        height: 220,
                        child: DecoratedBox(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              begin: FractionalOffset.topCenter,
                              end: FractionalOffset.bottomCenter,
                              stops: [0.1, 0.4, 1.0],
                              colors: [
                                Colors.black54,
                                Colors.transparent,
                                Colors.black
                              ],
                            ),
                          ),
                          child: Padding(
                            padding: EdgeInsets.only(
                                left: 8.0, right: 8.0, bottom: 20.0),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  "widget.item.name",
                                  maxLines: 3,
                                  textAlign: TextAlign.left,
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.w700,
                                    fontSize: 18.0,
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                      ),
                      Positioned(
                        top: 220,
                        child: Container(
                          padding: EdgeInsets.only(left: 8.0, right: 30.0),
                          width: screenSize.width,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Text(
                                'de coicidencia',
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                  color: Color.fromRGBO(0, 255, 0, 0.8),
                                  fontWeight: FontWeight.w600,
                                  fontSize: 15.0,
                                ),
                              ),
                              Text(
                                "widget.item.date.year.toString()",
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                  color: Color.fromRGBO(255, 255, 255, 0.3),
                                  fontWeight: FontWeight.w400,
                                  fontSize: 12.0,
                                ),
                              ),
                              Text(
                                '16 +',
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                  color: Color.fromRGBO(255, 255, 255, 0.3),
                                  fontWeight: FontWeight.w400,
                                  fontSize: 12.0,
                                ),
                              ),
                              Text(
                                'temporadas',
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                  color: Color.fromRGBO(255, 255, 255, 0.3),
                                  fontWeight: FontWeight.w400,
                                  fontSize: 12.0,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Positioned(
                        top: 240,
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 8.0),
                          width: screenSize.width,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.only(top: 8.0),
                                child: Container(
                                  child: Text(
                                    "widget.item.description",
                                    overflow: TextOverflow.ellipsis,
                                    maxLines: 3,
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color.fromRGBO(255, 255, 255, 0.8),
                                      fontWeight: FontWeight.w400,
                                      fontSize: 12.0,
                                    ),
                                  ),
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 8.0),
                                child: Container(
                                  child: RichText(
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                    text: TextSpan(
                                      style: TextStyle(
                                        color:
                                            Color.fromRGBO(255, 255, 255, 0.3),
                                        fontWeight: FontWeight.w400,
                                        fontSize: 12.0,
                                      ),
                                      children: <TextSpan>[
                                        TextSpan(
                                          text: 'Protagonizada por: ',
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold),
                                        ),
                                        TextSpan(
                                            text:
                                                "widget.item.cast.join(', ')"),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 8.0),
                                child: Row(
                                  children: <Widget>[
                                    FlatButton(
                                      textColor: Colors.white70,
                                      onPressed: () => print('Mi Lista'),
                                      child: Container(
                                        height: 50.0,
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceAround,
                                          children: <Widget>[
                                            Icon(
                                              Icons.add,
                                              size: 32.0,
                                            ),
                                            Text(
                                              'Mi Lista',
                                              style: TextStyle(fontSize: 10.0),
                                            )
                                          ],
                                        ),
                                      ),
                                    ),
                                    FlatButton(
                                      textColor: Colors.white70,
                                      onPressed: () => print('calificar'),
                                      child: Container(
                                        height: 50.0,
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceAround,
                                          children: <Widget>[
                                            Icon(
                                              Icons.thumb_up,
                                              size: 24.0,
                                            ),
                                            Text(
                                              'Calificar',
                                              style: TextStyle(fontSize: 10.0),
                                            )
                                          ],
                                        ),
                                      ),
                                    ),
                                    FlatButton(
                                      textColor: Colors.white70,
                                      onPressed: () => print('Compartir'),
                                      child: Container(
                                        height: 50.0,
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceAround,
                                          children: <Widget>[
                                            Icon(
                                              Icons.share,
                                              size: 20.0,
                                            ),
                                            Text(
                                              'Compartir',
                                              style: TextStyle(fontSize: 10.0),
                                            )
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 8.0),
                                child: Container(
                                  child: Text(
                                    'EPISODIOS',
                                    overflow: TextOverflow.ellipsis,
                                    maxLines: 3,
                                    textAlign: TextAlign.left,
                                    style: TextStyle(
                                      color: Color.fromRGBO(255, 255, 255, 0.8),
                                      fontWeight: FontWeight.w700,
                                      fontSize: 15.0,
                                    ),
                                  ),
                                ),
                              ),
                              FlatButton(
                                padding: EdgeInsets.all(0.0),
                                child: Row(
                                  children: <Widget>[
                                    Text(
                                      'Temporada ',
                                      overflow: TextOverflow.ellipsis,
                                      maxLines: 3,
                                      textAlign: TextAlign.left,
                                      style: TextStyle(
                                        color:
                                            Color.fromRGBO(255, 255, 255, 0.6),
                                        fontWeight: FontWeight.w500,
                                        fontSize: 15.0,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ));
  }
}