Flutter版的Hello World

Posted on | Edited on | In , | Views:
Symbols count in article: 6.8k | Reading time ≈ 11 mins.

本文使用 VS Code 构建一个基于 Flutter 的 Hello World 应用，帮助学员熟悉Flutter 项目的项目结构及进行开发的基本流程。

构建项目

在命令行运行以下命令以构建一个新的项目，在本文中，将项目名称定为: hello_flutter_app

1
flutter create hello_fullter_app

系统显示

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
115
116
117
118
119
120
Waiting for another flutter command to release the startup lock...
Creating project hello_flutter_app...
  hello_flutter_app/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  hello_flutter_app/ios/Runner/Info.plist (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@
  2x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@
  3x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md
  (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.jso
  n (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.
  png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76
  @2x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29
  @1x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40
  @1x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20
  @1x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x
  1024@1x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x
  83.5@2x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20
  @3x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
  (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20
  @2x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29
  @3x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40
  @2x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60
  @3x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60
  @2x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76
  @1x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40
  @3x.png (created)
  hello_flutter_app/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29
  @2x.png (created)
  hello_flutter_app/ios/Runner/Base.lproj/LaunchScreen.storyboard (created)
  hello_flutter_app/ios/Runner/Base.lproj/Main.storyboard (created)
  hello_flutter_app/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspac
  edata (created)
  hello_flutter_app/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
  (created)
  hello_flutter_app/ios/Flutter/Debug.xcconfig (created)
  hello_flutter_app/ios/Flutter/Release.xcconfig (created)
  hello_flutter_app/ios/Flutter/AppFrameworkInfo.plist (created)
  hello_flutter_app/test/widget_test.dart (created)
  hello_flutter_app/hello_flutter_app.iml (created)
  hello_flutter_app/.gitignore (created)
  hello_flutter_app/.metadata (created)
  hello_flutter_app/android/app/src/profile/AndroidManifest.xml (created)
  hello_flutter_app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
  (created)
  hello_flutter_app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
  (created)
  hello_flutter_app/android/app/src/main/res/drawable/launch_background.xml
  (created)
  hello_flutter_app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
  (created)
  hello_flutter_app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
  (created)
  hello_flutter_app/android/app/src/main/res/values/styles.xml (created)
  hello_flutter_app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
  (created)
  hello_flutter_app/android/app/src/main/AndroidManifest.xml (created)
  hello_flutter_app/android/app/src/debug/AndroidManifest.xml (created)
  hello_flutter_app/android/gradle/wrapper/gradle-wrapper.properties (created)
  hello_flutter_app/android/gradle.properties (created)
  hello_flutter_app/android/settings.gradle (created)
  hello_flutter_app/android/app/build.gradle (created)
  hello_flutter_app/android/app/src/main/kotlin/com/example/hello_flutter_app/Ma
  inActivity.kt (created)
  hello_flutter_app/android/build.gradle (created)
  hello_flutter_app/android/hello_flutter_app_android.iml (created)
  hello_flutter_app/pubspec.yaml (created)
  hello_flutter_app/README.md (created)
  hello_flutter_app/ios/Runner/Runner-Bridging-Header.h (created)
  hello_flutter_app/ios/Runner/AppDelegate.swift (created)
  hello_flutter_app/ios/Runner.xcodeproj/project.pbxproj (created)
  hello_flutter_app/lib/main.dart (created)
  hello_flutter_app/.idea/runConfigurations/main_dart.xml (created)
  hello_flutter_app/.idea/libraries/Flutter_for_Android.xml (created)
  hello_flutter_app/.idea/libraries/Dart_SDK.xml (created)
  hello_flutter_app/.idea/libraries/KotlinJavaRuntime.xml (created)
  hello_flutter_app/.idea/modules.xml (created)
  hello_flutter_app/.idea/workspace.xml (created)
Running "flutter pub get" in hello_flutter_app...                  17.5s
Wrote 65 files.

All done!
[✓] Flutter is fully installed. (Channel stable, v1.9.1+hotfix.2, on Mac OS X
    10.14.6 18G103, 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 partially installed; more components
    are available. (Xcode 11.0)
[✓] Android Studio is fully installed. (version 3.5)
[!] IntelliJ IDEA Ultimate Edition is partially installed; more components are
    available. (version 2018.1.1)
[✓] VS Code is fully installed. (version 1.38.1)
[✓] VS Code is fully installed. (version 1.35.1)
[!] Connected device is not available.

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

In order to run your application, type:

  $ cd hello_flutter_app
  $ flutter run

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

可以看到，命令默认帮助我们建立好了 iOS 和 Android 的项目。

在Android手机中运行应用

将 Android 手机接入电脑，确保手机已经打开开发者模式并允许USB调试和安装应用。然后在在项目目录中运行

1
flutter run

系统显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Launching lib/main.dart on HUAWEI NXT AL10 in debug mode...
Initializing gradle...                                             22.6s
Resolving dependencies...                                         100.1s
Running Gradle task 'assembleDebug'...                                  
Running Gradle task 'assembleDebug'... Done                        46.5s
Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...                         6.0s
I/zygote64(10845): Do partial code cache collection, code=60KB, data=42KB
I/zygote64(10845): After code cache collection, code=60KB, data=42KB    
I/zygote64(10845): Increasing code cache capacity to 256KB              
W/InputMethodManager(10845): startInputReason = 5                       
Syncing files to device HUAWEI NXT AL10...                              
 2,210ms (!)                                       

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on HUAWEI NXT AL10 is available at: http://127.0.0.1:64523/wDfPflKrSW8=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

并且 App 已经被构建、安装并运行在手机中。当按下应用屏幕中的按钮，可以看到屏幕中的数字在增加，并且相关的日志信息被答应到电脑屏幕上。

Related Articles

本文标题:Flutter版的Hello World

文章作者:Morning Star

发布时间:2019年09月29日 - 07:09

最后更新:2021年04月16日 - 15:04

原始链接:https://www.mls-tech.info/app/flutter/flutter-hello-world/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。