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(),
      ],
    );
  }
}

其中七个页面的详细代码要是大家需要了我再发哈~
向阻疫一线人员致敬,愿这次疫情早日过去!
欢迎大家一起学习,一起讨论!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值