home_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:movie_db/core/model/movie_resp.dart';
import 'package:movie_db/core/service/service.dart';
import 'package:movie_db/ui/detail_screen.dart';

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

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {

  ///Kode untuk memanggil service
  Service _service;

  ///Kode untuk membuat Tab View
  List<Tab> _tabList = List();
  TabController _tabController;

  var imageUrl = 'http://image.tmdb.org/t/p/w500';
  var errorImage = "https://image.shutterstock.com/image-vector/picture-vector-icon-no-image-260nw-1350441335.jpg";

  @override
  void initState() {
    print('init HomeScreen');
    ///initState => kode yang akan dijalankan pertama kali saat layar home_screen dibuka,
    ///untuk itu kita perlu meng-initiate service dan tab supaya nanti tidak terjadi red error.
    _service = Service();

    /// kode dibawah ini kita akan menambahkan 2 tab yang berisi nowplaying dan upcoming
    _tabList.add(new Tab(
      text: 'NowPlaying',
    ));
    _tabList.add(new Tab(
      text: 'UpComing',
    ));

    ///kode dibawah ini sebagai controller tabview
    _tabController = new TabController(length: _tabList.length, vsync: this);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white70,
        appBar: AppBar(
          title: Text('Movie'),
          bottom: TabBar(
            tabs: _tabList,
            controller: _tabController,
            indicatorColor: Colors.orange,
            indicatorSize: TabBarIndicatorSize.tab,
          ),
        ),

        body: TabBarView(
          controller: _tabController,
          children: <Widget>[

            ///TODO : Tampilan untuk Tab NowPlaying
            ///Untuk memanggil service yang telah dibuat kita menggunakan FutureBuilder,
            FutureBuilder<MovieResp>(
              ///kode disamping ini kita memanggil service nowPlaying yang telah dibuat.
                future: _service.getNowPlaying(),
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    /// kode dibawah ini kita mengembalikan service dan akan membbuat tampilan list dengan
                    /// bantuan listview.builder
                    return ListView.builder(
                      /// itemCount merupakan banyaknya data yang terdapat pada json api
                      itemCount: snapshot.data.results.length,
                      itemBuilder: (context, index) {
                        var data = snapshot.data.results[index];
                        ///jika resultnya null kita kembalikan Text kosong dilayar dengan tulisan tidak ada data,
                        ///jika resultnya != null kita kembalikan dengan data yang akan dibuatkan ke dalam widget
                        return snapshot.data.results == null
                            ? Text('Tidak ada Data ')
                            : Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Row(
                                  mainAxisSize: MainAxisSize.max,
                                  children: <Widget>[
                                    ///Gambar
                                    Flexible(
                                      flex: 1,
                                      fit: FlexFit.tight,
                                      child: Container(
                                        decoration: BoxDecoration(
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(10))),
                                        height: 150,
                                        width: 100,
                                        child: snapshot.data.results[index]
                                                    .posterPath !=
                                                null
                                            ? ClipRRect(
                                                borderRadius: BorderRadius.all(
                                                    Radius.circular(10)),
                                                child: Image.network(
                                                  imageUrl + data.posterPath,
                                                  fit: BoxFit.cover,
                                                ))
                                            : Icon(Icons.home),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 10,
                                    ),

                                    ///Title
                                    Flexible(
                                        flex: 2,
                                        fit: FlexFit.tight,
                                        child: Container(
                                          height: 150,
                                          decoration: BoxDecoration(
                                              borderRadius: BorderRadius.all(
                                                  Radius.circular(10)),
                                              color: Colors.white,
                                              boxShadow: [
                                                BoxShadow(
                                                    color: Colors.blue,
                                                    blurRadius: 3)
                                              ]),
                                          child: Padding(
                                            padding: const EdgeInsets.all(8.0),
                                            child: Column(
                                              mainAxisSize: MainAxisSize.max,
                                              children: <Widget>[
                                                Text(
                                                  data.title,
                                                  style: TextStyle(
                                                      fontSize: 20,
                                                      fontWeight:
                                                          FontWeight.bold),
                                                ),
                                                SizedBox(
                                                  height: 10,
                                                ),
                                                Text(
                                                  data.overview,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                  maxLines: 3,
                                                )
                                              ],
                                            ),
                                          ),
                                        ))
                                  ],
                                ),
                              );
                      },
                    );
                  } else {
                    return Center(
                      child: CircularProgressIndicator(),
                    );
                  }
                }),

            ///TODO : Tampilan untuk Tab UpComing
            FutureBuilder<MovieResp>(
              future: _service.getUpcoming(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return ListView.builder(
                    itemCount: snapshot.data.results.length,
                    itemBuilder: (context, index) {
                      var data = snapshot.data.results[index];
                      /// Untuk membuat item bisa diklik, kita membutuhkan widget inkwell
                      return InkWell(
                        /// onTap menandakan jika widget di sentuh maka akan do something,
                        /// pada kode dibawah, jika item disentuh maka akan berpindah ke halaman DetailScreen -
                        /// dengan membawa data berupa index yang item yang disentuh
                          onTap: ()=> Navigator.push(context, CupertinoPageRoute(
                              builder: (context) => DetailScreen(movieItem: data,))
                          ),
                          child: Stack(
                        children: <Widget>[
                          /// Kotak Judul
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              mainAxisSize: MainAxisSize.max,
                              children: <Widget>[
                                SizedBox(
                                  width: 30,
                                ),
                                Expanded(
                                    child: Container(
                                  height: 120,
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(8)),
                                  ),
                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        top: 10.0, left: 50),
                                    child: ListTile(
                                      title: Text(data.title),
                                      subtitle: Text(data.releaseDate.toString()),
                                    ),
                                  ),
                                ))
                              ],
                            ),
                          ),

                          /// Foto Movie
                          Positioned(
                            top: 20,
                            left: 5,
                            child: Container(
                                decoration: BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: Colors.white),
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: CircleAvatar(
                                    backgroundImage: NetworkImage(
                                      data.posterPath != null
                                          ? imageUrl + data.posterPath
                                          : errorImage,
                                    ),
                                    radius: 40,
                                  ),
                                )),
                          ),
                        ],
                      ));
                    },
                  );
                } else {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            )
          ],
        ));
  }
}