Flutter學習-8-2 一些有趣的文字展現

 一、有邊框的文字

Stack(  //透過stack 布景可以將部件重疊
  children: <Text>[
    Text(
      "要設定的文字" * 10, //文字資料，此文字一定要給
      style: TextStyle( //文字樣式設定
        fontSize: 20,  //文字大小
        foreground: Paint()  //宣告一個paint()物件
          ..style = PaintingStyle.stroke // 屬性設定為線
          ..strokeWidth = 6 //線的寬度為6
          ..color = Colors.blue[700]!,  //底面的顏色(框的顏色)
      ),
    ),
    Text(  // 此文字設定會疊在Text上面
      "要設定的文字" * 10,
      style: TextStyle(  
        fontSize: 20,  ////文字大小
        color: Colors.grey[300],  //文字的顏色
      ),
    ),
  ],
),

官網範例連結:
https://api.flutter.dev/flutter/painting/TextStyle-class.html

其二：

Center(
  child: Stack(
    children: [
      Text(
        '測試',
        style: TextStyle(
          fontSize: 80,
          color: Colors.pink,
          fontWeight: FontWeight.w900,
        ),
      ),
      Text(
        '測試',
        style: TextStyle(
          fontSize: 80,
          color: Colors.white,
          fontWeight: FontWeight.w100,
        ),
      ),
    ],
  ),
),

二、漸層文字

Text(
  '測試漸層顏色',
  style: TextStyle(
    fontSize: 40,
    foreground: Paint()  
      ..shader = const LinearGradient(
        //shader著色器 LinearGradient線性漸變 RadialGradient：放射狀漸變 SweepGradient：扇形漸變
        begin: Alignment.centerLeft,
        //漸變由那裡開始
        tileMode: TileMode.clamp,
        //.clamp自動延伸 .mirror鏡面 .repeated 重覆
        colors: [Colors.blueAccent, Colors.greenAccent],
        //要變化的顏色
        stops: [0, 1], //顏色變化對應的點位罝，如果有三個顏色，就要設3個點，由0-1
      ) //顏色由淺藍至淺綠
        .createShader(Rect.fromLTWH(  //0,0為左上頂點位置,後面為寬及高
              0,
              0,
              MediaQuery.of(context).size.width,
              MediaQuery.of(context).size.height)),
  ),
),

paint 使用參考:

https://iter01.com/589268.html  Flutter自繪-02-Canvas 與 Paint基礎

https://www.gushiciku.cn/pl/pZQD/zh-tw  Flutter文字渐变(一)--Text渐变

https://bbs.huaweicloud.com/blogs/315633 【Flutter 专题】32 图解自定义 View 之 Paint

https://www.jianshu.com/p/d29eab4e933c Flutter 24: 易忽略的【小而巧】的技术点汇总 (三)