disaster_page.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.dart';
import 'package:bencana/utilities.dart';
import 'package:bencana/disaster_thread.dart';

class DisasterPage extends StatefulWidget {
  final postId;

  const DisasterPage({Key key, this.postId}) : super(key: key);

  @override
  _DisasterPageState createState() => _DisasterPageState(postId);
}

final disasterRef = FirebaseDatabase.instance.reference().child('disasters');

class _DisasterPageState extends State<DisasterPage> {
  final postId;

  var title;
  var content;
  var photo;
  var timestamp;
  var userId;
  var disaster;
  List<Disaster> disasterList = new List();
  Utilities util = new Utilities();

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

  _DisasterPageState(this.postId);

  void _onDisasterAdded(Event event) {
    print('On disaster added...');
    disaster = new Disaster.fromSnapshot(event.snapshot);
    title = disaster.title;
    content = disaster.content;
    print('Disaster Length: $disasterList.length');
    print("Title: $title, Content: $content");
    setState(() {
      disasterList.add(disaster);
    });
  }

  void _onDisasterChanged(Event event) {
    print('On disaster changed...');
    disaster = new Disaster.fromSnapshot(event.snapshot);
    setState(() {
      disasterList.clear();
      title = disaster.title;
      content = disaster.content;
      print('Disaster Length: $disasterList.length');
      print("Title: $title, Content: $content");
      disasterList.add(disaster);
    });
  }

  @override
  void initState() {
    super.initState();
    disasterList.clear();
    _onDisasterAddedSubscription =
        disasterRef.onChildAdded.listen(_onDisasterAdded);
    _onDisasterChangedSubscription =
        disasterRef.onChildChanged.listen(_onDisasterChanged);
  }

  @override
  void dispose() {
    super.dispose();
    _onDisasterAddedSubscription.cancel();
    _onDisasterChangedSubscription.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.grey[300],
        child: disasterList.length == 0
            ? const Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Center(
                          child: CachedNetworkImage(
                            placeholder: (context, url) =>
                                CircularProgressIndicator(),
                            errorWidget: (context, url, error) =>
                                Icon(Icons.error),
                            imageUrl: disasterList[index].photo,
                            height: 240.0,
                            width: double.infinity,
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                            left: 16.0,
                            right: 16.0,
                            bottom: 10.0,
                            top: 16.0,
                          ),
                          child: Text(
                            disasterList[index].title,
                            style: TextStyle(
                              fontSize: 18.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(
                            left: 16.0,
                            right: 16.0,
                            top: 5.0,
                            bottom: 5.0,
                          ),
                          child: Text(
                            util.convertTimestamp(
                              disasterList[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(
                            disasterList[index].content,
                            style: TextStyle(
                              fontSize: 14.0,
                              color: Colors.black,
                            ),
                          ),
                        ),
//                        RaisedButton(onPressed: null),
                        Container(
                          padding: EdgeInsets.only(
                            top: 5.0,
                            left: 16.0,
                            bottom: 10.0,
                          ),
                          child: RaisedButton(
                            color: Colors.teal,
                            textColor: Colors.white,
                            onPressed: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) =>
                                        DisasterThread(disasterList[index])),
                              );
                            },
                            child: Text(
                              'Comments',
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                },
                itemCount: disasterList == null ? 0 : disasterList.length,
              ),
      ),
    );
  }
}