撰寫第一個flutter應用

吐血推薦flutter官方教程-怎么寫一個flutter應用1
撰寫一個flutter應用2

你可以學到的：

怎么初始化一個flutter專案
學習怎么呼叫外部package
怎么使用熱多載
怎么實作有狀態的widget
怎么做一個頁面路由(router)
怎么實作頁面互動
怎么修改應用主題

啟動專案的前提是對應的xcode Android Studio環境安裝完全

初始化一個flutter專案

通過flutter 命令創建

查看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

初始化創建專案

創建專案名為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.

運行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插件創建專案

打開vscode，點擊擴展，輸入flutter，點擊install安裝flutter依賴
點擊管理->命令面板，輸入flutter，選擇Flutter: New Application Project
指定專案的創建檔案，然后輸入專案名稱
等待一下后，會發現專案創建成功，在專案根目錄運行啟動命令運行flutter專案

// 啟動專案
flutter run

使用外部package

在專案根目錄pubspec.yaml檔案中管理依賴，比如新增包english_words

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.0
  english_words: ^3.1.5

安裝依賴

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

使用依賴

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).

頁面路由(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查看更多文章

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/263712.html

標籤：其他

上一篇：app啟動頁優化

下一篇：AndroidQ設定永不滅屏

02-撰寫第一個flutter應用