想起夕阳下的奔跑，那是我逝去的青春

0%

Flutter学习（1）-环境搭建

发表于 更新于 阅读次数： Valine：

Flutter的学习，建议优先下载Xcode、Android Studio、Visual Studio Code这几个IDE，毕竟开发的时候我们需要用到这几个IDE的其中一个。

1. Flutter SDK 安装包下载

以下是两种比较友好的Flutter SDK安装包的下载方式

2. 解压

找到刚才下载好的安装包，比如我这里的安装包是 flutter-1.6.5.tar 这个版本，直接解压到指定的文件夹里去，这里我给出我存放 FlutterSDK 解压后的路径：** /Users/rogue/Documents/FlutterSDK/**。
上面这个路径，就是最后我解压SDK后的路径，当然，如果你没有工具也可以使用命令行来解压，我给出如下的命令行：

1
2
roguedeMacBook-Pro:~ rogue$ cd /Users/rogue/Documents/FlutterSDK 
roguedeMacBook-Pro:FlutterSDK rogue$ unzip ~/Downloads/flutter-1.6.5.tar

这样也是可以成功解压到 FlutterSDK 目录下。

3. 配置环境变量

在这里，我们会给出配置flutter环境变量的方法，首先，查找一下自己的电脑是否存在 .bash_profile 这个文件，有以下路径 ~/.bash_profile，如果要打开文件，大家可以用以下方法：

1
roguedeMacBook-Pro:~ rogue$ open -e ~/.bash_profile

如果你的电脑没有该文件，那么可以自己创建一个

1
roguedeMacBook-Pro:~ rogue$ touch ~/.bash_profile

注意：如果你已经下载了Android Studio这个IDE的话，那么请你配置以下的代码至到.bash_profile文件里：

1
2
3
4
export ANDROID_HOME=/Users/rogue/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools 
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/build-tools/28.0.3

以上的配置，需要你找到Android SDK所在位置，不然会报错。

接下来，我们会正式接入 Flutter SDK 的环境变量：

1
2
3
4
5
6
#flutter镜像环境设置,否则无法正常下载依赖包
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

#flutter环境变量
export PATH=/Users/rogue/Documents/FlutterSDK/flutter/bin:$PATH

以上的配置，特别是 Flutter 的顺序，一定不要搞反了，否则会影响后期项目的创建。

4. 检查配置

配置好了Flutter之后，我们需要来验证Flutter是否配置成功，中间可能大家会遇到很多小插曲，可以网上查找一下都可以解决的。
在这里，需要用到一下的命令：

1
roguedeMacBook-Pro:~ rogue$ flutter doctor

同时，我把我这里的检查输出打印出来给大家看，可以对照，我电脑安装了VS Code、Xcode、AS以及IntelliJ，一下的输入，虽然有报错，但是不会对运行程序有影响 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
roguedeMacBook-Pro:~ rogue$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.6.5, on Mac OS X 10.14.5 18F132, locale zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 10.2.1)
[✓] iOS tools - develop for iOS devices
[✓] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2018.2.6)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.34.0)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.
roguedeMacBook-Pro:~ rogue$

如果大家在执行 flutter doctor 命令的时候，遇到报错的情况，而那个错误正好是你需要使用的IDE的情况，那么你可以跟着提示去查找错误并且解决掉。

5. 创建Demo

首先，我会使用mac 终端来创建一个程序

1
2
3
4
#指定文件夹目录
croguedeMacBook-Pro:~ rogue$ cd ~/Desktop/hello_dz/
#创建项目
roguedeMacBook-Pro:hello_dz rogue$ flutter create hello_dz

刚才和大家说到，.bash_profile 配置文件里，Flutter 的环境变量不能够写反，如果写反了，这里执行 flutter create xxx 的时候，就会一直卡在终端运行里面而迟迟不能够下载依赖包。而这里，我就不打印失败的输出，直接打印成功创建项目的输出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
croguedeMacBook-Pro:~ rogue$ cd ~/Desktop/hello_dz/
roguedeMacBook-Pro:hello_dz rogue$ flutter create hello_dz
Creating project hello_dz...
  hello_dz/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  hello_dz/ios/Runner/Info.plist (created)
  hello_dz/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md (created)
  hello_dz/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
  (created)
  hello_dz/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.p
  ng (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.p
  ng (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png
  (created)
  hello_dz/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png
  (created)
  hello_dz/ios/Runner/Base.lproj/LaunchScreen.storyboard (created)
  hello_dz/ios/Runner/Base.lproj/Main.storyboard (created)
  hello_dz/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
  (created)
  hello_dz/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme (created)
  hello_dz/ios/Flutter/Debug.xcconfig (created)
  hello_dz/ios/Flutter/Release.xcconfig (created)
  hello_dz/ios/Flutter/AppFrameworkInfo.plist (created)
  hello_dz/test/widget_test.dart (created)
  hello_dz/hello_dz.iml (created)
  hello_dz/.gitignore (created)
  hello_dz/.metadata (created)
  hello_dz/ios/Runner/AppDelegate.h (created)
  hello_dz/ios/Runner/main.m (created)
  hello_dz/ios/Runner/AppDelegate.m (created)
  hello_dz/ios/Runner.xcodeproj/project.pbxproj (created)
  hello_dz/android/app/src/profile/AndroidManifest.xml (created)
  hello_dz/android/app/src/main/res/mipmap-mdpi/ic_launcher.png (created)
  hello_dz/android/app/src/main/res/mipmap-hdpi/ic_launcher.png (created)
  hello_dz/android/app/src/main/res/drawable/launch_background.xml (created)
  hello_dz/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png (created)
  hello_dz/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png (created)
  hello_dz/android/app/src/main/res/values/styles.xml (created)
  hello_dz/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png (created)
  hello_dz/android/app/src/main/AndroidManifest.xml (created)
  hello_dz/android/app/src/debug/AndroidManifest.xml (created)
  hello_dz/android/gradle/wrapper/gradle-wrapper.properties (created)
  hello_dz/android/gradle.properties (created)
  hello_dz/android/settings.gradle (created)
  hello_dz/pubspec.yaml (created)
  hello_dz/README.md (created)
  hello_dz/lib/main.dart (created)
  hello_dz/android/app/build.gradle (created)
  hello_dz/android/app/src/main/java/com/example/hello_dz/MainActivity.java
  (created)
  hello_dz/android/build.gradle (created)
  hello_dz/android/hello_dz_android.iml (created)
  hello_dz/.idea/runConfigurations/main_dart.xml (created)
  hello_dz/.idea/libraries/Flutter_for_Android.xml (created)
  hello_dz/.idea/libraries/Dart_SDK.xml (created)
  hello_dz/.idea/libraries/KotlinJavaRuntime.xml (created)
  hello_dz/.idea/modules.xml (created)
  hello_dz/.idea/workspace.xml (created)
Running "flutter pub get" in hello_dz...                            6.3s
Wrote 66 files.

All done!
[✓] Flutter is fully installed. (Channel dev, v1.6.5, on Mac OS X 10.14.5
    18F132, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices is fully installed. (Android
    SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS is fully installed. (Xcode 10.2.1)
[✓] iOS tools - develop for iOS devices is fully installed.
[✓] Android Studio is fully installed. (version 3.4)
[!] IntelliJ IDEA Ultimate Edition is partially installed; more components are
    available. (version 2018.2.6)
[✓] VS Code is fully installed. (version 1.34.0)
[✓] Connected device is fully installed. (1 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd hello_dz
  $ flutter run

Your application code is in hello_dz/lib/main.dart.

roguedeMacBook-Pro:hello_dz rogue$

创建项目成功之后，我们可以在目录下找到名为 ios 的文件夹，打开 Runner.xcworkspace 直接运行程序即可。

最后，你终端创建的项目，既可以使用Xcode打开运行，也可以使用VS Code进行打开运行，还有AS。

avatar