Flutter实战小项目(5)----项目的最终整合

前一段时间因为比较忙,就没有多打理这个博客,有点抱歉。今天我看了一下剩下的,也没有什么多讲的了,就一次性的给大家说完了,然后我会附上github的源码地址。有想学习的可以慢慢的去跟着敲一遍。你可以全部拉下来学习。但是你可能看不懂很多逻辑。对于我来说,我还是建议如果大家想学习,可以跟着我这个实战项目的逻辑来走一遍。这样会比较清晰。而不是自己每次都在文件中跳转!

home首页的设置

我们知道,我们在首页一般回放一些处理的方式。比如版本升级这样的东西。好了在这里就要多说一下了。因为这个东西是通用的,就跟我们的工具类封装一样,可以CV用。好了在这里我就说一下我们检查更新所用到的插件库。

插件名插件属性
package_infoapp版本和平台信息
url_launcher打开AppStore更新IOS版安装包
open_file打开安装包进入安装页面
path_provider配置安装包下载路径
dio接口最新版本数据、下载安装包

以上就是我们需要用的插件库。

这就是我们的基本代码,你也可以按照自己的需求来改,当然也可以直接复制。

checkVersion() async {
    if (Platform.isIOS) return;

    final packageInfo = await PackageInfo.fromPlatform();

    VersionModel model = await versionViewModel.getData();

    int currentVersion = int.parse(removeDot(packageInfo.version));

    int netVersion = int.parse(removeDot(model.appVersion));

    if (currentVersion >= netVersion) {
      debugPrint('当前版本是最新版本');
      return;
    }

    showDialog(
      context: context,
      builder: (ctx2) {
        return UpdateDialog(
          version: model.appVersion,
          updateUrl: model.downloadUrl,
          updateInfo: model.updateInfo,
          isForce: model.force,
        );
      },
    );
  }

其余的就是项目整合

这是我们的首页就是根的代码:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_app_pneumonia/api/version_model.dart';
import 'package:flutter_app_pneumonia/api/version_view_model.dart';
import 'package:flutter_app_pneumonia/commom/check.dart';
import 'package:flutter_app_pneumonia/config/const.dart';
import 'package:flutter_app_pneumonia/pages/home/home_page.dart';
import 'package:flutter_app_pneumonia/pages/lore/lore_page.dart';
import 'package:flutter_app_pneumonia/pages/protect/protect_page.dart';
import 'package:flutter_app_pneumonia/pages/rumor/rumor_page.dart';
import 'package:flutter_app_pneumonia/widget/dialog/update_dialog.dart';
import 'package:flutter_app_pneumonia/widget/root_tabbar.dart';
import 'package:package_info/package_info.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  @override
  void initState() {
    super.initState();
    checkVersion();
  }

  /// 检查更新 [check update]
  checkVersion() async {
    if (Platform.isIOS) return;

    final packageInfo = await PackageInfo.fromPlatform();

    VersionModel model = await versionViewModel.getData();

    int currentVersion = int.parse(removeDot(packageInfo.version));

    int netVersion = int.parse(removeDot(model.appVersion));

    if (currentVersion >= netVersion) {
      debugPrint('当前版本是最新版本');
      return;
    }

    showDialog(
      context: context,
      builder: (ctx2) {
        return UpdateDialog(
          version: model.appVersion,
          updateUrl: model.downloadUrl,
          updateInfo: model.updateInfo,
          isForce: model.force,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    List<TabBarModel> pages = <TabBarModel>[
      new TabBarModel(
        title: '首页',
        icon: new LoadImage("assets/images/bottom_home.png", false),
        selectIcon: new LoadImage("assets/images/bottom_home.png", true),
        page: new HomePage(),
      ),
      new TabBarModel(
        title: '辟谣',
        icon: new LoadImage("assets/images/bottom_rumor.png", false),
        selectIcon: new LoadImage("assets/images/bottom_rumor.png", true),
        page: new RumorPage(),
      ),
      new TabBarModel(
        title: '防护合辑',
        icon: new LoadImage("assets/images/bottom_protect.png", false),
        selectIcon: new LoadImage("assets/images/bottom_protect.png", true),
        page: new ProtectPage(),
      ),
      new TabBarModel(
        title: '疾病知识',
        icon: new LoadImage("assets/images/bottom_lore.png", false),
        selectIcon: new LoadImage("assets/images/bottom_lore.png", true),
        page: new LorePage(),
      ),
    ];
    return new RootTabBar(pages: pages, currentIndex: 0);
  }
}

class LoadImage extends StatelessWidget {
  final String img;
  final bool isSelect;

  LoadImage(this.img, [this.isSelect = false]);

  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: EdgeInsets.only(bottom: 2.0),
      width: 30.0,
      height: 30.0,
      child: new Image.asset(
        img,
        fit: BoxFit.cover,
        gaplessPlayback: true,
        color: isSelect ? fixedColor : mainTextColor,
      ),
    );
  }
}

其余的tab页我就不发了。

最后我附上github地址:

链接: 点我就可原地TP到达.


版权声明:本文为mubowen666原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。