【Flutter學習】Flutter工程目錄介紹、資源管理、不同分辨率圖片、添加依賴

項目結構

- projectName
    -android //android的工程文件
    -build //項目的構建輸出文件
    -ios //項目的ios工程文件
    -lib //項目中的dart文件
        -src //包含其他的源文件
        -main.dart //自動生成的項目入口文件
    -test //測試相關的文件
    -assets
        -images//建議存放圖片
            -2.0x 
            -3.0x
            xxxxx  //圖片可以直接放到images
        -fonts//建議存放字體
    -pubspec.yaml //項目依賴配置文件

Flutter資源(assets)介紹

Flutter應用程序可以包含代碼和 assets（有時稱為資源）。asset是打包到程序安裝包中的，可在運行時訪問。常見類型的asset包括靜態數據（例如JSON文件），配置文件，圖標和圖片（JPEG，WebP，GIF，動畫WebP / GIF，PNG，BMP和WBMP）

指定Assets

資源需要在 pubspec.yaml中配置，配置方法:

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

如果使用了未聲明的資源，會報錯：

資源的實際路徑可以是任意的。

Asset 變體(variant)

1. 變體就是指在構建時，根據不同的場景，選擇適應該場景的資源。可以類比Android多圖片資源的適配：自動選擇加載xxh或者xh下的圖片。

2. 在根據pubspec.yaml構建資源時，會在相鄰目錄中找到相同名稱的任何文件，這些文件會一起打入包中。

   應用程序中有如下文件：
       assets/image/a.png
       assets/image/2x/a.png
       assets/image/3x/a.png
   
   pubspec.yaml 中配置：
       flutter:
           assets:
               - assets/calendar.png
   
   那么，這三種a.png 都會打入asset bundle中。后面2個被認為是變體。
   

加載資源

1. 通過rootBundle對象來加載（每個Flutter應用都有一個rootBundle對象，可以訪問主asset bundle) . 如果你所在的業務場景下，拿不到context(不在widget中)，那就使用這個吧，否則使用下面的方式。

   import 'package:flutter/services.dart';
   
   
   Widget _createBody() {
       return new FutureBuilder(
       future: rootBundle.loadString('assets/a.json'),
       builder: (context,snapshot){
           if(snapshot.hasData) {
           return new Text(snapshot.data.toString());
           }
       },
       );
   

2. 通過DefaultAssetBundle 來獲取當前BuildContext 的 AssetBundle，推薦使用。比方法一要靈活。可以自己制定

   import 'package:flutter/services.dart';
   
   
   Widget _createBody() {
       return new FutureBuilder(
       future: DefaultAssetBundle.of(context).loadString('assets/a.json'),
       builder: (context,snapshot){
           if(snapshot.hasData) {
           return new Text(snapshot.data.toString());
           }
       },
       );
   

   針對這2種方式，寫了一個簡答的demo：

   //采用rootBundle
   class _MyStatelessWidgetState extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
       return FutureBuilder(
       future: rootBundle.loadString('assets/a.json'),
       builder: (context, snapshot) {
           if (snapshot.hasData) {
           return new Text(snapshot.data.toString());
           } else {
           return new Container(width:0,height: 0,);
           }
       },
       );
   }
   }
   
   

   a.json的內容：

   

   運行結果：

   

   class MyStatefulWidget extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
           return DefaultAssetBundle(
           bundle: new TestAssetBundle(),
           child: new  _MyStatelessWidgetState(),
           );
       }
       }
   
       class TestAssetBundle extends CachingAssetBundle {
       @override
       Future<ByteData> load(String key) async {
           if (key == 'assets/a.json')
           return ByteData.view(Uint8List.fromList(utf8.encode('Hello World!')).buffer);
           return null;
       }
       }
   
       class _MyStatelessWidgetState extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
           return FutureBuilder(
           future: DefaultAssetBundle.of(context).loadString('assets/a.json'),
           builder: (context, snapshot) {
               if (snapshot.hasData) {
               return new Text(snapshot.data.toString());
               } else {
               return new Container(width:0,height: 0,);
               }
           },
           );
       }
       }
   

   運行結果：

   

圖片資源

1. 推薦的存放目錄： assets/images

   

2. 圖片資源需要聲明

   

   后面會介紹pubspec.yaml的相關知識點

3. 圖片資源的使用

   

不同分辨率的圖片

跟Android的多圖片適配相同，將不同分辨率下的圖片放到對應的目錄即可，如下：

使用：

new Image.asset("assets/images/a.png");

說到分辨率這個，有必要去看下Flutter中屏幕的理解和屏幕適配。這塊將寫成另外一個文檔。

strings資源的管理

參考了github上的一些項目，比較合適的管理方式如下：

新建一個.dart文件，比如uidata.dart:

import 'package:flutter/material.dart';

class UIData {
  //routes  頁面路徑
  static const String homeRoute = "/home";
  static const String profileOneRoute = "/View Profile";
  static const String profileTwoRoute = "/Profile 2";

  //strings
  static const String appName = "Flutter UIKit";

  //fonts  字體相關
  static const String quickFont = "Quicksand";
  static const String ralewayFont = "Raleway";
  static const String quickBoldFont = "Quicksand_Bold.otf";
  static const String quickNormalFont = "Quicksand_Book.otf";
  static const String quickLightFont = "Quicksand_Light.otf";

  //images
  static const String imageDir = "assets/images";
  static const String pkImage = "$imageDir/pk.jpg";

  //login  比如登錄頁面用到的文本
  static const String enter_code_label = "Phone Number";
  static const String enter_code_hint = "10 Digit Phone Number";

  //gneric 通用的文本
  static const String error = "Error";
  static const String success = "Success";

  static const MaterialColor ui_kit_color = Colors.grey;

//colors
  static List<Color> kitGradients = [
    // new Color.fromRGBO(103, 218, 255, 1.0),
    // new Color.fromRGBO(3, 169, 244, 1.0),
    // new Color.fromRGBO(0, 122, 193, 1.0),
    Colors.blueGrey.shade800,
    Colors.black87,
  ];
  static List<Color> kitGradients2 = [
    Colors.cyan.shade600,
    Colors.blue.shade900
  ];

  //randomcolor
  static final Random _random = new Random();

  /// Returns a random color.
  static Color next() {
    return new Color(0xFF000000 + _random.nextInt(0x00FFFFFF));
  }
}

國際化

TODO gang 待完善
https://flutterchina.club/tutorials/internationalization/

添加依賴

在pubspec.yaml 中添加依賴

注意，只有在添加平台所需相關依賴時，才需要去Android 工程中的gradle中添加依賴。

查找 Flutter插件的網站： https://pub.dev/flutter/packages