前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutter 的 UI. 前言 说到 UI,我就简单说下 Flutter 作为一门跨平台语言具有的优势之一,提高效率吧. 举个例子: 假设现在要开发一个界面,Android 开发需要一天,iOS 开发也需要一天.那么就是两天. 如果你用 Flutter 开发,就只需要一天(因为 Android 和 iOS 都…

我们可以看到,无论是Android SDK还是iOS的UIKit 的职责都是相同的,它们只是语言载体和底层的系统不同而已.那么可不可以实现这么一个UI系统:可以使用同一种编程语言开发,然后针对不同操作系统API抽象一个对上接口一致,对下适配不同操作系统的的中间层,然后在打包编译时再使用相应的中间层代码?如果可以做到,那么我们就可以使用同一套代码编写跨平台的应用了.而Flutter的原理正是如此,它提供了一套Dart API,然后在底层通过OpenGL这种跨平台的绘制库(内部会调用操作系统API)…

Flutter & UI system & GUI & API & SDK https://book.flutterchina.club/chapter14/flutter_ui_system.html 注意,虽然Dart是先调用了OpenGL,OpenGL才会调用操作系统API,但是这仍然是原生渲染,因为OpenGL只是操作系统API的一个封装库,它并不像WebView渲染那样需要JavaScript运行环境和CSS渲染器,所以不会有性能损失.…

快速生成无状态模板 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Container( ); } } 快速生成有状态模板 void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppSt…

Best-Flutter-UI-Templates 地址:https://github.com/mitesh77/Best-Flutter-UI-Templates The History of Everything 地址:https://github.com/2d-inc/HistoryOfEverything flame 一款简约的Flutter游戏引擎.地址:https://github.com/flame-engine/flame flutter_swiper 地址:https://gi…

准备阶段 下载 Flutter SDK 新建 Flutter 文件夹,克隆 Flutter SDK: git clone -b beta https://github.com/flutter/flutter.git 配置 Flutter 环境 我是 Mac 系统,Flutter SDK 下载完后的路径:Users/wuxiaolong/Flutter/flutter/ . 在命令行下,进入用户目录 cd $HOME 打开.bash_profile文件 执行命令打开文件: open -e .bas…

前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 StatefulWidget,我们要继承哪一个? 下面让我们跟着文章来探索一番. 目录 1. StatelessWidget 我们先来看下继承的 Widget 为 StatelessWidget 的情况. 第一步:新建一个文件 bold_text.dart 这里文件名后面后缀 .dart 可带可不带…

背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞═════════════════════════════════════════════════════════ flutter: The following message was thrown during layout: flutter: A RenderFlex overflowed by 826 pixels…

前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 MethodChannel 的封装. 因此这篇我们来说下如何通过 MethodChannel 实现 Android -> Flutter 的通信. 至于 Flutter -> Android 的通信,没看过的小伙伴建议看下之前的文章 Flutter 即学即用系列博客--08 MethodChannel 实…

前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生主动将电池的充电状态发送给 Flutter 并在界面显示. 步骤如下. 1. Flutter 界面修改 我们在原先基础上增加一列用于显示文本. String _chargingStatus = 'Battery status: unknown.'; Text(_chargingStatus), 2. Fl…