Flutter 完整示例

最新推荐文章于 2025-03-09 19:32:14 发布

初壹十五a

最新推荐文章于 2025-03-09 19:32:14 发布

阅读量3.4k

点赞数 3

分类专栏： Android Flutter 程序员文章标签： Flutter Android Android开发程序员

本文链接：https://blog.csdn.net/Android_SE/article/details/100773959

版权

本文详述了Flutter项目的开发流程，包括代码分层、主题风格设定、插件使用、路由管理、网络数据交互、界面布局和刷新，以及开发中的注意事项。重点介绍了swiper插件的集成与使用，以及路由的静态和动态跳转方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经过这一段对 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 : 动画轮播效果