flutter / dart 筆記：處理文字與圖片

發布時間：

處理文字

  1. 使用 Text 類別設定文字，第一個參數是一個字串，後面是屬性設定
  2. 使用 style: TextStyle() 設定文字屬性，TextStyle裡可以放置元素如下
    1. fontSize:14   字體大小，預設14
    2. color    文字顏色，可用 Color(0xAARRGGBB) 或 Colors.blue 表示
    3. decoration    文字加線條
      1. decoration: TextDecoration.underline    加入底線
      2. decoration: TextDecoration.lineThrough    加入刪除線
      3. decoration: TextDecoration.overline    文字上方加一條線
    4. fontWeight
      1. fontWeight: FontWeight.normal
      2. fontWeight: FontWeight.bold
      3. fontWeight: FontWeight.w100 - w900   w100最細，w900最粗
    5. backgroundColor
  3. 使用 textAlign 設定對齊方式
    1. textAlign: TextAlign.left
    2. textAlign: TextAlign.right
    3. textAlign: TextAlign.center
    4. textAlign: TextAlign.justify  (左右兩端對齊)
  4. 使用 maxLines 限制最多幾行。沒設定的話會自動調整；有設置的話，超過的部份會被隱藏

處理圖片

  1. 在專案資料夾，增加一個 assets 資料夾，並且將圖片存入
  2. 在 pubspec.yaml 檔案中，尋找 flutter: 段落，在其下加入 assets: 後，將圖片路徑加上去
  3. 使用 var img = Image.asset('assets/flutter.png') or Image.network('https://google.com/logo.png') 指定圖片物件
  4. 放到 appbody 的 child 中

圖片屬性

  1. scale  改變圖片大小，作用為倒數分之一
  2. width
  3. height
  4. fit
    1. fit: BoxFit.fill    填滿整個空間
    2. fit: BoxFit.contain    維持原來大小
    3. fit: BoxFit.cover    保持寬高比，並讓影像填滿空間，超出部份會被裁掉
    4. fit: BoxFit.fitWidth    保持寬高比，並讓影像填滿空間的寬度，高度可能會被裁掉或留白    
    5. fit: BoxFit.fitHeight   保持寬高比，並讓影像填滿空間的高度，寬度可能會被裁掉或留白

範例程式碼 


import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    //在 Text的 style中，可以指定color, decoration, fontweight textalign
    var appTitle = Text('first flutter app'),
        hiFlutter = Text(
          'Hi, Flutter',
          style: TextStyle(fontSize: 30,
          color: Colors.blue,
          decoration: TextDecoration.underline,
          fontWeight: FontWeight.bold,),
          textAlign: TextAlign.center,
        );

    //可以用 Image.asset or Image.network 取得圖片
    //var img = Image.asset('assets/2022_0630_141314.jpg');
    var img = Image.network('https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
      //scale: 2,
      //width: 200,
      //height: 500,
      fit: BoxFit.cover,
    );
    var appBody = Center(
      child: img,
    );

    var appBar = AppBar(
      title: appTitle,
      backgroundColor: Color(0xffff0000),
    );

    var app = MaterialApp(
      home: Scaffold(
        appBar: appBar,
        body: appBody,
        backgroundColor: Colors.yellow,
      ),
    );

    return app;
  }
}