Flutter啥基础都没有咋入门？指南来啦：开启跨平台开发行程程序

欢迎大家来到IT世界,在知识的湖畔探索吧!

欢迎大家来到IT世界,在知识的湖畔探索吧!

Flutter 呢，是谷歌推出来的一个能构建跨平台应用程序的开源 UI 框架。它是基于 Dart 语言的，就是想给咱提供高效、现代的开发体验，能支持像 iOS、Android、Web、Windows、macOS、Linux 还有 Fuchsia 好多平台呢。

Flutter 的过去能追溯到谷歌内部孵化的那个叫 Sky 的项目，到 2015 年就正式改名叫 Flutter 啦。它用的是自绘 UI 加上原生的实现办法，跟其他跨平台的方案比起来有独特的好处。比如说，跟 H5 加上原生还有 JavaScript 开发加上原生渲染这类方案不一样，Flutter 既不用 WebView，也不用操作系统本来就有的那些控件，而是用自己高性能的渲染引擎来画 widget，这样就能保证在不同平台上的 UI 表现能高度保真、高度一致，而且画 UI 的性能跟原生控件差不多。

在跨平台开发这一块，Flutter 能让开发的人用一个代码库就做出能在好几个平台上用的应用程序，大大减少了开发和维护的活儿。它那个热重载的功能能让开发的人实时就看到代码改了之后的结果，不用重新启动整个应用程序，这样开发的速度就快了。Flutter 提供了好多丰富的组件、接口，开发的人能高效地给 Flutter 加上 native 扩展。另外，Flutter 还用了 Native 引擎来渲染视图，能给用户不错的体验。

跟竞争对手比一比，React Native 用的是 JavaScript 和 React 库，虽说跨平台的能力强，但是学习的难度可能比较大；Xamarin 用的是 C#，是基于.NET 框架的，能跟.NET 应用共享代码，适合.NET 的开发者；Ionic 是基于 HTML、CSS 和 JavaScript 的，适合快速搭建有原生体验的移动应用，不过性能可能比不上原生应用。而 Flutter 用的是自定义的渲染器，能很快地更新 UI，给用户提供流畅的体验，同时是基于 Dart 语言的，提供了很强的类型安全性，容易学也容易维护。 总的来说，Flutter 凭着自己独特的优势在跨平台开发这个领域占了重要的位置。

二、环境搭建

（一）安装准备

要安装 Dart 和 Flutter，首先需要安装一些必备工具。

1. 安装 Git：Git 是一个分布式版本控制系统，我们需要下载 Git 直接去 Git 官网配置，地址：https://git-scm.com。安装完成后可以方便地进行代码管理和版本控制。

2. 下载 Flutter SDK：可以从官方网站下载压缩包，如 https://flutterchina.club/setup-windows/，下载后解压，并加入到系统环境中。同时，为了提高下载速度，可以将 Path 环境变量修改为国内镜像，如设置环境变量export PUB_HOSTED_URL=https://pub.flutter-io.cn和export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn。

Flutter 的下载安装及环境变量配置方法如下：

• 将下载的压缩包解压到对应目录下，此路径不得含有中文字符和特殊字符。

• 找到解压后 flutter 目录下的 bin 目录，然后复制地址栏中的路径；然后右键我的电脑选择属性 -> 高级系统设置 -> 环境变量 -> 在系统变量中找到 Path，新建一条变量添加复制的路径。

（二）IDE 配置

1. VSCode 配置：

• 配置插件：需要在 vscode 中下载插件，找到 dart 和 flutter 插件并下载好，重新加载 vscode 就可以了。

• 运行 flutter 项目：运行命令是flutter run。但是 flutter 和 react-native 不同的是，flutter run 之后会检测是否连接设备，如果没有已连接的设备会不往下运行。可以通过flutter devices查看设备，当然如果配置了 android 的环境，也可以用 adb 命令，如adb devices。在项目运行起来后，在下方的终端会有一些输出信息，编译耗时、打 debug 包、安装等。还有有一些提示信息，当需要热加载的时候按r，需要重启应用按R。

2. Android Studio 配置：

• 安装插件：打开 AndroidStudio，在设置（setting）中打开 plugins，搜索安装两个插件 Dart 和 Flutter 插件。注意，安装完成后重启 AndroidStudio 重新加载插件。安装插件后，欢迎页会出现 Start a new Flutter project 的条目，表示成功安装了插件。

• 配置 SDK 路径：在 Setting 中的 Languages 中找到 Flutter，设置 Flutter SDK path 的路径；对于 Dart，在 Flutter 设置之后会自动定位到 Flutter 内含的 Dart。

至此，使用 VSCode 和 Android Studio 配置 Flutter 项目的方法介绍完毕。

三、Hello World 应用

（一）创建与运行

要弄出第一个 Flutter 应用，可以照下面这些步骤来操作。首先呢，把你选的集成开发环境（IDE）打开，比如说 Android Studio 。在 Android Studio 里，要是你刚打开这个软件，就能选 “Start a new Flutter project” ，点下一步；要是已经打开 Android Studio 了，那就选 File>New>New Flutter Project… 。接下来，选 Flutter Application ，点下一步，然后填上合适的 Project name ，再点下一步，最后点 finish 。等第一个应用的环境创建好以后，把 lib>main.dart 文件打开，这时候官方已经给咱们生成了一部分代码了。

咱们可以试试运行这个应用。一般来说，选打开一个手机模拟器，然后点运行按钮 “run” ，界面就能正常显示出来了。要是出问题了，比如说 flutter 一直卡在 Running Gradle task ‘assembleDebug’ ，能通过改项目里的 “android/build.gradle” 文件还有 Flutter 的配置文件来解决。具体步骤是这样的：

第一步，修改项目中的 “android/build.gradle” 文件。

repositories { // google() // jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } } dependencies { classpath 'com.android.tools.build:gradle:3.5.0' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" }

欢迎大家来到IT世界,在知识的湖畔探索吧!

欢迎大家来到IT世界,在知识的湖畔探索吧!allprojects { repositories { // google() // jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } } }

第二步，改 Flutter 的配置文件，这个文件是 “Flutter 安装目录 /packages/flutter_tools/gradle/flutter.gradle” 。

buildscript { repositories { //google() //jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public' } } dependencies { classpath 'com.android.tools.build:gradle:3.5.0' } }

当应用成功运行后，控制台会输出一些信息，手机或模拟器会显示应用的界面。

（二）代码解读

在 Flutter 应用中，入口点通常是 main () 函数。在 main () 函数中，会调用 runApp () 方法，传入一个 Widget 对象，这个对象通常是 MaterialApp 或 CupertinoApp。例如：

欢迎大家来到IT世界,在知识的湖畔探索吧!void main() { runApp(MyApp()); }

这里的 MyApp 是一个自定义的 StatelessWidget 或 StatefulWidget。

在 Flutter 里呀，类的继承关系挺复杂的。比如说，所有的 Widget 都从 Widget 类继承来的，而 Widget 类又有好几个子类，像 StatelessWidget 和 StatefulWidget 。StatelessWidget 就是那种没有状态的 Widget ，一旦创建好了，它的样子和行为就不会变了；StatefulWidget 呢就是有状态的 Widget ，能根据状态的变化来更新它的样子和行为。

以一个简单的 Flutter 应用为例，以下是对各个组件的作用分析：

• MaterialApp：它是一个符合 Material Design 规范的应用入口 Widget。它封装了应用程序实现 Material Design 所需要的一些 widget，如 AppBar、Scaffold 等。
• AppBar：通常位于应用程序的顶部，提供了应用程序的名称、导航按钮等。
• Scaffold：是一个全局的组件，可以构建标准的应用程序布局，包括 AppBar、Drawer、body 等。

• body：是 Scaffold 的主要内容区域，可以放置各种 Widget，如 Text、Image、Button 等。

• Text：用于显示文本，可以设置字体样式、对齐方式等。

• Button：用于触发用户操作的按钮，有多种类型，如 RaisedButton、FlatButton、OutlineButton 和 IconButton 等。

通过理解这些组件的作用和继承关系，可以更好地构建 Flutter 应用。

四、UI 设计与布局

（一）基础 Widget

在 Flutter 里头，UI 的构建主要靠 Widget 类来实现。基础的 Widget 给构建复杂的用户界面提供了基础。

比如说，Text Widget 是用来显示文本内容的，可以设置字体的大小、颜色、样式啥的属性。下面是一个简单的使用例子：

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( '基础文本示例', style: TextStyle(fontSize: 18, color: Colors.blue), ), ), ), ); } }

Container Widget 可以用来设置背景颜色、边框、内边距等属性，常用于布局和装饰。

欢迎大家来到IT世界,在知识的湖畔探索吧!import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Container( width: 200, height: 200, color: Colors.green, child: Text('容器内的文本'), ), ), ), ); } }

通过组合不同的基础 Widget，可以快速构建出简单而有效的用户界面。

（二）高级布局

1. Flex 布局

Flex 布局是 Flutter 中用于布局的高级方式。它允许开发者根据屏幕大小动态分配空间，实现响应式布局。

例如，以下代码创建了一个垂直方向的 Flex 布局，其中包含三个 Expanded Widget，每个 Expanded Widget 会自动填充剩余的空间。

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Column( children: [ Expanded( child: Container( color: Colors.teal, child: Center( child: Text('上部区域'), ), ), ), Expanded( child: Container( color: Colors.blue, child: Center( child: Text('中部区域'), ), ), ), Expanded( child: Container( color: Colors.pink, child: Center( child: Text('下部区域'), ), ), ], ), ), ); } } 

2. Grid 布局

Grid 布局用于更复杂的数据展示。可以通过 GridView.count 或 GridView.builder 创建网格布局。

以下是一个使用 GridView.count 的示例，展示了如何创建一个包含两列的网格布局：

欢迎大家来到IT世界,在知识的湖畔探索吧!import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { List<String> items = ['苹果', '香蕉', '橙子', '葡萄']; @override Widget build(BuildContext context) { return MaterialApp( home: GridView.count( crossAxisCount: 2, children: items.map((item) { return Card( child: Padding( padding: const EdgeInsets.all(8.0), child: Text(item), ), ); }).toList(), ), ); } }

3. Column 布局与自定义主题与样式

Column 布局用于垂直堆叠组件。可以结合自定义主题和样式，为应用程序赋予独特的外观。

以下是一个自定义主题的示例：

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text('自定义主题'), ), body: Column( children: [ Container( color: Colors.teal, child: Center( child: Text('标题区域'), ), ), Container( color: Colors.blueAccent, height: 100, child: Center( child: Text('内容区域'), ), ), ], ), ), ); } }

通过灵活运用这些高级布局方式，可以创建出美观、响应式的用户界面。

五、状态管理与事件处理

（一）Provider 状态管理库简介

Provider 是 Flutter 中官方推荐的状态管理工具之一，它基于 InheritedWidget 组件进行封装，使其更简单易用。Provider 拥有一套完整的解决方案，能够解决开发者在开发过程中遇到的绝大多数状态管理问题，让开发者能够开发出简单、高性能、层次清晰的应用。

（二）Provider 的优势

1. 简化的资源分配与处置：Provider 在资源分配和处置方面更加简洁高效，减少了开发者手动管理资源的工作量。

2. 懒加载：可以根据需要选择是否启用懒加载，提高应用的性能。

3. 创建新类时减少大量的模板代码：使用 Provider 可以大大减少创建新类时所需的模板代码，提高开发效率。

4. 支持 DevTools：方便开发者进行调试和优化。

5. 更通用的调用 InheritedWidget 的方式：通过 Provider.of/Consumer/Selector 等方式，更加方便地调用 InheritedWidget。

6. 提升类的可扩展性：整体的监听架构时间复杂度以指数级增长，如 ChangeNotifier，其复杂度为 O (N)。

（三）Provider 的提供者类型

1. Provider：最基础的 provider 组成，接收一个任意值并暴露它，但是并不会更新 UI。可以使用 create 参数创建新的对象模型，也可以使用 .value 将已经存在的对象实例暴露出来。在使用 create 和 update 回调时，回调函数默认是延迟调用的，也可以通过 lazy 参数来禁用这一行为。当 Provider 所在节点被移除的时候，会启动 dispose 回调，在这里可以释放对应的资源。

2. ChangeNotifierProvider：监听模型对象的变化，当数据改变时，它会重建 Consumer，更新 UI。它继承、混入 ChangeNotifier，调用 notifyListeners() 通知观察者。它不会重复实例化模型，除非在个别场景下。如果该实例已经不会再被调用，ChangeNotifierProvider 也会自动调用模型的 dispose() 方法。

3. FutureProvider：有一个初始值，接收一个 Future，并在其进入 complete 状态时更新依赖它的组件。FutureProvider 只会重建一次，默认显示初始值，Future 进入 complete 状态时，会更新 UI。

（四）Provider 的使用示例

以一个简单的计数器应用为例，展示 Provider 的使用方法。

1. 创建存储数据的模型类：

欢迎大家来到IT世界,在知识的湖畔探索吧!class CounterModel with ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); } }

2. 程序入口设置：

import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (ctx) => CounterModel(), child: MaterialApp( home: CounterPage(), ), ); } } class CounterPage extends StatelessWidget { @override Widget build(BuildContext context) { final counter = Provider.of<CounterModel>(context); return Scaffold( appBar: AppBar( title: Text('Counter Example'), ), body: Center( child: Text('${counter.count}'), ), floatingActionButton: FloatingActionButton( onPressed: () => counter.increment(), child: Icon(Icons.add), ), ); } }

在这个示例中，我们使用 ChangeNotifierProvider 来提供 CounterModel 对象，在 CounterPage 中通过 Provider.of 获取 CounterModel 对象，并在按钮点击时调用 increment 方法增加计数器的值，同时自动更新 UI。

（五）Consumer 和 Selector 的使用

1. Consumer 呢：简单把 Provider.of 给封装了，有两个好处。一个是有时候咱们没法拿到合适的 BuildContext ，比如说 provider 是在 buildContext 下面构建的，就得靠 Consumer 帮咱们拿到。另一个是能优化性能，要是只希望一部分组件监听状态变化，就能用 Consumer 把这些组件包起来，免得没必要的重建。
2. Selector ：能够实现局部刷新。通过传进去一个 shouldRebuild 参数，或者根据 widget.selector (ctx) 的返回值来判断是不是需要更新 UI 。要是没有 shouldRebuild 参数，就根据 widget.selector (ctx) 的返回值看看是不是跟旧值一样，不一样就更新 UI 。
3. 总的来讲，Provider 状态管理库给 Flutter 应用的状态管理提供了一种又高效又简洁的解决办法，通过合理地用 Provider 的不同类型，还有 Consumer 、Selector 这些工具，就能更好地管理应用的状态，把开发效率和应用性能都提高。

六、学习的资源和路线

（一）资料收集

• 官方文档：Flutter 的官方文档是学 Flutter 的重要资源，这文档详细讲了 Flutter 的各种特点、组件还有 API 。能在官方网站上找到，地址是：https://flutter.dev/docs 。官方文档的内容又全又准，而且还会跟着 Flutter 的更新一直更新。
• 在线课程：网上有好多免费和花钱的在线课程，能帮你很快地学 Flutter 开发。比如说，慕课网、B 站这些平台上都有相关的课。这些课一般都是经验丰富的开发者录的，讲得很详细，适合不同水平层次的学习者。
• 书籍：有好多关于 Flutter 开发的书，能帮你深入地学 Flutter 开发。比如说《Flutter 实战》《Flutter 从入门到实战》这些。书能系统地介绍 Flutter 的知识，方便你在没网的时候学习。
• 社区：加入 Flutter 开发的社区，能跟其他开发者交流交流经验，得到帮助。比如说，Flutter 中文社区、GitHub 上的 Flutter 项目等等。在社区里，你能提问题、分享经验、参与讨论，还能知道最新的 Flutter 动态和技术趋势。

（二）学习进度

• 第一阶段（1 到 2 周）：得学学怎么搭建 Flutter 开发环境，搞清楚 Flutter 应用程序的架构，学学用 Flutter 那些基础的 UI 组件，像 Text、Image、Button 啥的。能照着官方文档里的入门教程还有在线课程去学，同时试着弄几个简单的界面出来。
• 第二阶段（2 到 3 周）：好好学学 Flutter 的布局办法和高级组件，像 Flex 布局、Grid 布局、Column 布局这些。把状态管理和事件处理掌握好，学学用 Provider 状态管理库。能通过实际的项目和案例去学，让自己的开发能力提高提高。
• 第三阶段（2 到 3 周）：学学 Flutter 的网络请求和数据处理，像 HTTP 请求、JSON 解析这些。了解了解 Flutter 的动画处理和交互设计，像 Animation、GestureDetector 这些。能通过开发一个小的应用程序把学的知识综合用一用。
• 第四阶段（1 到 2 周）：学学 Flutter 的持久化存储和本地化处理，像 SharedPreferences、intl 这些。把 Flutter 的路由管理和导航掌握好，学学用 Navigator 进行页面之间的导航。能把之前开发的应用程序优化优化、完善完善。

（三）评估与反思

参加社区讨论和交流：加入 Flutter 开发的社区，参与讨论和交流，能知道其他开发者的学习经验和办法。能在社区里提出自己的问题，得到别人的帮忙和建议。

定期总结和反思：定期总结总结自己的学习进度和成果，反思反思自己的学习方法和过程。能把自己学习过程里碰到的问题和解决办法记下来，方便以后参考。

调整学习计划：依照自己评估和反思的结果，赶紧调整学习计划。要是发现自己某些方面掌握得不好，那就加强学学；要是发现学习进度太慢，那就适当加快学习速度。

反正，学 Flutter 得有耐心、有毅力，不停地实践、不停地探索。通过合理用学习资源、规划好学习进度、自己评估和反思，就能更好地掌握 Flutter 开发技术，把自己的开发能力提上去。

七、应用实际操作和未来的展望

（一）项目实战案例分享

1. 电商应用：用 Flutter 开发一个电商应用能充分显示出它跨平台的优点。在这个项目里，能使用 Flutter 丰富的组件库来搭建用户界面，像商品列表、购物车、订单页面啥的。通过网络请求拿到商品的数据，再用状态管理库 Provider 来管数据的状态。比如说，当用户把商品加到购物车里的时候，购物车的数量和总价能实时更新，同时 UI 也会跟着刷新。在布局这块，可以用 Flex 和 Grid 布局来展示商品列表和分类页面，让界面更好看、更能响应不同情况。另外，还能集成支付功能，实现安全的在线交易。
2. 社交应用：Flutter 也特别适合开发社交应用。能使用 Firebase 这类后端服务来实现用户注册、登录、消息推送这些功能。在 UI 设计上，能用 Flutter 的自定义主题和样式打造出独特的社交界面。比如说，用 AppBar 和 Drawer 来搭建导航栏和侧边栏，方便用户切换不同功能的页面。用 ListView 和 Card 组件来展示用户的动态和好友列表，用 Image 和 Icon 组件来展示用户头像和表情符号。通过状态管理库 Provider ，能实现实时更新用户的状态和消息通知，提升用户的体验。
3. 新闻应用：开发一个新闻应用能展示出 Flutter 处理数据和布局的能力。能使用网络请求获取新闻数据，再用 JSON 解析来处理数据。用 ListView 和 Card 组件来展示新闻列表，用 Image 和 Text 组件来展示新闻标题和摘要。在布局方面，可以用 Column 和 Row 布局来构建新闻详情页面，让内容更清楚、更好读。通过状态管理库 Provider ，能实现实时更新新闻数据和阅读进度，方便用户阅读和管理新闻。

（二）Flutter 这玩意儿的前景和发展的走向

1. 跨平台开发的需求变多啦：随着移动设备越来越普及、种类越来越多，跨平台开发的需求会一直增加。Flutter 作为一种效率高、能力强的跨平台开发框架，在以后的移动应用开发里会起大作用。它能帮开发者很快地弄出高质量的应用程序，还能同时把开发成本降下来，把维护的难度减小。
2. 技术一直创新：Flutter 团队会不停地弄出新功能、做改进，来把开发效率提高，把用户体验变好。比如说，Flutter for Web 不停地完善，能让开发者做出跨平台的 Web 应用程序，把 Flutter 的应用范围进一步扩大。另外，Flutter 还会加强跟其他技术的结合，像 Firebase、AWS Amplify 这些，给开发者更多的选择，也更方便。
3. 社区变得更强大，生态系统更完善：Flutter 的社区可活跃啦，开发者们不停地贡献新的插件、工具和库，让 Flutter 的生态系统更丰富。随着社区越来越壮大，Flutter 的技术支持和资源会更丰富，给开发者提供更好的学习和开发的环境。同时，社区的反馈和贡献也会推着 Flutter 一直发展、一直进步。
4. 企业的采用和推广：越来越多的企业开始用 Flutter 来做移动应用开发，这会进一步推着 Flutter 发展和普及。企业的采用会带来更多实际的项目经验和例子，给其他开发者做参考、借鉴。同时，企业的推广也会把 Flutter 的知名度和影响力提高，吸引更多的开发者进到 Flutter 的生态系统里。
5. 反正，Flutter 在跨平台开发里有很广的前景和发展的趋势。通过项目的实际操作和不停地学习，开发者能更好地掌握 Flutter 开发的技术，为以后的移动应用开发做好准备。