本文使用 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 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 已经被构建、安装并运行在手机中。当按下应用屏幕中的按钮,可以看到屏幕中的数字在增加,并且相关的日志信息被答应到电脑屏幕上。