什么是flutter
Flutter是一个开源软件开发工具包 (SDK),用于“帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台”。允许跨平台开发。这样可以使您的公司和团队节省大量时间和精力。
那么,这究竟是什么意思?假设我们有一位开发人员创建了一个惊人的应用程序,并且人们喜欢它。但是,该应用程序仅在 Android上受支持。因此,开发人员决定花费大量时间学习 IOS以支持更多用户使用他们的应用程序。即使在学习了如何构建 IOS应用程序之后,他们也意识到他们的应用程序必须支持所有类型的 IOS设备,然后去一一适配,这会让他们头秃。解决这些问题。只需引入Flutter就可以解决,这就是 Flutter 的用武之地。
2021年3月4日,谷歌正式发布了 Flutter 的 2.0。该版本最大的特性就是可以支持五大主流的操作系统:iOS、Android、Linux、Windows 和 MacOS。官方甚至还说丰田将会把 Flutter 带到汽车中。
也就是说,我们可以用一套 Flutter 代码适配全平台了。
目前flutter版本已经已经2.5.3
但在此之前,第一步是安装 Flutter SDK 并熟悉您的 IDE,以便您可以充分利用它。如果你已经这样做了,你可以跳到底部并发现我给大家的彩蛋,我最喜欢的 VSCode 插件。
安装
官方网站上提供了完整的安装说明:
如果您想在 Android 和 iOS 上构建 Flutter 应用程序,您需要安装相应的 SDK,以及 Android 模拟器和 iOS 模拟器。上面的指南解释了如何做到这一点。
注意:您只能在 macOS 系统上为 iOS 开发 Flutter 应用程序。如果您使用的是 Windows,则只能为 Android 构建。
配置您的 IDE
您还需要一个代码编辑器,例如Android Studio或Visual Studio Code,以及 Dart 和 Flutter 插件:
要充分利用您的 IDE,请查看文档以获取有关运行和调试应用程序、使用代码片段、关键字快捷方式等的提示:
flutter doctor
安装完所有内容后(不要忘记在Windows或MacOS上配置系统路径!),您应该可以flutter doctor
在终端上输入。你的输出应该是这样的:
Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 2.5.1, on Microsoft Windows [Version 10.0.19042.1288], locale zh-CN) [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.3) [√] Android Studio (version 4.2) [√] Connected device (3 available) ! Doctor found issues in 0 category. 复制代码
如果flutter doctor
没有报告任何错误,则您已经拥有开始构建应用程序所需的一切。
是时候进行快速试驾了。这个页面向你展示了如何创建一个新的 Flutter 项目并运行它:
彩蛋:VS Code 插件可以像 Flutter Pro 一样进行开发
如果您使用 VSCode,我强烈建议您添加一些有用的插件。这些是我的最爱:
- Flutter and Dart 这两个插件没有,你就别用vscode开发了吧。
- 官方主题(谁不喜欢黑暗模式?😉)
- errorlens(在您键入时获取有关错误的任何反馈:超级有用)
- pubspec-assist(注意:类似的功能也可用于新的“Dart:添加依赖”和“Dart:添加开发依赖”命令)
- Todo Tree
- Better Comments
- Remove Comments
- Color Highlight
- Bracket Pair Colorizer 2
- Material Icon Theme
- Image Preview
这些是我一直在使用的。如果你还有好的推荐,麻烦在评论区告诉我,我们一起进步。
您还可以启用一些 VSCode 设置来改善您的开发体验。这些可以通过在命令面板中打开首选项:打开设置 (JSON) 来设置:
- 设置
"editor.formatOnSave": true
为在保存时启用格式(适用于dartfmt
) - 设置
"editor.bracketPairColorization.enabled": true
为启用高性能支架对着色(此处解释)
恭喜,您的 Flutter 开发环境已准备就绪!
我的settings.json
里面我用到了版本控制fvm,有同鞋需要的话,去搜搜如何安装,我也就不阐述了
{ "security.workspace.trust.enabled": false, "dart.flutterSdkPaths": [ "/Users/andrea/fvm/versions" ], "dart.flutterSdkPath": "/Users/andrea/fvm/versions/stable", "dart.warnWhenEditingFilesOutsideWorkspace": false, "dart.debugSdkLibraries": false, "dart.lineLength": 80, "dart.openDevTools": "flutter", "dart.previewFlutterUiGuides": true, "dart.previewFlutterUiGuidesCustomTracking": true, "editor.bracketPairColorization.enabled": true, "editor.formatOnSave": true, "editor.renderWhitespace": "all", "editor.minimap.enabled": false, "editor.inlineSuggest.enabled": true, "explorer.confirmDelete": false, "explorer.confirmDragAndDrop": false, "javascript.updateImportsOnFileMove.enabled": "always", "markdown.extension.toc.updateOnSave": false, "todo-tree.highlights.enabled": true, "todo-tree.regex.regex": "(//|#|<!--|;|/\*|^|^\s*(-|\d+.))\s*($TAGS)", "todo-tree.general.tags": [ "BUG", "HACK", "FIXME", "TODO", "XXX", "[ ]", "[x]" ], "terminal.integrated.tabs.enabled": true, "window.zoomLevel": 1, "workbench.colorTheme": "Dracula", } 复制代码
下一节给大家带来dart语言基础,其实我之前简单写过一篇,但还没有系统的写过