Flutter的安装与设置

简介: Flutter是一个开源软件开发工具包 (SDK),用于“帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台”。允许跨平台开发。这样可以使您的公司和团队节省大量时间和精力。

什么是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 StudioVisual Studio Code,以及 Dart 和 Flutter 插件:

要充分利用您的 IDE,请查看文档以获取有关运行和调试应用程序、使用代码片段、关键字快捷方式等的提示:

flutter doctor

安装完所有内容后(不要忘记在WindowsMacOS上配置系统路径!),您应该可以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,我强烈建议您添加一些有用的插件。这些是我的最爱:

这些是我一直在使用的。如果你还有好的推荐,麻烦在评论区告诉我,我们一起进步。

您还可以启用一些 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语言基础,其实我之前简单写过一篇,但还没有系统的写过



相关文章
|
1月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
81 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
5月前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
164 59
|
5月前
|
Web App开发 开发工具 Android开发
【Flutter】Flutter安装和配置(mac)
【Flutter】Flutter安装和配置(mac)
|
6月前
Flutter设置Button的大小
Flutter设置Button的大小
137 1
|
7月前
Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
|
7月前
|
容器
Flutter Container设置 width 无效
Flutter Container设置 width 无效
|
8月前
|
Dart 开发工具 Android开发
在 Windows 操作系统上安装和配置 Flutter 开发环境
在 Windows 操作系统上安装和配置 Flutter 开发环境
300 0
|
9月前
|
XML Dart Java
Flutter插件开发之APK自动安装,字节跳动Android岗面试题
Flutter插件开发之APK自动安装,字节跳动Android岗面试题
|
9月前
|
Dart Shell 开发工具
解决windows安装Flutter时出现Unknown operating system. Cannot install Dart SDK.问题
解决windows安装Flutter时出现Unknown operating system. Cannot install Dart SDK.问题
226 0
|
Dart 开发工具 iOS开发
带你读《深入浅出Dart》二十三、Flutter环境的安装与配置(1)
带你读《深入浅出Dart》二十三、Flutter环境的安装与配置(1)
136 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 7
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 8
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    14
  • 2
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    58
  • 3
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    38
  • 4
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 5
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 6
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75
  • 9
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
    18
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    27