Home.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:cached_network_image/cached_network_image.dart';

import 'package:bencana/post.dart';
import 'utilities.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

// 1. Buat reference untuk post
final postRef = FirebaseDatabase.instance.reference().child('posts');

class _HomePageState extends State<HomePage> {
  // 2. Deklarasikan variabel yang dibutuhkan
  var title;
  var content;
  var photo;
  var timestamp;
  var userId;
  var post;
  List<Post> postList = new List();

  Utilities util = new Utilities();

  // 3. Buat StreamSubscription untuk mendeteksi perubahan database
  //    Ini perlu import dart:async
  StreamSubscription<Event> _onPostAddedSubscription;
  StreamSubscription<Event> _onPostChangedSubscription;

  // 4. Siapkan event untuk add dan change dan buat file post.dart
  void _onPostAdded(Event event) {
    print('On post added...');
    post = new Post.fromSnapshot(event.snapshot);
    setState(() {
      postList.add(post);
    });
  }

  void _onPostChanged(Event event) {
    print('On post changed...');
    post = new Post.fromSnapshot(event.snapshot);
    setState(() {
      postList.add(post);
    });
  }

  // 5. Pasangkan subscription pada init state
  @override
  void initState() {
    super.initState();
    postList.clear();
    _onPostAddedSubscription = postRef.onChildAdded.listen(_onPostAdded);
    _onPostChangedSubscription = postRef.onChildChanged.listen(_onPostChanged);
  }

  @override
  void dispose() {
    super.dispose();
    _onPostAddedSubscription.cancel();
    _onPostChangedSubscription.cancel();
  }

  @override
  Widget build(BuildContext context) {
    print('Post list: $postList');
    return Container(
      child: Container(
        color: Colors.grey[300],
        child: postList.length == 0
            ? const Center(
                child: const CircularProgressIndicator(),
              )
            : ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(
                            left: 16.0,
                            right: 16.0,
                            top: 10.0,
                            bottom: 10.0,
                          ),
                          child: Row(
                            children: <Widget>[
                              Text(
                                postList[index].title,
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 18.0,
                                ),
                              ),
                              Expanded(
                                child: SizedBox(),
                              ),
                              Text(
                                util.convertTimestamp(
                                  postList[index].timestamp,
                                ),
                                style: TextStyle(
                                  fontSize: 14.0,
                                  color: Colors.grey,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                            left: 16.0,
                            right: 16.0,
                            bottom: 10.0,
                          ),
                          child: Text(
                            postList[index].content,
                            style: TextStyle(
                              fontSize: 14.0,
                              color: Colors.grey,
                            ),
                          ),
                        ),
                        Center(
                          child: CachedNetworkImage(
                            placeholder: (context, url) =>
                                CircularProgressIndicator(),
                            errorWidget: (context, url, error) =>
                                Icon(Icons.error),
                            imageUrl: postList[index].photo,
                            height: 240.0,
                            width: double.infinity,
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                      ],
                    ),
                  );
                },
                itemCount: postList == null ? 0 : postList.length,
              ),
      ),
    );
  }
}