从零开始学习Flutter

174 阅读1分钟

后期有个任务是对项目进行重构,使用Flutter替换相关架构,需要提前进行相关技术储备,先在这里挖个坑,记录学习Flutter的过程,等我一点一点来填坑呀哈哈哈哈

1.初识Flutter

FlutterGoogle推出的高性能、跨端UI框架,使用Dart语言,支持iOS、Android、Windows/MAC/Linux等多个平台。Flutter中万物皆为Widget,它不仅可以表示UI元素,也可以表示一些功能性的组件,通过Widget嵌套Widget的方式来构建UI和进行实践处理。 然而,最关心的还是Flutter与前端的异同,是否可以快速上手,以下是整理的对比小结。

Flutter前端
编程语言DartJavaScript
响应式 UI 编程借鉴 ReactReact、Vue
状态管理Provider、ReduxRedux、Vuex
页面样式WidgetsCSS
UI 库官方内置 Material Design、CupertinoAnt Design、Element
开发和调试工具Dart DevToolsChrome DevTools
包管理工具pubnpm、yarn

看到这里,还好还好,技术是相通的,大同小异啦~~

参考资料:

2.搭建环境

由于公司对Flutter进行了优化,打通了Flutter标准工作流与公司原生技术栈,所以具体的搭建步骤对外没有太多的参考价值,就不在此赘述啦。

配置环境变量
1.打开".bashrc"文件
    vim $HOME/.zshrc
2.按下"i"进入输入模式
3.添加以下变量到文件内:
    # 配置 flutter 的 PATH 环境变量
    export PATH="$PATH:$HOME/.flutter_sdk/bin"
    # 配置 pub host和 storage
    export PUB_HOSTED_URL="https://pub.xx.com"
    export FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

4. 按下 "Esc",然后输入 ":wq!",最后按下"enter"

3.创建Flutter Web项目