Flutter學習- Decoration

 Decoration有四個子類：一、BoxDecoration，透過這個類，可以改變邊框、容器的圓角、陰影、形狀、漸變和背景圖像；二、ShapeDecoration可以指定四個邊的顏色、寬度、底部線、矩形邊色、圓形邊色、豎向橢圓、多邊形的邊色；三、FlutterLogoDecoration專門在調整FlutterLogo的裝飾；四、UnderlineTabindicator則作下劃線的調整。

一、BoxDecoration類別和屬性

const BoxDecoration({
  this.color,  //顏色  color:Colors.red
  this.image,  //圖片  
  this.border,  //邊線 border
  this.borderRadius,  //邊線圓角
  this.boxShadow,  //邊線陰影 
  this.gradient,  //漸變
  this.backgroundBlendMode,  //前景和背景的重疊方式
  this.shape = BoxShape.rectangle,  //形狀，有 shape: BoxShape.rectangle(方) BoxShape.circle(圓)

(1)顏色 color

color:Colors.bule,
color:Color(0xffdc380d),
color.fromRGBO(3, 54, 255, 1),
color:Colors.blue.shade50,

(2)圖片image
image:DecorationImage( image: AssetImage('graphics/background.png'),

image:DecorationImage( image: Image.network("https://www.google.com.tw/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"),),

(3)邊線 border

範例:

 decoration: //裝飾器
BoxDecoration(  //裝飾器的子類
   color: Colors.red, //背景色
   boxShadow: [BoxShadow(color: Colors.blue, offset: Offset(3.0,3.0), blurRadius: 8.0)],  //陰影，用陣列包著。
   border:Border.all(color: Colors.black,width:1.0 ), //邊線
   //borderRadius: BorderRadius.all(Radius.circular(20.0),),//圓角 Radius.elliptical為橢圓
   //線條
   shape: BoxShape.rectangle,  //此為方形，注意若使用Boxshape.circle時，因為已經是圓形就不能使用boardRadius
  gradient: LinearGradient(colors: [  //線形漸變
    Colors.blue,
    Colors.red,
  ]),
 ),

二、ShapeDecoration

除了shape部分，屬性於上相面相同。

參考資料:

https://blog.csdn.net/chenlove1/article/details/83627831

https://www.imangodoc.com/171942.html