02-編寫第一個flutter應用

編寫第一個flutter應用

• 吐血推薦flutter官方教程-怎麼寫一個flutter應用1
• 編寫一個flutter應用2

你能夠學到的：

• 怎麼初始化一個flutter項目
• 學習怎麼調用外部package
• 怎麼使用熱重載
• 怎麼實現有狀態的widget
• 怎麼作一個頁面路由(router)
• 怎麼實現頁面交互
• 怎麼修改應用主題

啓動項目的前提是對應的xcode Android Studio環境安裝徹底

初始化一個flutter項目

經過flutter 命令建立

1. 查看flutter安裝是否成功

flutter doctor

安裝正確會出現下面這樣的提示👇：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.6, on macOS 11.2.1 20D74 darwin-x64, locale zh-Hans-CN)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 12.4)
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.52.0)
[✓] Connected device (1 available)

• No issues found!

若是安裝錯誤，按照環境搭建中的安裝flutter

2. 初始化建立項目

建立項目名爲app的flutter項目

flutter create app

初始化建立成功會出現下面提示

All done!
[✓] Flutter: is fully installed. (Channel stable, 1.22.6, on macOS 11.2.1 20D74 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS: is fully installed. (Xcode 12.4)
[✓] Android Studio: is fully installed. (version 4.1)
[✓] VS Code: is fully installed. (version 1.52.0)
[✓] Connected device: is fully installed. (1 available)

In order to run your application, type:

  $ cd app
  $ flutter run

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

3. 運行flutter項目

cd app
flutter run

會自動打開模擬器，並出現下面的提示信息

Launching lib/main.dart on iPhone 12 Pro Max in debug mode...
 
Running Xcode build...                                                  
 └─Compiling, linking and signing...                        87.2s
Xcode build done.                                           114.1s
Waiting for iPhone 12 Pro Max to report its views...                 4ms
Syncing files to device iPhone 12 Pro Max...                       353ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone 12 Pro Max is available at: http://127.0.0.1:55603/9Dz6pZ8WEDY=/

經過vscode flutter插件建立項目

1. 打開vscode，點擊擴展，輸入flutter，點擊install安裝flutter依賴
2. 點擊管理->命令面板，輸入flutter，選擇Flutter: New Application Project
3. 指定項目的建立文件，而後輸入項目名稱
4. 等待一下後，會發現項目建立成功，在項目根目錄運行啓動命令運行flutter項目

// 啓動項目
flutter run

使用外部package

1. 在項目根目錄pubspec.yaml文件中管理依賴，好比新增包english_words

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  english_words: ^3.1.5

2. 安裝依賴

// 根目錄命令行運行下面命令
flutter pub get

3. 使用依賴

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(wordPair.asPascalCase),
        ),
      ),
    );
  }
}

查找更多flutter相關依賴

熱重載

在經過flutter run運行的命令下，輸入r便可完成熱重載

幾個常見的命令：

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

有狀態的widget

頁面路由(router)

經過Navigator.of來實現路由的具體實現

Navigator.of(context).push(
  new MaterialPageRoute<void>(
    builder: (BuildContext context) {
      
    },
  ),
);

頁面交互

經過onTap來實現頁面交互，使用setState改變對應狀態

onTap: () {
  setState(() {
    if (alreadySaved) {
      _saved.remove(pair);
    } else {
      _saved.add(pair);
    }
  });
}

主題

經過new ThemeData()來實現主題的切換

MaterialApp(
  title: 'Startup Name Generator',
  theme: new ThemeData(
    primaryColor: Colors.white,
  ),
  home: RandomWords(),
)

github查看更多文章