【Flutter】ContainerのBoxDecorationまとめ

よく使うのに鳥頭なのですぐ忘れるためまとめました。

## color
背景色。
普通にContainerの方で使えますが、BoxDecorationを使う場合はこちらの方に記入しないとエラーが出ます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490875/7c340053-bdf3-769b-67ee-e54e447d4344.png" width="300">

``` dart
Container(
  height: 100,
  width: 300,
  decoration: BoxDecoration(
    color: Colors.red
  ),
)
```

## border
枠線。
色や太さの設定ができます。
その他にも上だけ枠線を設定することもできます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490875/529a2f2b-e62e-698e-bec3-e35febb4368d.png" width="300">

``` dart
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     color: Colors.yellow,
     border: Border.all(color: Colors.red, width: 10),
   ),
 ),
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     color: Colors.greenAccent,
     border: Border(
       left: BorderSide(
         color: Colors.blue,
         width: 10.0
       ),
       bottom: BorderSide(
         color: Colors.blue,
         width: 5.0
       ),
     ),
   ),
 ),
```

## borderRadius
角。
角の度合いを設定できます。
一部の角だけ角を変えることもできます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490875/12542736-33c4-2ec9-51be-728afbc2b960.png" width="300">

``` dart
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     color: Colors.red,
     border: Border.all(color: Colors.black, width: 10),
     borderRadius: BorderRadius.circular(20.0),
   ),
 ),
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     color: Colors.blue,
     borderRadius: BorderRadius.only(
       topLeft: Radius.circular(30.0),
       topRight: Radius.circular(30.0),
     ),
   ),
 ),
```

### 丸が作りたいとき
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490875/c156c915-838f-25a8-a8ef-7d98ec186507.png" width="300">

``` dart
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     color: Colors.red,
     shape: BoxShape.circle,
   ),
 ),
```
`borderRadius`プロパティの代わりに`shape`プロパティで書いてあげます。

## boxShadow
影。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490875/6bbab3b0-5b07-035c-04a6-f9b6a1812847.png" width="300">

``` dart
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     color: Colors.red,
     borderRadius: BorderRadius.circular(20.0),
     boxShadow: [
       BoxShadow(
         blurRadius: 20.0,
         color: Colors.red.withOpacity(0.5),
         offset: Offset(10, 15),
       ),
     ],
   ),
 ),
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     color: Colors.blue,
     boxShadow: [
       BoxShadow(
         color: Colors.black,
         offset: Offset(15,20),
         spreadRadius: 10.0,
       ),
     ],
   ),
 ),
```
下表はBoxShadowのプロパティを簡単にまとめたものです。

| プロパティ名 |  | 説明 |
|:-:|:-:|:-:|
|  color |  Color | 影の色  |
| borderRadius  | double  | 影の広がり具合(値が大きいほど薄く大きく広がる)  |
| offset  |  Offset | 影のズレ具合 Offset(x,y)  |
| spreadRadius | double  | 影の色の広がり具合(値を大きくしても色は薄くならない) |

## gradient
グラデーション。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490875/464b2844-8bce-045d-e102-4fe26b2484b6.png" width="300">

``` dart
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     borderRadius: BorderRadius.circular(20.0),
     gradient: LinearGradient(
       begin: Alignment.topLeft,
       end: Alignment(0.9, 0.0),
       colors: [
         const Color(0xffee0000),
         const Color(0xffffa500)
       ],
     ),
   ),
 ),
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     gradient: RadialGradient(
       radius: 0.6,
       colors: [
         const Color(0xff000080),
         const Color(0xff4169e1),
       ],
     tileMode: TileMode.repeated,
     ),
   ),
 ),
```
#### 簡単な解説
`LinearGradient` …… 線でグラデーション

| プロパティ名 |  | 説明 |
|:-:|:-:|:-:|
|  begin |  AlignmentGeometry | グラデーションの開始位置 |
|  end |  AlignmentGeometry |  グラデーションの終了位置 |
|  colors | List<Color>  | グラデーションに使う色のリスト |
|  tileMode | TileMode | 繰り返したりできる |

`RadialGradient` …… 円でグラデーション

| プロパティ名 |  | 説明 |
|:-:|:-:|:-:|
|  center |  AlignmentGeometry | グラデーションの開始位置 |
|  radius  |  double |  円の大きさ |
|  colors | List<Color>  | グラデーションに使う色のリスト |
|  tileMode | TileMode | 繰り返したりできる |

## image
画像。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490875/573b5ce3-8698-7697-e90b-c40f0a8cce0b.png" width="300">

``` dart
 Container(
   height: 100,
   width: 300,
   decoration: BoxDecoration(
     borderRadius: BorderRadius.circular(20.0),
     image: DecorationImage(
       image: AssetImage("assets/images/mountain.jpg"),
       fit: BoxFit.cover
     ),
   ),
 ),
```

---

## 最後に
閲覧頂きありがとうございました。何かしらに役立てば幸いです。
また、間違いなどがありましたらご指摘ください。