disaster_thread_add.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/disaster_thread_add.dart';
import 'package:bencana/disaster.dart';
import 'package:bencana/comment.dart';
import 'package:bencana/utilities.dart';

class DisasterThread extends StatefulWidget {
  final Disaster disaster;

  DisasterThread(this.disaster);

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

class _DisasterThreadState extends State<DisasterThread> {
  var disasterId;

  // 1. Buat referensi buat comment
//  final commentRef = FirebaseDatabase.instance.reference()
//      .child('comments')
//      .child(disasterId);
  // 2. Siapkan variabel yang dibutuhkan
  var fullName;
  var comment;
  var commentText;
  var photo;
  var timestamp;

  List<Comment> commentList = new List();
  Utilities util = new Utilities();

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

  // 4. Siapkan event untuk add dan change dan buat file comment.dart
  void _onCommentAdded(Event event) {
    print('On comment added...');
    comment = new Comment.fromSnapshot(event.snapshot);
    commentText = comment.comment;
    print('Comment text: ${commentText}');
    setState(() {
      commentList.add(comment);
    });
  }

  void _onCommentChanged(Event event) {
    print('On comment changed...');
    comment = new Comment.fromSnapshot(event.snapshot);
    commentText = comment.comment;
    print('Comment text: ${commentText}');
    setState(() {
      commentList.add(comment);
    });
  }

  // 5. Pasangkan subscription pada init state
  @override
  void initState() {
    super.initState();
    commentList.clear();
    disasterId = widget.disaster.disasterId;
    final commentRef = FirebaseDatabase.instance
        .reference()
        .child('comments')
        .child(disasterId);
    _onCommentAddedSubscription =
        commentRef.onChildAdded.listen(_onCommentAdded);
    _onCommentChangedSubscription =
        commentRef.onChildChanged.listen(_onCommentChanged);
  }

  @override
  void dispose() {
    super.dispose();
    _onCommentAddedSubscription.cancel();
    _onCommentChangedSubscription.cancel();
  }

  Widget _buildContent() {
    if (commentList.length == 0) {
      return const Center(
        child: Text('No comments'),
      );
    } else {
      return Center(child: CircularProgressIndicator());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Comment List'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) =>
                      DisasterThreadAdd(widget.disaster.disasterId),
                ),
              );
            },
          ),
        ],
      ),
      body: Container(
        color: Colors.grey[300],
        child: commentList.length == 0
            ? _buildContent()
            : ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            commentList[index].fullName,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          Text(
                            util.convertTimestamp(commentList[index].timestamp),
                            style: TextStyle(color: Colors.grey),
                          ),
                          SizedBox(height: 10.0),
                          Text(commentList[index].comment),
                          SizedBox(height: 10.0),
                          Center(
                            child: commentList[index].photo != null
                                ? CachedNetworkImage(
                                    placeholder: (context, url) =>
                                        CircularProgressIndicator(),
                                    errorWidget: (context, url, error) =>
                                        Icon(Icons.error),
                                    imageUrl: commentList[index].photo,
                                    width: double.infinity,
                                    fit: BoxFit.fitWidth,
                                    height: 240.0,
                                  )
                                : Container(),
                          ),
                        ],
                      ),
                    ),
                  );
                },
                itemCount: commentList == null ? 0 : commentList.length,
              ),
      ),
    );
  }
}