Flutter グラデーション

この記事は[Diverse Advent Calendar 2020](https://qiita.com/advent-calendar/2020/diverse)の25日目の記事です。
この記事は、グラデーションデザインでFlutterアプリケーションを改善する方法についてです。
同じようなデザインのプログレスを作る際はぜひご活用ください.

#TL;DR
Flutter でのグラデーションの設定方法をまとめました。
グラデーションは、デザインの世界で復活を遂げている美しいデザイン要素です。 Hulu、Spotify、Instagramなどの多くのアプリケーションは、製品にそのようなデザインを使用しています。
サンプルコード、表示イメージを用意していますので、利用用途にマッチするものがあればコピペして使ってください。

#グラデーションの種類

Flutter内でグラデーションを使用するには、Containerウィジェット内のdecorationプロパティにアクセスしてから、BoxDecorationを割り当てる必要があります。

Flutterには、3つのグラデーションがあります。 

  *  `Linear` 
  *  `Radial` 
  *  `Sweep`  
この記事では、3つについて説明します

#Linearグラデーションの作成
まず、Linearグラデーションを実装しましょう

```linear_gradient_demo.dart
body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.purple, Colors.red],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Center(
          child: Text(
            'Linearグラデーション',
            style: TextStyle(
              fontSize: 35,
              color: Colors.white,
            ),
          ),
        ),
      )
```
ご覧のとおり、色は左から右に直線的に変化します。この色の変化が異なる方向に発生するように、`Linear`グラデーションを変更できます. デフォルトの方向は`centerLeft`から`centerRight`になります

表示イメージ: 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556410/7aeff49d-b38a-e881-dcb7-913eff9c2da7.png)

#Stops
複数の色があり、それらがグラデーションをどの程度占めるかを制御したい場合はどうしたらいいでしょうか？`Stop`でそれを行うことができます.

* 各色に1つの`stop`を追加します
* Valueは0.0から1.0に増加する必要があります

```radial_gradient_with_stops.dart
 body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.bottomLeft,
              end: Alignment.topRight,
              stops: [
                0.1,
                0.4,
                0.6,
                0.9,
              ],
              colors: [
                Colors.deepPurple,
                Colors.red,
                Colors.orange,
                Colors.amberAccent
              ],
            ),
          ),
        ),
      ),
```
表示イメージ: 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556410/8a9eaa30-aeee-4f29-b0da-1e497d588ea8.png)




#Radial Gradient
Radialグラデーションは、中心点からのピクセルの位置に基づいて色を変更します
Radialグラデーションは、`color`や`stop`などのプロパティを含んでいるという点でLinearグラデーションと非常に似ていますが、`radius`、`focal`、`tileMode`などの他のプロパティも取り込みます。Radialグラデーションを実装しましょう

```radial_gradient_demo.dart
Container(
        decoration: BoxDecoration(
          gradient: RadialGradient(
            colors: [Colors.pinkAccent, Colors.deepPurple],
          ),
        ),
        child: Center(
          child: Text(
            'Radialグラデーション',
            style: TextStyle(
              fontSize: 35,
              color: Colors.white,
            ),
          ),
        ),
      ),
```

表示イメージ: 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556410/33815b1e-6856-3c78-ded1-bb1ef19ee7c2.png)

##Center
上の画像では、Radialグラデーションの中心点は画面の中央にありました。グラデーションの中心を変更する場合は,RadialGradientコンストラクタで`center`プロパティを指定する必要があります。デフォルトは画面の中央です

```
center: Alignment(0.x, 0.y)
```
この画像は、Flutterの配置を理解するのに役立ちます:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556410/c85d9b02-6e8b-8981-236e-8802f7680815.png)

```radialgradient_with_center_demo.dart
Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: [
                Colors.yellow,
                Colors.orange,
                Colors.red,
                Colors.deepPurple
              ],
              stops: [0.4, 0.5, 0.7, 0.9],
              center: Alignment(-1.1, 1.0),
            ),
          ),
        ),
      ),
```
表示イメージ: 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556410/6ed8aaa9-4e8b-9225-dfa2-e4b8e1575524.png)

#Sweep gradients
Sweepグラデーションは他の2つのグラデーションと似ていますが、`startAngle`や`endAngle`などのプロパティを取り入れます。いくつかの`color`と`stop`を使用して、Sweepグラデーションを実装しましょう



```sweep_gradient_demo.dart
 body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: SweepGradient(
              colors: [
                Colors.red,
                Colors.orange,
                Colors.deepPurple,
              ],
              stops: [
                0.1,
                0.6,
                0.9,
              ],
              startAngle: 0.2,
              endAngle: 2.0,
            ),
          ),
        ),
      )
```
表示イメージ: 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556410/3f4b1ff4-1227-472d-f186-3a66a137eee7.png)

#まとめ

グラデーションを使用すると、アプリケーションを美しく見せることができ、Flutterでの使用が簡単になります。
この記事がお役に立てば幸いです.フラッターアプリにグラデーションを追加する方法とともに各タイプのグラデーションをカスタマイズする方法も学んでもらったら嬉しいです。

そしてみんなにメリークリスマス。:tada::tada::tada: