Flutter Getting start(Flutter 入门)-Mac

目录:
1、Install(安装)
2、Set up an editor(设置编辑器)
3、Test drive(试驾)
4、Write your first app(编写你的第一个应用)

1、Install(安装)

1、系统环境要求

  • 操作系统:macOS(64)
  • 磁盘空间:700MB

2、Get the Flutter SDK

  • Download Flutter SDK
    请到官网下载最新版本

  • Run flutter doctor

//在Terminal(终端/命令窗口)中输入,用以“检查验证是否已正确设置所有内容,并输出相关的信息”
flutter doctor
  • Update your path
    步骤一:确定放置Flutter SDK的目录
    步骤二:打开.bash_profile,进行配置环境变量
    步骤三:添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:
 export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

步骤四:运行source $HOME/.base_profile刷新当前窗口

步骤五:”flutter/bin”将出现在通过下面命令后出现的目录中

 echo $PATH

如下图所示:

frc c8efe8435707f77b0bf7b9d7e1b58b20 - Flutter Getting start(Flutter 入门)-Mac
效果图

3、Platform setup

  • MacOS支持为IOS和Android开发Flutter应用程序。
  • Windows默认只支持Android开发Flutter应用程序。或则装个“黑苹果”系统进行支持IOS开发

4、IOS setup(IOS配置)

  • Install Xcode(安装IOS原生开发工具)
    安装:version>=Xcode9.0

  • Set up the iOS simulator(设置IOS模拟器)
    Xcode中自带IOS simulator

  • Create and run a simple flutter app(创建、并运行Flutter 应用)
    创建flutter项目

 flutter create my_app

进入项目中

 cd my_app

运行flutter项目到模拟器中

 flutter run
  • Deploy to ios devices(部署到IOS设备)

要将flutter应用程序部署到物理IOS设备,您需要一起其他工具和Apple账号。

开发证书,AppleID,Apple Developer


5、Android setup(安卓配置)

  • Install Android Studio(安装Android原生开发工具)
    Download and setup Android studio

  • Set up your Android device(设置Android设备)
    使用USB将手机插入计算机,并按照提示进行操作

  • Set up the Android emulator(设置Android模拟器)

Android Studio自带Android enumerator(AVD)


2、Set up an editor(设置编辑器)

开发工具:
Android Studio

Visual Studio Code

or
other IntelliJ tools

3、Test drive(试驾)

frc a25a87d93d44bb4a78f1ed6bd5974484 - Flutter Getting start(Flutter 入门)-Mac
Android studio 工具栏.jpg
frc 3a6424b2687d25f33d83bf1acb3792f7 - Flutter Getting start(Flutter 入门)-Mac
运行效果图

4、Write your first app(编写你的第一个应用)

编辑lib/main.dart(Dart代码的所在地)

frc 6db60b4a32d5d7575640bc912f2b85f7 - Flutter Getting start(Flutter 入门)-Mac
image.png

编辑代码后运行如下

frc aa86aedfab6d197010b91e7b99b001d3 - Flutter Getting start(Flutter 入门)-Mac
Android
frc 013a998aeb7b31ec5ecff968db4be427 - Flutter Getting start(Flutter 入门)-Mac
IOS

想要查看更多、更详细有料干货点击我https://pdliuw.github.io/


flutter开发者项目示例:

flutter_app_sample 帮助flutter开发者更快入门、精进,避免不必要的技术坑。
如果您觉得此项目对您有所帮助,也可以”star”一下,我们得到您的鼓励后会更有动力持续推出更多有益于您的技术示例

特征:

  • 本项目是主打技术示例,所以涉及到的需求会比较少,涉及到的技术会比较多
  • 本项目是为flutter开发者专门打造的“Api demo app”
  • 本项目不仅包含flutter 各种widget组件,还包含开发包、插件,以及与各平台platforms交互、通信(Platform Channel)的技术示例。
  • 移步查看更多特征……

Flutter Getting start(Flutter 入门)-Mac