Flutter的第一个程序“Hello World”

xiaohai 2021-08-10 15:03:33 3146人围观 标签: Flutter 
简介Flutter的第一个程序“Hello World”

  本节我们将从创建一个Flutter新项目,并且编写一个“Hello World”的页面。

1、创建项目
$ flutter create hi_flutter
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Creating project hi_flutter...
  ..............省略n行....................

All done!
[√] Flutter is fully installed. (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17134.706], locale zh-CN)
[!] Android toolchain - develop for Android devices is partially installed; more components are available. (Android SDK 28.0.3)
[√] Android Studio is fully installed. (version 3.2)
[!] IntelliJ IDEA Ultimate Edition is partially installed; more components are available. (version 2017.3)
[!] Connected device is not available.

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

In order to run your application, type:

  $ cd hi_flutter
  $ flutter run

Your application code is in demo_1\lib\main.dart.
2、根据上面的提示,我们进入到项目目录
zhj@DESKTOP-06Q5JL3 MINGW64 /e/flutter/learn
$ cd hi_flutter/

zhj@DESKTOP-06Q5JL3 MINGW64 /e/flutter/learn/hi_flutter
$
3、在运行项目之前我们需要检测是否有可用设备
zhj@DESKTOP-06Q5JL3 MINGW64 /e/flutter/learn/hi_flutter
$ flutter devices
No devices detected.

Run 'flutter emulators' to list and start any available device emulators.

Or, if you expected your device to be detected, please run "flutter doctor" to diagnose potential issues, or visit https://flutter.io/setup/ for troubleshooting tips.

提示项目的信息,表示没有检测到可用的设备。

4、查看可用的模拟器
zhj@DESKTOP-06Q5JL3 MINGW64 /e/flutter/learn/hi_flutter
$ flutter emulators
4 available emulators:

Nexus_5X_API_28_x86 • Nexus 5X • Google • Nexus 5X API 28 x86
Pixel_API_28        • pixel    • Google • Pixel API 28
Pixel_API_28_2      • pixel    • Google • Pixel API 28 2
flutter_emulator    • pixel    • Google

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

You can find more information on managing emulators at the links below:
  https://developer.android.com/studio/run/managing-avds
  https://developer.android.com/studio/command-line/avdmanager

从上面可以看出,笔者这里已经有很多模拟器设备了。所以下面我们需要去运行一个模拟器

5、运行其中的一个模拟器
zhj@DESKTOP-06Q5JL3 MINGW64 /e/flutter/learn/hi_flutter
$ flutter emulators --launch Nexus_5X_API_28_x86  #启动一个设备

zhj@DESKTOP-06Q5JL3 MINGW64 /e/flutter/learn/hi_flutter
$ flutter devices  #再次查看设备,已经有一个可用的设备了
1 connected device:

Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)
6、运行当前项目
zhj@DESKTOP-06Q5JL3 MINGW64 /e/flutter/learn/hi_flutter
$ flutter run
Using hardware rendering with device Android SDK built for x86. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...                                           4.5s
Resolving dependencies...                                       39.9s
Gradle task 'assembleDebug'...                                  65.4s
Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...                      7.0s
I/OpenGLRenderer(26053): Initialized EGL, version 1.4
D/OpenGLRenderer(26053): Swap behavior 1
D/        (26053): HostConnection::get() New Host Connection established 0xe3bceb80, tid 26100
W/OpenGLRenderer(26053): Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without...
D/OpenGLRenderer(26053): Swap behavior 0
D/EGL_emulation(26053): eglCreateContext: 0xdf1f0dc0: maj 2 min 0 rcv 2
D/EGL_emulation(26053): eglMakeCurrent: 0xdf1f0dc0: ver 2 0 (tinfo 0xca9560b0)
D/EGL_emulation(26053): eglCreateContext: 0xca90c060: maj 2 min 0 rcv 2
D/EGL_emulation(26053): eglMakeCurrent: 0xca90c060: ver 2 0 (tinfo 0xdfe70c80)
Syncing files to device Android SDK built for x86...
I/Choreographer(26053): Skipped 83 frames!  The application may be doing too much work on its main thread.
D/EGL_emulation(26053): eglMakeCurrent: 0xdf1f0dc0: ver 2 0 (tinfo 0xca9560b0)
I/OpenGLRenderer(26053): Davey! duration=1630ms; Flags=1, IntendedVsync=13858837065620, Vsync=13860220398898, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=13860229823620, AnimationStart=13860229909650, PerformTraversalsStart=13860230562000, DrawStart=13860243962160, SyncQueued=13860245190680, SyncStart=13860262930860, IssueDrawCommandsStart=13860263206610, SwapBuffers=13860350582380, FrameCompleted=13860484903860, DequeueBufferDuration=38831000, QueueBufferDuration=1010000,
D/        (26053): HostConnection::get() New Host Connection established 0xc6c26080, tid 26091
D/EGL_emulation(26053): eglMakeCurrent: 0xca90c060: ver 2 0 (tinfo 0xdfe70dd0)
 3.8s
To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:54299/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

运行成功后,这就是官方的一个例子
图片alt

7、编码我们第一个程序“Hello World!”
import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Text(
      "Hello World!",
      textDirection: TextDirection.ltr,
    ),
  ));
}

图片alt
到这我们就编写好第一个程序。