Who am I ?

•Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

•Flutter可以与现有的代码一起工作。

•Flutter是完全免费、开源的。

目前主要跨平台技術


flutter框架嵌入页面(Flutter框架介绍)(1)

Why Choose Flutter ?

1.快速开发

毫秒级的热重载,修改后,您的应用界面会立即更新。

使用丰富的、完全可定制的widget在几分钟内构建原生界面。

2.富有表现力和灵活的UI

快速发布聚焦于原生体验的功能。

分层的架构允许您完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计

3.原生性能

Flutter包含了许多核心的widget,如滚动、导航、图标和字体等,

这些都可以在iOS和Android上达到原生应用一样的性能。


flutter框架嵌入页面(Flutter框架介绍)(2)

1. 环境搭建

•Android Stuido上安装插件,并下载flutter Sdk到 本地,配置在环境变量即可,VS Code 方法相同。 (中文官网十分详细)。这⾥主要是需要注意,因为某些不可抗⼒的原因,国内的⽤户有时候需要配置Flutter的代理。

•安装Dart语言库。语法有不少Java、kotlin、JS的影子,几乎无学习成本,可边写边查

•执行Flutter Doctor确定环境正常运行

2. 創建應用

执行flutter create my_app创建应用


flutter框架嵌入页面(Flutter框架介绍)(3)


flutter框架嵌入页面(Flutter框架介绍)(4)


flutter框架嵌入页面(Flutter框架介绍)(5)

3.運行應用

按運行按鈕查看應用,熱重載功能會實時顯示更新內容


flutter框架嵌入页面(Flutter框架介绍)(6)

4.Flutter---一切皆组件

官网提供目前市面所用到的所有组件库供大家调用


flutter框架嵌入页面(Flutter框架介绍)(7)


flutter框架嵌入页面(Flutter框架介绍)(8)

插件官网可以找到所有方法类的插件集


flutter框架嵌入页面(Flutter框架介绍)(9)

5.引用Package演示

1.pubspec.yaml文件引入,保存會自動下載到本地

flutter框架嵌入页面(Flutter框架介绍)(10)

2.添加AndroidManifest.xml必要權限

flutter框架嵌入页面(Flutter框架介绍)(11)

3.引用dio並添加方法


flutter框架嵌入页面(Flutter框架介绍)(12)

常用插件


flutter框架嵌入页面(Flutter框架介绍)(13)


flutter框架嵌入页面(Flutter框架介绍)(14)

6. 生成應用

Android

1.使用Java目錄下的keytool.exe創建key文件並簽名,配置到項目key.properties文件

2.flutter build apk會在build\app\outputs\apk\release目錄生成

IOS

1.flutter build ios –release 生成文件

2.在到xcode下進行打包發佈


小编目前也正在学习阶段,欢迎各位一起探讨和学习,谢谢观看

,