Flutter應用:實時疫情查詢APP

功能描述:

最近用Flutter實現了一款簡單的實時疫情查詢的APP。
能夠實現2019-nCoV全中國疫情地圖實時顯示,各省市實時疫情數據查詢,同行程查詢,區域定位查詢,預防措施、在線醫療等網絡資源聚合。

用到的插件有:

 cupertino_icons: ^0.1.2
 flutter_inappwebview: ^2.1.0+1

主界面實現

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:ncov2019/route.dart';
import 'package:ncov2019/Sidebar.dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController webView;
  String url = "";
  double progress = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,   //去掉Debug圖標
      theme: ThemeData(
          primarySwatch: Colors.indigo
      ),
      onGenerateRoute: onGenerateRoute,
      home: Scaffold(
        appBar: AppBar(
          title: Text('2019-nCoV今日疫情', textAlign: TextAlign.center,),
          centerTitle: true,
          actions: <Widget>[                            //導航後面的圖標
            IconButton(icon: Icon(Icons.refresh,),
                onPressed: () {
                  webView.reload();
                }
            ),
          ],
        ),
        body: Container(
            child: Column(children: <Widget>[
              Container(
                  child: progress < 1.0
                      ? LinearProgressIndicator(value: progress)
                      : Container()),
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialUrl: "https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_3#tab0",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                        inAppWebViewOptions: InAppWebViewOptions(
                          debuggingEnabled: true,
                        )),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller,
                        String url) {
                      setState(() {
                        this.url = url;
                      });
                    },
                    onLoadStop:
                        (InAppWebViewController controller, String url) async {
                      setState(() {
                        this.url = url;
                      });
                    },
                    onProgressChanged:
                        (InAppWebViewController controller, int progress) {
                      setState(() {
                        this.progress = progress / 100;
                      });
                    },
                  ),
                ),
              ),
            ])),
        drawer: Builder(
          builder: (context) =>
              Drawer(
                child: Sidebar(),
              ),
        ),
      ),
    );
  }
}

路由跳轉

import 'package:flutter/material.dart';
import 'package:ncov2019/Pages/NowPage.dart';
import 'package:ncov2019/Pages/PreventPage.dart';
import 'package:ncov2019/Pages/LocalPage.dart';
import 'package:ncov2019/Pages/TrafficPage.dart';
import 'package:ncov2019/Pages/CommunityPage.dart';
import 'package:ncov2019/Pages/StudyPage.dart';
import 'package:ncov2019/Pages/SourcePage.dart';


final routes = {
  '/Local': (context) => LocalPage(),                 //本地疫情
  '/Now': (context) => NowPage(),                 //最新進展
  '/Prevent': (context) => PreventPage(),         //預防治療
  '/Traffic': (context) => TrafficPage(),                 //同行程查詢
  '/Community': (context) => CommunityPage(),                 //同小區查詢
  '/Study': (context) => StudyPage(),                 //在家學習
  '/Source': (context) => SourcePage(),                 //資源搜索
};


// ignore: top_level_function_literal_block
var onGenerateRoute = (RouteSettings settings) {
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context));
      return route;
    }
  }
};

側邊欄實現

import 'package:flutter/material.dart';

class Sidebar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        new Image.asset("lib/banner.jpg",fit: BoxFit.fill,height: 120.0,),
        ListTile(
          leading: CircleAvatar(
            child: Icon(Icons.language),
          ),
          title: Text("本地疫情"),
          onTap: () => Navigator.pushNamed(context, "/Local"),
        ),
        Divider(),
        ListTile(
          leading: CircleAvatar(
            child: Icon(Icons.assessment),
          ),
          title: Text("最新進展"),
          onTap: () => Navigator.pushNamed(context, '/Now'),
        ),
        Divider(),
        ListTile(
          leading: CircleAvatar(
            child: Icon(Icons.local_hospital),
          ),
          title: Text("預防措施"),
          onTap: () => Navigator.pushNamed(context, '/Prevent'),
        ),
        Divider(),
        ListTile(
          leading: CircleAvatar(
            child: Icon(Icons.train),
          ),
          title: Text("同行程查詢"),
          onTap: () => Navigator.pushNamed(context, "/Traffic"),
        ),
        Divider(),
        ListTile(
          leading: CircleAvatar(
            child: Icon(Icons.room),
          ),
          title: Text("同小區查詢"),
          onTap: () => Navigator.pushNamed(context, "/Community"),
        ),
        Divider(),
        ListTile(
          leading: CircleAvatar(
            child: Icon(Icons.edit),
          ),
          title: Text("在家學習"),
          onTap: () => Navigator.pushNamed(context, "/Study"),
        ),
        Divider(),
        ListTile(
          leading: CircleAvatar(
            child: Icon(Icons.search),
          ),
          title: Text("資源搜索"),
          onTap: () => Navigator.pushNamed(context, "/Source"),
        ),
        Divider(),
      ],
    );
  }
}

其中七個頁面的詳細代碼要是大家需要了我再發哈~
向阻疫一線人員致敬,願這次疫情早日過去!
歡迎大家一起學習,一起討論!

發佈了16 篇原創文章 · 獲贊 16 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章