全网最详细的Flutter开发入门基础教程，Flutter跨平台终极之选

已于 2024-03-01 21:53:59 修改
阅读量505 收藏
点赞数
文章标签： flutter
于 2023-08-22 14:54:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Code1994/article/details/132426938
版权

跨平台方案分析

亲身体验从最开始的Cordov/AppCan，到RN/Weex，再到现在的Flutter。跨平台开发始终是任意年代不可逃避的话题，但是之前的技术原理无非是基于两种：

混合开发的web容器时代

  • 为了解决原生开发的高成本、低效率，出现了Hybrid混合开发

  • 原生中嵌入依托于浏览器的WebView

  • Web浏览器中可以实现的需求在WebView中基本都可以实现

  • 但是Web最大的问题是，它的性能和体验与原生开发存在肉眼可感知的差异

  • 因此并不适用于对性能和用户体验要求较高的场景

以RN和Weex为代表的跨平台开发

  • 将H5标签渲染层原生控件
  • 用户体验更接近于原生了
  • 由于进行了功能裁剪，所以RN对业务的支持能力还不到浏览器的5%
  • 因此仅适用于中低复杂度的低交互类页面。面对稍微复杂一点儿的交互和动画需求，都需要通过调用原生代码去扩展才能实现

Flutter优势

Flutter另辟蹊径，为了屏蔽上面两种跨平台开发方案的缺陷，开启了自绘引擎时代，它的主要优点：

  • UI渲染性能高
  • 稳定
  • 高效
  • 开源
  • 社区完善

做个简单的对比：

框架代表

技术类型

UI渲染方式

性能

开发效率

Cordova，AppCan

H5+原生

WebView渲染

一般

RN、Weex

js+原生渲染

原生控件渲染

高

中

Flutter

自绘UI+原生

调用系统API渲染

高

高（AOT，JIT）

结果显而易见了，Flutter能够帮助我们提高开发效率，创建美观，高度定制的用户体验

为帮助大家从入门到实战，深度掌握Flutter这门跨平台技术，这里整理出了两份适合零基础的Flutter学习笔记：

《Flutter Dart 语言编程入门到精通》：讲解了Dart语言基础，异步编程，标准输入输出流，网络编程及调用C语言编程，可帮助大家快速入手Dart语言。
《Flutter实战演练：第二版》：则是详解讲解Flutter各大组件核心原理，带你建立第一个Flutter应用，可帮大家掌握Flutter背后的框架原理和底层设计思想，建立起属于自己的知识体系。

（有需要完整文档的伙伴可文末查看获取方式！）

《Flutter Dart 语言编程入门到精通》

目录

在这里插入图片描述

《Flutter实战演练：第二版》

目录

在这里插入图片描述

第一章 起步

  • 移动开发技术简介
  • 初识 Flutter
  • 搭建Flutter开发环境
  • Dart语言简介

在这里插入图片描述

第二章 第一个Flutter应用

  • 计数器应用示例
  • Widget 简介
  • 状态管理
  • 路由管理
  • 包管理
  • 资源管理
  • 调试Flutter应用
  • Flutter异常捕获

在这里插入图片描述

第三章 基础组件

  • 文本及样式
  • 按钮
  • 图片及ICON
  • 单选开关和复选框
  • 输入框及表单
  • 进度指示器

在这里插入图片描述

第四章 布局类组件

  • 布局类组件简介
  • 布局原理与约束（constraints）
  • 线性布局（Row和Column）
  • 弹性布局（Flex）
  • 流式布局（Wrap、Flow）
  • 层叠布局（Stack、Positioned）
  • 对齐与相对定位（Align）
  • LayoutBuilder、AfterLayout

在这里插入图片描述

第五章 容器类组件

  • 填充（Padding）
  • 装饰容器（DecoratedBox）
  • 变换（Transform）
  • 容器组件（Container）
  • 剪裁（Clip）
  • 空间适配（FittedBox）
  • 页面骨架（Scaffold）

在这里插入图片描述

第六章 可滚动组件

  • 可滚动组件简介
  • SingleChildScrollView
  • ListView
  • 滚动监听及控制
  • AnimatedList
  • GridView
  • PageView与页面缓存
  • 可滚动组件子项缓存
  • TabBarView
  • CustomScrollView 和 Slivers
  • 自定义 Sliver
  • 嵌套可滚动组件 NestedScrollView

在这里插入图片描述

第七章 功能型组件

  • 导航返回拦截（WillPopScope）
  • 数据共享（InheritedWidget）
  • 跨组件状态共享（Provider）
  • 颜色和主题（Theme）
  • ValueListenableBuilder
  • 异步UI更新（FutureBuilder、StreamBuilder）
  • 对话框详解

在这里插入图片描述

第八章 事件处理与通知

  • 原始指针事件处理
  • 手势识别
  • Flutter事件机制
  • 手势原理与手势冲突
  • 全局事件总线
  • 通知(Notification)

在这里插入图片描述

第九章 动画

  • Flutter动画简介
  • 动画结构
  • 自定义路由过渡动画
  • Hero动画
  • 交织动画
  • 通用“动画切换”组件（AnimatedSwitcher）
  • 动画过渡组件

在这里插入图片描述

第十章 自定义组件

  • 自定义组件方法简介
  • 组合现有组件
  • 组合实例：TurnBox
  • CustomPaint与Canvas
  • 自绘实例：圆形渐变进度条
  • 自绘组件：CustomCheckbox
  • 自绘组件：DoneWidget
  • 水印组件实例：文本绘制与离屏渲染

在这里插入图片描述

第十一章 文件操作与网络请求

  • 文件操作
  • Http请求-HttpClient
  • Http请求-Dio package
  • 实例：Http分块下载
  • WebSocket
  • 使用Socket API
  • Json转Dart Model类

在这里插入图片描述

第十二章 Flutter扩展

  • 包和插件
  • Flutter Web

在这里插入图片描述

第十三章 国际化

  • 让App支持多语言
  • 实现Localizations
  • 使用Intl包
  • 国际化常见问题

在这里插入图片描述

第十四章 Flutter核心原理

  • Flutter UI框架（Framework）
  • Element、BuildContext和RenderObject
  • Flutter启动流程和渲染管线
  • Flutter 布局（Layout）过程
  • Flutter 绘制（一）绘制原理及Layer
  • Flutter 绘制（二）组件树绘制流程
  • Flutter 绘制（三）Layer实例
  • Flutter 绘制（四）Compositing

在这里插入图片描述

第十五章 一个完整的Flutter应用

  • Github客户端示例
  • Flutter APP代码结构
  • Model类定义
  • 全局变量及共享状态
  • 网络请求封装
  • APP入口及主页
  • 登录页
  • 多语言和多主题
    在这里插入图片描述

结语

Flutter 作为新兴的混合开发解决方案，已经被广泛关注和使用，这不光是因为它有 Google 的支持，更因为它提供了更完善的文档和更高效的运行方式，开发者不必再把大量精力放到不同平台的展示上，更好的完成自己的业务，从企业管理者角度看，也大大降低了开发成本。

Code1994
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter教程大全合集（2022年版）
iCloudEnd的博客
08-04 5737
Flutter是一个由谷歌开发的开源移动应用软件开发工具包，用于为Android、iOS、Windows、macOS、Linux Desktop、Google Fuchsia开发应用。Flutter第一个版本支持Android操作系统，开发代号称作“Sky”。它于2015年4月的Flutter开发者会议上被公布，宣称其目标为实现120FPS的渲染性能。...............
Flutter开发之从入门到进阶最详细教程（没有之一）
yihanss的博客
04-03 1293
10.1 自定义组件方法简介10.2 组合现有组件10.3 组合实例：TurnBox10.4 CustomPaint 与 Canvas10.5 自绘实例：圆形背景渐变进度条10.6 自绘组件：CustomCheckbox10.7 自绘组件: DoneWidget10.8 水印实例: 文本绘制与离屏渲染。
【新手必备】Flutter开发入门实战详解，带你学习Flutter原理
夏夏的博客
08-22 770
跨平台开发过于复杂不易实施而且性能不足，而Flutter的出现打破了这种尴尬的局面。Flutter与weex、react native相比，性能更强高流畅度，接近native，Flutter对于Android和IOS开发者来说，非常容易上手。10.1 自定义组件方法简介10.2 组合现有组件10.3 组合实例：TurnBox10.4 CustomPaint 与 Canvas10.5 自绘实例：圆形背景渐变进度条10.6 自绘组件：CustomCheckbox。
看完227篇技术文，总结出一份 Flutter 入门教程(1)
最新发布
2401_84149256的博客
05-08 576
这篇文章介绍了 Flutter 常见的集中控件，包括： 、 、 。介绍了他们的布局行为以及使用场景。这篇文章介绍了 Flutter 常见的集中控件，包括： 、 、 。介绍了他们的布局行为以及使用场景。介绍了 Flutter 的 控件的使用方法。介绍了 Flutter 的 控件的使用方法显然，讲解Flutter布局的文章还不是很全面，在后的更新中会进行补充。这篇文章中，作者介绍了如何在 Flutter 中使用 http 请求来完成一个新闻页面的功能，数据源使用的 Django+Mysql，如果你在未缺
Flutter之环境搭建(小白教程)
程邓楠的博客
01-29 4869
这个章节我们学习如何安装`Flutter`，配置 `Flutter` 、`Android Studio` 环境，做开发的前置工作。环境搭建有点麻烦，特别是Android环境的安装，没有代理简直就是噩梦，要有耐心一起加油！
Flutter开发——从入门到精通教程，姥姥都能学会！
m0_56144365的博客
03-25 898
自定义组件方法简介组合现有组件组合实例：TurnBoxCustomPaint与Canvas自绘实例：圆形渐变进度条自绘组件：CustomCheckbox自绘组件：DoneWidget水印组件实例：文本绘制与离屏渲染。
Flutter at Google I/O 2018
weixin_30408739的博客
07-10 131
Flutter at Google I/O 2018 如何观看 https://flutterchina.club/ 极速构建漂亮的原生应用 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。 快...
Flutter编程指南之跨平台APP开发：手把手带您完成【我的备忘录】
06-30
知识点：移动应用开发现状、移动应用开发类型、Hybrid与移动跨平台开发策略、Flutter是什么？、Flutter特点、Flutter体系结构。 第2章 Flutter开发环境搭建 知识点：基于Windows的Android开发环境、基于macOS的iOS...
Flutter开发之Dart语言基础
01-27
说到Flutter，很多同学可能会将它和下面的几个词关联起来：新兴的、移动端、动态化、跨平台、开发框架。简单来说，Flutter是一款移动应用程序SDK，包含框架、widget和工具，为开发人员提供了一种在Android和iOS上...
基于Flutter 3.x 实战跨平台仿抖音App混合开发
09-16
本课程会手把手教你用简单、高效且通用的方式，将原生项目迁移成一个Flutter/原生混合开发的项目，从双平台开发转变为跨平台开发，大大提高项目开发效率。 学好 Flutter，它的灵活、高效，将在你的工作实践中显现极...
全网最全flutter学习案例仿闲鱼开源版
08-10
全网最全flutter 学习案例 仿闲鱼（开源版）
Android Flutter开发环境搭建
ZLGSPACE的博客
06-04 1976
本节主要讲解如何在Windwos下搭建 Flutter开发环境，然后了解下Android IDE上面的Flutter开发。
flutter基础入门教程（Dart语法+UI布局+页面路由+后端连接）
小哈里的博客
06-19 8314
1基础安装步骤教程 Android Studio安装与配置 https://juejin.cn/post/6844904054569582605 安装Android Studio前，需要先选择安装Java环境，Java需要到Oracle官网上下载安装，需要注册一个Oracle账号。 https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html Windows 10 配置Java 环境变量 https://www.runo
【Flutter入门到精通】全网独一份Flutter学习笔记，重磅来袭
star_nwe的博客
11-04 235
随着纯客户端到Hybrid技术，到RN&Weex，再到如今的Flutter技术，客户端实现技术不断前进。在之前的一个APP项目中，因为历史原因当时选择了weex，随着使用的不断深入，我们逐渐发现了weex的渲染性能问题已经成为一个隐患和瓶颈。而Flutter技术的不断成熟和流行，Flutter的良好的跨平台性和高性能优点，不断吸引着我们。10.1 自定义组件方法简介10.2 组合现有组件10.3 组合实例：TurnBox10.4 CustomPaint 与 Canvas。
flutter从入门到精通1
qq_24535745的博客
02-08 749
基于慕课flutter课程
【2023最新】Flutter教程 第1章 Flutter简介
谢谢你们的关注
05-08 268
【2023最新】Flutter教程 第1章 Flutter简介
使用 Flutter Rust Bridge 进行跨平台开发
分享身边生活经验blog
09-09 724
有时，在跨平台开发中，我们需要在特定平台的基础上执行某些代码。对于 Flutter 应用程序，我们可以从丰富的插件库中绘制以使用许多平台的本机功能，而无需编写我们自己的实现，因此这可能不太令人生畏。但是，随着我们的需求变得越来越小众，我们可能会发现不存在利用某个功能的插件。这时我们需要考虑编写我们自己的特定于平台的代码。您面向的平台已具有可用于实现该功能的语言。例如，在Android上，您可以使用Kotlin或Java，而在Windows上，您可以使用C++。
Flutter完整开发实战详解(
QQ1057081261的专栏
07-07 365
随着各种跨平台框架的不断涌现，很多时候我们会选择混合开发模式作为脚手架，因为企业一般不会把业务都压在一个框架上，同时除非是全新项目，不然出于对原有业务重构的成本和风险考虑，都会选择混合开发去尝试入坑。但是混合开发会对打包、构建和启动等流程熟悉度要求较高《从Android到React Native开发（四、打包流程解析和发布为Maven库）》，而这方面是有很多经验可以通用的，所以适当的混开模式有利于避免一些问题，同时只有了解Flutter整体项目的构建思路，才有可能更舒适的躺坑。
基于 flutter 3.x 仿抖音跨平台混合开发
07-28
基于 Flutter 3.x 进行仿抖音跨平台混合开发，是一种使用最新版本的Flutter框架来开发类似抖音的应用程序的方法。 Flutter是一种跨平台的开发框架，可以让开发者使用同一套代码同时在iOS和Android平台上构建高性能的应用程序。它提供了丰富的UI组件和工具，使开发过程更加简单和高效。 要实现仿抖音的跨平台混合开发，首先需要对抖音的功能和界面进行分析和设计。然后，使用Flutter框架来实现这些功能和界面。 Flutter提供了丰富的UI组件，如按钮、文本、图片、视频播放等，可以用于构建抖音的各种界面元素。开发者可以使用Dart语言来编写业务逻辑，同时可以使用Flutter提供的hot reload功能实时预览和调试应用程序。 为了实现跨平台开发，开发者可以使用Flutter的多平台支持。Flutter可以生成原生的iOS和Android应用程序，以及Web和桌面应用程序。这使得开发者可以在不同的平台上发布和部署仿抖音的应用程序。 在开发过程中，开发者可以使用Flutter的插件来集成各种第三方功能和服务，如视频播放、数据存储、社交分享等。这些插件可以帮助开发者更加方便地实现仿抖音的各种功能。 总之，基于Flutter 3.x进行仿抖音跨平台混合开发，是一种高效、灵活的开发方法。通过使用Flutter框架和相关工具，开发者可以快速构建出功能完善、界面精美的仿抖音应用程序，并在多个平台上进行发布和部署。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值