fix: earthquake 頁面

lib/view/earthquake.dart

@@ -1,8 +1,10 @@
 import 'dart:async';
 import 'dart:typed_data';
+import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:http/http.dart' as HTTP;
+import '../core/api.dart';
 
 class EarthquakePage extends StatefulWidget {
   const EarthquakePage({Key? key}) : super(key: key);
@@ -20,7 +22,12 @@ class _EarthquakePage extends State<EarthquakePage> {
   late final Widget _int = Image.network(
       "https://cdn.jsdelivr.net/gh/ExpTechTW/API@master/resource/int.png");
   int replay = 0;
-  late Timer clock;
+  late Timer clock,reports_clock;
+
+  int _page = 0;
+  List<Widget> _List_children = <Widget>[];
+  String reports_url = "https://exptech.com.tw/api/v3/earthquake/reports";
+  var data;
 
   @override
   void initState() {
@@ -31,6 +38,13 @@ class _EarthquakePage extends State<EarthquakePage> {
         setState(() {});
       }
     });
+    reports_clock = Timer.periodic(const Duration(seconds: 600), (timer) async {
+      await _updateReportsWidget();
+      if (mounted) {
+        setState(() {});
+      }
+    });
+    _updateReportsWidget();
     super.initState();
   }
 
@@ -48,6 +62,16 @@ class _EarthquakePage extends State<EarthquakePage> {
     }
   }
 
+  _updateReportsWidget() async {
+    try {
+      data = await get(reports_url);
+    } on TimeoutException catch (e) {
+      return;
+    } catch (e) {
+      return;
+    }
+  }
+
   @override
   void dispose() {
     clock.cancel();
@@ -56,22 +80,120 @@ class _EarthquakePage extends State<EarthquakePage> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.black,
-      body: SafeArea(
-        child: Column(
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      _List_children = <Widget>[];
+      if (_taiwan == null || _pic == null || _int == null || data == null) {
+        _List_children.add(const Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Padding(
-              padding: const EdgeInsets.all(15),
-              child: Stack(
-                  alignment: Alignment.center, // 对齐到中心
-                  children: [
-                    _taiwan,
-                    _pic,
-                    _int,
-                  ]),
+            Text(
+              "服務異常",
+              style: TextStyle(
+                  fontSize: 22, fontWeight: FontWeight.w100, color: Colors.red),
             ),
+            Text(
+              "稍等片刻後重試 如持續異常 請回報開發人員",
+              style: TextStyle(fontSize: 16, color: Colors.white),
+            )
           ],
+        ));
+      } else {
+        if (_page == 0) {
+          _List_children.add(Padding(
+              padding: const EdgeInsets.all(15),
+              child: Stack(
+                alignment: Alignment.center, // 对齐到中心
+                children: [
+                  _taiwan,
+                  _pic,
+                  _int,
+                ]),
+              ));
+        } else {
+          print(data);
+          _List_children.add(Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                "規模M "+data[0]["magnitudeValue"].toString(),
+                style: TextStyle(
+                    fontSize: 32, fontWeight: FontWeight.w100, color: Colors.white),
+              )
+            ],
+          ));
+        }
+      }
+    });
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: SafeArea(
+        child: GestureDetector(
+          onHorizontalDragEnd: (details) {
+            if (details.primaryVelocity! > 0) {
+              if (_page == 0) {
+                _page = 1;
+                setState(() {});
+              }
+            } else if (details.primaryVelocity! < 0) {
+              if (_page == 1) {
+                _page = 0;
+                setState(() {});
+              }
+            }
+          },
+          child: Column(
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  ElevatedButton(
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor:
+                          (_page == 1) ? Colors.blue[800] : Colors.transparent,
+                      elevation: 20,
+                      splashFactory: NoSplash.splashFactory,
+                      shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(30)),
+                    ),
+                    onPressed: () {
+                      setState(() {
+                        _page = 1;
+                      });
+                    },
+                    child: const Text(
+                      "地震報告",
+                      style: TextStyle(color: Colors.white),
+                    ),
+                  ),
+                  const SizedBox(width: 20),
+                  ElevatedButton(
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor:
+                          (_page == 0) ? Colors.blue[800] : Colors.transparent,
+                      elevation: 20,
+                      splashFactory: NoSplash.splashFactory,
+                      shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(30)),
+                    ),
+                    onPressed: () {
+                      setState(() {
+                        _page = 0;
+                      });
+                    },
+                    child: const Text(
+                      "即時測站",
+                      style: TextStyle(color: Colors.white),
+                    ),
+                  ),
+                ],
+              ),
+              Expanded(
+                child: ListView(
+                    padding: const EdgeInsets.all(0),
+                    children: _List_children.toList()),
+              ),
+            ],
+          ),
         ),
       ),
     );