Flutter 總結

王睿丶發表於2021-07-30

Flutter

文章目錄

喜歡記得點個贊喲，我是王睿，很高興認識大家！

1、一步一步教你安裝Flutter

1.1丶下載Flutter（SDK）

flutter.dev/docs/develo…
在這裡插入圖片描述

1.2丶配置環境變數

【1】
Name：ANDROID_HOME
Key：D:\program\Android\SDK\AndroidSDK
在這裡插入圖片描述
【2】
新增：D:\program\Flutter\SDK\flutter\bin

2.3丶在電腦上配置國內映象

搭建環境過程中要下載很多資原始檔，當一些資源下載不了的時候，可能會報各種錯誤。在國內訪問 Flutter 的時候有可能會受到限制。Flutter 官方為我們提供了國內的映象

flutter-io.cn/
https://flutter.dev/community/china

拉到 Flutter 中文網最下面有配置方式，把下面兩句配置到環境變數裡面
FLUTTER_STORAGE_BASE_URL:storage.flutter-io.cn PUB_HOSTED_URL:https://pub.flutter-io.cn
在這裡插入圖片描述

2.4丶檢測是否成功

【1】 flutter doctor
在這裡插入圖片描述
第一次執行的時候會提示下面錯誤：

這個時候複製上面紅色框框內的命令

flutterdoctor–android-licenses

注意：提示輸入 Y/N 的地方全部輸入 Y

2.5丶在Android Sutdio下載Flutter外掛

【1】
在這裡插入圖片描述
【2】
選擇：plugins
在搜尋框處，搜尋：flutter，下載該外掛

2.6丶建立Flutter專案

在這裡插入圖片描述

2.7丶建立好後會有現成的程式碼，這時候連線上手機即可執行

手機端連線：USB連線，允許除錯，設定→其他設定→開發者選項開啟→USB除錯開啟
第三方模擬器連線教程：mp.csdn.net/mdeditor/10…
在這裡插入圖片描述

2、社群、Flutter國內映象

Flutter中文社群

3、將Flutter或Dart的JSON資料自動生成模型類

json_to_dart

4、圖示庫（Icon）

5、設計基礎

效果圖：

在這裡插入圖片描述

程式碼+註釋：

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

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = 'Custom Themes';

    return new MaterialApp(
      title: appName,
      //建立主題
      theme: new ThemeData(
        brightness: Brightness.dark,      //亮度
        primaryColor: Colors.lightBlue[800],  //主題顏色
        accentColor: Colors.cyan[600],  //其他顏色
      ),
      home: new MyHomePage(
        title: appName,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, @required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        child: new Container(
          color: Theme.of(context).accentColor,   //引用主題
          child: new Text(
            'Text with a background color',
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
    );
  }
}
複製程式碼