Flutter基础—开发环境与入门

119 篇文章 9 订阅
82 篇文章 1416 订阅

Flutter开发环境的前提要求如下:

  • Windows 7以上版本(64位)、Mac或Linux操作系统(64位)

  • 磁盘空间:400 MB(不包括Android Studio的磁盘空间)。

  • 已经安装及配置Git


Mac开发环境

Flutter SDK

Dart SDK与Flutter捆绑在一起,没有必要单独安装Dart。在当前终端窗口运行以下命令使用Git安装Flutter,并临时设置PATH变量。

git clone -b beta https://github.com/flutter/flutter.git
export PATH=`pwd`/flutter/bin:$PATH

运行以下命令查看是否有依赖关系需要安装以完成设置,此命令检查环境并向终端窗口显示报告。

flutter doctor

首次运行flutter命令时,它会自动下载自己的依赖项并进行编译。

打开或创建$ HOME / .bash_profile,注意每台计算机上的文件路径和文件名可能不同。然后添加以下行。

export PATH=$HOME/flutter/bin:$PATH

运行source $HOME/.bash_profile刷新当前窗口,然后运行以下命令验证flutter/bin目录在PATH中。

echo $PATH

安装Xcode

通过网页下载或Mac App Store安装Xcode 7.2或更新版本,通过运行以下命令行,来配置Xcode命令行工具,以使用新安装的Xcode版本。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

iOS模拟器

在Mac上设置iOS模拟器,需要通过Spotlight或使用以下命令找到Simulator。

open -a Simulator

通过检查模拟器的Hardware > Device菜单中的设置,确保模拟器正在使用64位设备(iPhone 5s或更高版本)。

根据开发机器的屏幕尺寸,模拟的高屏幕密度iOS设备可能会溢出屏幕。在模拟器的Window > Scale菜单下设置设备刻度。

iOS真机

要将Flutter应用程序部署到物理iOS设备,需要一些其他工具和Apple帐户,还需要在Xcode中设置物理设备部署。

首先需要安装homebrew,然后打开终端并运行这些命令来安装用于将Flutter应用程序部署到iOS设备的工具。

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果这些命令失败并出现错误,可以运行brew doctor,并按照说明解决问题。

按照Xcode签名流程来设置项目:

  • 通过在Flutter项目目录的终端窗口中运行open ios/Runner.xcworkspace,打开项目中的默认Xcode工作区。

  • 在Xcode中,选择左侧导航面板中的Runner项目。

  • Runner设置页面中,确保General > Signing > Team开发团队被选择。当选择一个团队时,Xcode将创建并下载开发证书,将您的设备注册到您的帐户,并创建下载配置文件。

这里写图片描述

  • 要启动第一个iOS开发项目,需要使用Apple ID登录Xcode。第一次使用附加的物理设备进行iOS开发时,需要相任该设备上的Mac和开发证书。首次将iOS设备连接到Mac时,请在对话框提示中选择信任。

这里写图片描述

  • 然后,转到iOS设备上的设置应用,选择General > Device Management并信任证书。如果Xcode中自动签名失败,请验证项目的General > Identity > Bundle Identifier值是否唯一。

......

执行Flutter

在设置好iOS模拟器或者iOS真机之后,执行以下命令,在项目目录下新建并执行一个Flutter项目。

flutter create myapp
cd myapp
flutter run

如果成功执行项目,说明我们已经成功在Mac下配置完成。

Windows开发环境

Git

百度软件中心下载并安装Git

在控制面板>系统和安全>系统>高级系统设置>环境变量,Path变量中添加Git的路径

C:\[你的Git路径]\Git\cmd

Flutter SDK

打开一个新的Cmd或PowerShell窗口,运行以下命令使用Git安装Flutter

git clone https://github.com/flutter/flutter.git

在控制面板>系统和安全>系统>高级系统设置>环境变量,Path变量中添加Flutter的路径

C:\[你的Flutter路径]\flutter\bin

安装完成后,再打开一个新的Cmd或PowerShell窗口,并运行以下命令来查看是否需要安装依赖关系以完成安装

flutter doctor

Android SDK

Android官网下载Android SDK安装包并安装

安装完成后,Flutter需要最新的Android SDK和Android SDK Platform-Tools软件包,使用SDK Manager下载。

IntelliJ IDE

IntelliJ官网下载IntelliJ IDE安装包并安装

IntelliJ IDE开发Flutter项目需要Flutter和Dart插件,搜索并下载Flutter和Dart插件
IntelliJ IDE>Plugins
(如果搜索不到Flutter插件,可以离线下载安装)
这里写图片描述
这里写图片描述

创建项目

安装Flutter和Dart插件后,重启IntelliJ IDE,选择创建项目,配置Flutter和Dart路径
这里写图片描述
这里写图片描述

完成上一步操作后按下一步创建项目

这里写图片描述

项目创建后,如上图,main.dart是默认生成的代码文件,绿色倒三角表示手机已经连接,点击即可调试项目。

Linux开发环境

Dart SDK

打开终端,输入命令,更新软件源

sudo apt-get update

输入命令,启用HTTPS传输

sudo apt-get install apt-transport-https

输入命令,获取谷歌Linux软件包签名密钥

sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'

输入命令,建立与谷歌服务器的稳定连接

sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'

输入命令,更新软件源

sudo apt-get update

输入命令,安装最新的DartSDK

sudo apt-get install dart

输入命令,查看Dart版本

dart --version

Java SDK

Java官网下载JDK的tar.gz文件,在下载目录下打开终端,输入命令,解压文件

tar zxvf jdk-8u102-linux-x64.tar.gz

将终端位置移动至/usr/local/lib下,输入命令,移动文件

sudo mv /home/hekaiyou/下载/jdk1.8.0_102/ .

将终端位置移动至/usr/local/bin下,输入命令,创建java软链接

sudo ln -s /usr/local/lib/jdk1.8.0_102/bin/java java

输入命令,验证java软链接的正确性

java -version

输入命令,打开/etc/profile文件,设置Java环境变量

sudo vim /etc/profile

export JAVA_HOME=/usr/local/lib/jdk1.8.0_102
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=$JAVA_HOME/bin:$PATH

输入命令,重新加载/etc/profile文件

source /etc/profile

输入命令,验证java环境变量

echo $JAVA_HOME

Android SDK

Android官网下载AndroidSDK,下载基本的 Android 命令行工具即可,不需要IDE。下载完成后,在下载目录下打开终端,输入命令,解压文件

sudo mv /home/hekaiyou/下载/android-sdk-linux/ .

将SDK文件移动至存放目录,在存放目录下输入命令,打开android工具下载相关内容

android-sdk-linux/tools/android

输入命令,打开/etc/profile文件,设置Android环境变量

sudo vim /etc/profile

export SDK_HOME=/home/hekaiyou/文档/android-sdk-linux/
export PATH=$SDK_HOME/tools:$SDK_HOME/platform-tools:$PATH

输入命令,重新加载/etc/profile文件

source  /etc/profile

输入命令,查看android帮助

android -h

Git

打开终端,输入命令,安装Git

sudo apt-get install git

输入命令,配置git用户名和邮箱

git config --global user.name "[用户名]"
git config --global user.email "邮件地址"

Flutter SDK

打开终端,输入命令,从git克隆flutterSDK到终端所在目录

git clone https://github.com/flutter/flutter.git

输入命令,打开/etc/profile文件,设置Flutter环境变量

sudo vim /etc/profile

export PATH=/home/hekaiyou/flutter/bin:$PATH

输入命令,重新加载/etc/profile文件

source  /etc/profile

输入命令,查看是否需要安装其他依赖组件

flutter doctor

输入命令,查看Flutter配置

flutter config

Flutter开发入门

连接Android设备

手机开启调试模式,用USB线连接电脑,电脑打开终端,输入命令,验证连接设备

flutter devices

这里写图片描述

创建Flutter项目

将终端目录移动至项目文件夹下,输入命令,创建Flutter项目

flutter create myapp

这里写图片描述

执行Flutter项目

将终端目录移动至项目根目录下,输入命令,执行Flutter项目

flutter run

在连接电脑的Android设备上会运行Flutter项目

使用IDEA开发Flutter

  • 启动IDEA-IC后,按下图所示,点击Plugins进入插件管理页面

  • 在插件管理页面,搜索Dart、Flutter两个插件并点击安装

  • 下载插件后,点击创建新项目,先选择Dart,在对应位置填入Dart SDK的path

  • 最后再选择Flutter,在对应位置填入Flutter SDK的path,然后点击创建按钮,就可以创建一个新的Flutter项目了

  • 10
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 23
    评论
### 回答1: Flutter开发文档是针对Flutter框架的官方文档,提供了全面的开发指南和参考资料。它包括了Flutter框架的概述,安装和配置指南,以及各种用于构建高性能跨平台应用的工具和资源。 首先,Flutter开发文档介绍了Flutter框架的基本概念和原理,包括如何使用Widget构建用户界面以及如何处理用户输入和交互。开发者可以通过这些指南来了解Flutter的整体架构和核心特性,从而更好地理解和利用Flutter进行应用开发。 其次,Flutter开发文档提供了丰富的API参考和使用示例,使开发者能够快速上手和深入了解各种Flutter组件和功能。开发者可以通过文档中的代码示例和详细说明来学习如何使用不同的Widget和布局进行界面设计,以及如何调用Flutter提供的各种API实现更复杂的业务逻辑。 此外,Flutter开发文档还详细介绍了Flutter的开发工具和调试技巧,包括如何使用命令行工具进行项目管理和发布,如何使用集成开发环境(IDE)进行开发和调试,以及如何使用Flutter的调试工具来定位和解决应用中的问题。这些指南和建议可以帮助开发者提高开发效率,减少错误和调试时间。 总之,Flutter开发文档是学习和使用Flutter进行应用开发的重要参考资料。它提供了全面的开发指南和参考资料,帮助开发者快速上手和精通Flutter开发,实现高性能、跨平台的应用程序。对于初学者来说,阅读Flutter开发文档是入门的首要步骤,对于有经验的开发者来说,它是进一步提升技能和应用开发水平的宝贵资源。 ### 回答2: Flutter是Google推出的一种用于构建跨平台移动应用的开源框架。它具有快速开发、高效性能和灵活可扩展等特点。Flutter的开发文档非常详细全面,为开发者提供了丰富的资源和指导。 首先,Flutter开发文档提供了完整的安装指南,让开发者能够快速搭建开发环境,并且支持多个操作系统,包括Windows、MacOS和Linux等。开发者只需按照文档中的步骤进行配置,即可开始使用Flutter进行开发。 其次,Flutter开发文档提供了丰富的基础知识和概念介绍,帮助开发者了解Flutter的整体架构和工作原理。文档中详细介绍了Flutter的Widget系统,以及如何使用Widget来构建用户界面。此外,文档还提供了许多关于布局、动画和主题等方面的教程和示例代码,帮助开发者快速上手。 另外,Flutter开发文档还包含了大量的API文档,涵盖了Flutter框架的核心功能和各种组件的使用方法。开发者可以根据需要查阅相应的API文档,了解每个组件的属性、方法和事件等详情。同时,文档还提供了一系列示例代码,让开发者能够更好地理解和运用这些组件。 最后,Flutter开发文档还提供了丰富的实用资源和工具,包括开发工具的介绍和配置、Flutter包管理和依赖管理等。开发者可以通过文档中提供的链接和教程,快速了解和使用这些工具,提高开发效率。 总的来说,Flutter开发文档对于开发者来说是非常宝贵的资源,通过详细的介绍和实用的示例,帮助开发者快速入门和深入理解Flutter框架,从而能够更高效地开发出跨平台的移动应用。 ### 回答3: Flutter开发文档是Flutter官方提供的一份详尽的技术文档,用于指导Flutter开发者学习和使用Flutter框架。文档详细地介绍了Flutter的各个方面,包括安装配置、基本概念、核心组件、布局系统、用户界面、动画、手势、插件等内容。 首先,文档提供了Flutter的安装配置指南,指导开发者如何搭建开发环境,并使用Flutter SDK进行应用开发。同时,文档还介绍了Flutter的基本概念和工作原理,帮助开发者理解Flutter的核心特性和优势。 其次,文档详细介绍了Flutter的核心组件,包括Widget、State、BuildContext等,开发者可以了解到如何使用这些组件构建复杂的用户界面。同时,文档还深入介绍了Flutter的布局系统,包括Row、Column、Stack等布局组件的用法,并提供了示例代码和案例说明。 此外,文档还介绍了Flutter的用户界面设计,包括样式、字体、图片等的使用方法,以及界面的响应事件和动画效果的实现。开发者可以通过文档了解到如何构建出令人满意的用户界面和用户交互效果。 最后,文档还提供了Flutter插件的开发方法和使用指南,通过插件可以扩展Flutter的功能和接入原生平台的特性,帮助开发者实现更复杂的应用需求。 总而言之,Flutter开发文档是一份权威且详细的技术指南,对于Flutter开发者来说是不可或缺的参考材料。通过学习和使用文档中的知识,开发者可以更加高效地进行Flutter应用的开发和调试。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

何小有

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值