半身风雪

本栏目我们将完成一个商城项目的架构搭建，并完善中间的所有功能，总页面大概200个，如果你能看完整个栏目，你肯定能独立完成flutter 项目的整体研发工作。首先新建一个叫blog_mall 的项目，能看到这里的，我想都知道该怎么创建项目了，这里就不再赘述。本篇文章很短，内容也很少，但是有一点，当你去新建项目的时候，main 文件就这么写，觉得没错，说不定你的管理还给你加个鸡腿呢。

最近几年，一直都在从事flutter 相关的工作，也一直想写一个完整的项目架构，从零到一，由于自己一直没有时间，现在想想，还是先慢慢的开始做。本篇的简介，就作为这个系列文的起始篇幅，希望大家能够喜欢。Flutter是一个使用Dart编程语言的UI框架，它的独特之处在于它采用了一种称为"widget"的组件模型来构建用户界面。Flutter的Widget是不可变的，意味着一旦创建，它们不会改变。这种不可变性有助于构建可预测、可维护和高性能的应用程序。

在 Flutter 中，你可以通过创建自定义小部件（Widgets）来构建复杂的用户界面。自定义小部件允许你封装特定的功能和样式，以便在应用中重用，并使界面更具可维护性。通过这些步骤，你就可以在 Flutter 应用中创建和使用自定义小部件。你可以根据需求在自定义小部件内部添加状态、属性、样式等，从而实现灵活且可复用的界面构建。

当我们构建复杂的移动应用时，有效的状态管理是至关重要的，因为应用的不同部分可能需要共享数据、相应用户交互并保持一致的状态。Flutter 中有多种状态管理解决方案，下面详细介绍一些常见的状态管理方式：Provider、Bloc 和 Redux、getx 等等一些管理工具。无论选择哪种状态管理方式，都需要根据应用的规模、复杂性和开发团队的偏好来做出决定。这些状态管理模式的核心目标是有效地管理应用的状态，使代码结构清晰、易于维护，并提供良好的开发体验。

陆陆续续已经写了60多篇的flutter 的文章了，本篇文章就来说说我对flutter 的简单看法Flutter是一种由谷歌开发的开源用户界面（UI）工具包，用于在多个平台上构建高性能、美观和流畅的移动应用程序。它使用Dart编程语言，并提供丰富的UI组件和工具，可以快速构建现代化的应用程序界面。总的来说，Flutter具有跨平台、响应式UI、热重载、自绘引擎、丰富的UI组件、开发效率、强大的社区支持和优秀的性能等特点和优势，使开发人员能够更轻松、高效地构建漂亮、流畅和高性能的应用程序。

本文档介绍了如何通过二次封装 Flutter Dio 组件来简化网络请求的过程。通过封装，我们可以提高代码复用性，简化调用方式，并添加一些常用的功能，使网络请求更加易于管理和维护。通过对 Flutter Dio 组件进行二次封装，我们可以提高代码的复用性和可维护性，简化网络请求的调用过程。在封装过程中，我们可以添加拦截器、处理错误等功能，使网络请求更加灵活和可靠。希望本文档能够帮助你了解如何二次封装 Flutter Dio 组件，并在实际项目中应用。

这是一个简单的单例模式的演示，你可以根据实际需要和具体场景进行扩展和修改。

flutter 的生命周期大体可分为三大阶段：初始化阶段、状态变化阶段、销毁阶段。然而在这三个阶段中，又分如下两个部分：1. widget 生命周期2. APP 生命周期

在flutter 中，为我们提供了一个可折叠的组件 ExpansionTile ，而且此组件还比较容易扩展，本篇文章将记录扩展的一种，card 可折叠的名片列表。

在日常开发中，switch 开关组件，也是比较常用的组件的，本篇文章将记录switch 简单使用及属性。

1、按钮Material 组件库中，为我们提供了多种按钮组件，如 ElevatedButton 、TextButton 、 OutlinedButton 等另外，Material 库中所有的按钮组件都有一个相同的特性，那就是水波纹动画效果，还有一个onPressed 属性，用来设置按钮的点击回调。ElevatedButton 即漂浮按钮，它带有阴影和灰色的背景，按下后，阴影会变大，如下图ElevatedButton 按钮的使用非常的简单 ElevatedButton(

1、TextText 用于显示一个简单的样式文本，包含一些控制文本的显示样式 Text( "Hello Word", textAlign: TextAlign.left, ), Text( "Hello Word" * 40, overflow: TextOverflow.ellipsis, ),

1、图片flutter 中，我们可以通过Image 组件来加载并显示图片，Image 的数据源可以是asste、文件、内存以及网络。下面我们来分别演示一下，如何从asset 和网络加载图片1、在工程根目录创建一个asset 目录，将图片拷贝进去。2、在pubspec.yml 中的flutter 部分，添加如下内容 assets: - asset/3、加载图片 Image( image: AssetImage("asset/starr

Material 组件库中提供了输入框组件TextField和表单组件Form。下面我们分别介绍一下。1、TextFieldTextField 用于文本输入，它提供了很多属性，我们先简单的介绍一下主要属性，然后通过几个实例来演示一下关键的属性 const TextField({ Key? key, this.controller, this.focusNode, this.decoration = const InputDecoration(), TextIn

本篇文章将记录Form 表单的使用，在文末还会记录一个特别实用的自动移动聚焦点 的方法。

AnimatedOpacity 是flutter 众多动画组件中可以实现渐入渐出的组件，在很多时候，它可以实现一些绚丽的效果。

Wrap 组件是一个可自动换行的组件，它可以代替Gridview 组件的使用，也可以非常轻松的达到适配的效果

在使用Spacer() 的时候，有一点需要注意的是，内部组件的约束宽高，大于当前屏幕的时候，会适配的报错。

Chip 组件，是一个简单而精美的组件，但是它有几个变体，例如InputChip、ChoiceChip、FilterChip 和ActionChip。记录一下

在之前，创建一个图文无连边框的组件的时候，往往需要写一个事件组件，包含一个row 行组件，然后在其中写入图片和文本的组件，等复杂的操作，最近正好发现了一个无边框图文按钮组件，在此记录一下 TextButton.icon()

第一步：安装Cli脚手架我们通过命令flutter pub global activate get_cli 进行脚手架的全局安装，本文以Mac OS为例。fanhudeMacBook-Pro:~ jm$ flutter pub global activate get_cliResolving dependencies...+ _fe_analyzer_shared 26.0.0 (30.0.0 available)+ analyzer 2.3.0 (2.7.0 available)+ ansic

1、 环境检查如果flutter 没有配置，请参考 https://editor.youkuaiyun.com/md/?articleId=123640336，配置相关环境已配置，在终端输入 flutter doctor 检测环境，输出如下fanhudeMacBook-Pro:~ XXX$ flutter doctorDoctor summary (to see all details, run flutter doctor -v):[✓] Flutter (Channel stable, 2.10.3, o

P001 搭建Flutter开发环境使用镜像由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn在Windows上搭建Flutter开发环境获取Flutter SDK去flutter官网下载其最

P002 创建第一个flutter项目1.创建并运行一个Flutter App工程打开Android studio（简称AS）>File>New>New Flutter Project选择一个模拟器，点击旁边的run 按钮第一次编译项目时间比较长，耐心等待即可，运行完成 如下图2.项目基本文件目录Flutter项目主要分为Android，iOS，lib，pubspec.yaml这四个，其中lib下就是用来flutter开发的，我们的dart文件就放在这里，pubspec.

众所周知，dart 是一门单继承的语言，但是我们在日常开发中，会遇到各种各样的问题，比如，我们需要在dart 中实现多继承，那么改怎么办呢？本篇文章，我将和大家聊聊关于dart 中的继承，接口，混合的相关知识。

​ Flutter中的动画系统基于对象的，和之前的手势不同，它不是一个Widget，这是因为对象本身和UI渲染没有任何关系。Animation是一个抽象类，就相当于一个定时器，它用于保存动画的插值和状态，并执行数值的变化。widget可以在函数中读取对象的当前值， 并且可以监听动画的状态改变。​ AnimationController用于控制动画，它包含动画的启动、停止 、反向播放 等方法。AnimationController会在动画的每一帧，就会生成一个新的值。默认情况下，AnimationCont

​ 国际惯例，使用Dart完成一个：“Hello，World!”变量​ 变量是一个引用,未初始化的变量值是null。​ 可以用Object、var与dynamic声明的变量赋任何类型的值，但是背后的原理却是非常不同。1、Object： 与Java一样Object是所有类的基类，Object声明的变量可以是任意类型。（在 Dart 中 甚至连 数字、方法和 都是对象，比如int。）2、var： 声明的变量在赋值的那一刻，决定了它是什么类型。3、dynamic： 不是在编译时候确定实际类型的, 而是

Dart 代码库中有大量返回 或 对象的函数，这些函数都是 的，它们会在耗时操作**（比如I/O）**执行完毕前直接返回而不会等待耗时操作执行完毕。 和 关键字用于实现异步编程，并且让你的代码看起来就像是同步的一样。必须在带有 async 关键字的 异步函数 中使用 await：使用 try、catch 以及 finally 来处理使用 await 导致的异常：你可以在异步函数中多次使用 await 关键字。例如，下面代码中等待了三次函数结果：如果在使用 await 时

2、操作符运算符是有着特殊名称的实例方法。dart 中有以下名称定义的运算符。3、Getter 和 SetterGetter 和 Setter 是一对用来读写属性的特殊方法，上面说过实例对象的每一个属性都有一个隐式的Getter 方法，如果为非final 属性的话，还会有一个Setter 方法，你可以使用 和 关键字为额外的属性添加 Getter 和 Setter 方法：使用 Getter 和 Setter 的好处是，你可以先使用你的实例变量，过一段时间再将它们包裹成方法且不需要改动

Dart 还支持自增自减操作。2、关系运算符下表列出了关系运算符及含义：要判断两个对象 x 和 y 是否表示相同的事物使用 == 即可。（在极少数情况下，可能需要使用 identical() 函数来确定两个对象是否完全相同）。下面是 == 运算符的一些规则：当 x 和 y 同时为空时返回 true，而只有一个为空时返回 false。返回对 x 调用 == 方法的结果，参数为 y。（像 == 这样的操作符是对左侧内容进行调用的。详情请查阅 操作符。）3、类型判断运算符 运算符是在运行时判断对

​ Widget的功能是“描述一个UI元素的配置数据”，Widget其实并不是表示最终绘制在设备屏幕上的显示元素，而只是显示元素的一个配置数据。实际上，Flutter中真正代表屏幕上显示元素的类是，也就是说Widget只是描述的一个配置。一个Widget可以对应多个，这是因为同一个Widget对象可以被添加到UI树的不同部分，而真正渲染时，UI树的每一个节点都会对应一个对象。​和是的基础组件，日常开发中自定义都是选择继承这两者之一。也是在往后的开放中，我们最多接触的Widget：​ ：无状态的，展示信息，面

如上所示 所有未初始化的实例变量其值均为null使用 ?. 代替. 可以避免因为左边表达式为null 而导致的问题 (这个是flutter 2.0 之后新增的空认证功能)如下代码所示 setter 写入方法, getter 读取方法2、构造函数下面两段代码，执行的结果都是获取的对应的x 的值3、常量构造函数一些类提供了常量构造函数。使用常量构造函数，在构造函数名之前加 关键字，来创建编译时常量时：下面代码中的 p1 和 p2 的执行结果是true，

​ 路由(Route)在移动开发中通常指页面（Page），在Android中通常指一个Activity。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。这和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。命名路由​ 命名路由（Named Route）即给路由起一个名字，然后可以通过路由名字直接打开新的路由。这为路由管理带来了一种直观、简单的方式

如果你查看数组的 API 文档，你会发现数组 的实际类型为 List。 符号表示数组是一个 泛型（或 参数化类型） 通常 使用一个字母来代表类型参数，比如 和 等等。泛型常用于需要要求类型安全的情况，但是它也会对代码运行有好处：在上述代码中，T 是一个替代类型。其相当于类型占位符，在开发者调用该接口的时候会指定具体类型。3、使用类型参数化的构造函数4、泛型集合以及它们所包含的类型5、限制参数化类型有时使用泛型的时候，你可能会想限制可作为参数的泛型范围，也就

玩转 自定义组件Plugin前言什么是插件package的种类开发步骤开发 Dart packages开发 plugin packagesStep 1: 创建 packageStep 2: 实现包 package添加文档发布 packagesPlugin 通信原理Platform Channel：前言在Flutter中，如果我们需要打印日志，如果不进行自定义，我们只能使用自带的print()或者debugPrint()方法进行打印，但是这两种打印，日志都是默认Info层级的日志，很不友好，所以如果需要