Flutter 完整示例

经过这一段对 Flutter 的了解和接触，掌握如何完整使用 Flutter 开发一个项目。实际上，在 Flutter 中，一切皆 widget，我们的界面都是由各种 widget 堆叠出来的。

一个 Flutter 工程涉及以下几个要点：

• 工程项目代码分层
• 主题风格
• 插件
• 路由
• 网络数据交互
• 界面布局及刷新
  

一、工程项目代码分层

一个正式的工程项目，它的代码必须做到分层，代码的分层体现了开始者的架构能力。

Flutter 工程的主要工作 lib 目录及 pubspec.yaml :

• main.dart:Flutter 的入口函数
• loading.dart:启动页，一般生存周期为3-5秒
• app.dart:工程主文件
• conf : 配置文件目前或一些宏定义数据文件目录
• model : 数据模型目录
• pages : 各 UI ，即 Widget 文件
• service ： 网络请求目录
• style : 自定义风格文件（颜色、字体等）
• utils : 工具目录

代码分层设计设计的合不合理，直接影响代码的可维护性和稳定性。

二、主题风格

Flutter 默认的主题是 蓝白 的风格，其他主题则需要配置。依项目而定，根据当前需要，配置一个 红灰 风格：

#main.dart
void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Flutter实战',
  //自定义主题
  theme: mDefaultTheme,

));

//自定义主题
final ThemeData mDefaultTheme = ThemeData(
  primaryColor: Colors.redAccent,
);

Colors.redAccent 为系统主题，在 colors.dart 中定义：

static const MaterialAccentColor redAccent = MaterialAccentColor(
    _redAccentValue,
    <int, Color>{
      100: Color(0xFFFF8A80),
      200: Color(_redAccentValue),
      400: Color(0xFFFF1744),
      700: Color(0xFFD50000),
    },
  );
  static const int _redAccentValue = 0xFFFF5252;

当然也可以自定义一些风格或颜色，在工程 style 中 color.dart：

//产品颜色
class ProductColors{
  static const Color bgColor = Color(0xFFFFFFFF);
  static const divideLineColor = Color.fromRGBO(245, 245, 245, 1.0);
  static const typeColor = Color.fromRGBO(182, 9, 9, 1.0);
  static const piontColor = Color.fromRGBO(132, 95, 63, 1.0);
}

三、插件

开发者不可能对每个功能都自已造轮子，选取合适的轮子，对于项目来说，可以达到事半功倍的效果。

3.1 添加第三方库

打开 pubspec.yaml 文件添加三方库，可以 在 https://pub.dev/flutter （需要翻墙）上找到许多开源软件包

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  http: ^0.12.0
  flutter_webview_plugin: ^0.3.0
  flutter_swiper: 1.1.4

• http : 网络请求插件
• flutter_webview_plugin ： 一些静态页面的加载，使用webview
• flutter_swiper : 动画轮播效果

3.2 导入

swiper 插件

点击 Packages get 获取刚添加的包。