[Flutter]立体的なCardを作ってみよう(BoxShadowクラス)

酪王カフェオレが美味しいので初投稿です。
今回、BoxShadowクラスという存在を知りました。なのでいじってみようと思います。

#立体的なWidgetを作ってみよう
今回でこんな事ができるようになるよ。
![スクリーンショット 2019-11-11 17.04.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293066/9917f447-e8f1-335d-4cbe-16eb4c1b8324.png)



##どうやって作るのか
Fuji「Boxshadowクラスを使うとできるようになるよ！！」
みんな「・・・・・」
Fuji「はい。ちゃんとやります。」


###とりあえずカードを作ろう

丸パクリして確認したいなら↓

```Dart
// 丸パクリ用のコード
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200.0,
          height: 100.0,
          child: Card(
            color: Colors.blue,
            child: Center(
              child: Text('プリパラは神'),
            ),
          ),
        ),
      ),
    );
  }
}
```

カードのコードだけパクリたいなら↓

```Dart
// カードだけを実装するコード
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200.0,
          height: 100.0,
          child: Card(
            color: Colors.blue,
            child: Center(
              child: Text('プリパラは神'),
            ),
          ),
        ),
      ),
    );
  }
}
```

とりあえずこれでこんなカードが実装できます。
![スクリーンショット 2019-11-11 17.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293066/baa2497d-a60e-6621-f0f7-dec75cd47415.png)


##立体にしよう！
立体にするにはこちら *BoxShadow* を使います。
て事で入れてみよう

```dart
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          /* ここから */
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                spreadRadius: 1.0,
                blurRadius: 10.0,
                offset: Offset(10, 10),
              ),
            ],
            /* ここまでを追加しました */
          ),
          width: 200.0,
          height: 100.0,
          child: Card(
            color: Colors.blue,
            child: Center(
              child: Text('プリパラは神'),
            ),
          ),
        ),
      ),
    );
  }
}
```

色々追加したので、順番に説明
1, 今回の実装はデコレーションの類に入るので*decoration:*を追加
2, *decoration:*にboxShadowを使うには*BoxDecoration()*を使う必要があるので追加
3, boxShadowを使うために*boxShadow:*を追加
4, *boxShadow:*はリストで持つ必要があるんで*[]*を追加
5, そしてついに*BoxShadow()*を追加したような感じです。

やったね、たえちゃん！立体になったよ！！
![スクリーンショット 2019-11-11 17.04.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293066/57380b97-d3f3-f5d3-5732-5218c90be7f9.png)




#少し遊んでみよう
理解を深めるためにコードを少しいじってみましょう。

## color: をいじってみよう
```dart
// これを
color: Colors.black26,
↓
// こうしてみよう
color: Colors.blue,
```

後ろのカラーが青くなるぞ！！
![スクリーンショット 2019-11-11 17.36.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293066/73422031-9683-59ae-95d8-08a020ec9e09.png)


## spreadRadius: をいじってみよう
```dart
// これを
spreadRadius: 1.0,
↓
// こうしてみよう
spreadRadius: 50.0,
```
後ろの「うわー」ってなってるところがでかくなるぞ！！(きもい)
![スクリーンショット 2019-11-11 17.39.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293066/65328644-adb1-f336-4944-cd850d747fc4.png)


## blurRadius: をいじってみよう
```dart
// これを
blurRadius: 10.0,
↓
// こうしてみよう
blurRadius: 1.0,
```
不透明度をいじってるので、値を小さくすれば濃くなるぞ！！
![スクリーンショット 2019-11-11 17.41.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293066/86c8ec64-3c48-8522-5ec4-93a34d03bc83.png)


## offset: をいじってみよう
```dart

// これを
offset: Offset(10, 10),
↓
// こうしてみよう
offset: Offset(100, 100),
```
*Offset(x軸にどれくらいズラすか, y軸にどれくらいズラすか)*を設定しているので、値を大きくすればするほどズレていくぞ！！
![スクリーンショット 2019-11-11 17.47.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293066/d5d6d913-96fd-fbac-79d5-75f2a0b7932f.png)


## boxShadow: がリスト入力。なので複数入れてみよう
```dart
// これを
boxShadow: [
  BoxShadow(
   color: Colors.black26,
   spreadRadius: 1.0,
   blurRadius: 10.0,
   offset: Offset(10, 10),
  ),
]
↓
// こうしてみよう
boxShadow: [
  BoxShadow(
   color: Colors.black26,
   spreadRadius: 1.0,
   blurRadius: 10.0,
   offset: Offset(10, 10),
  ),
  BoxShadow(
   color: Colors.blue,
   spreadRadius: 1.0,
   blurRadius: 10.0,
   offset: Offset(10, 10),
  ),
  BoxShadow(
   color: Colors.red,
   spreadRadius: 1.0,
   blurRadius: 10.0,
   offset: Offset(10, 10),
  ),
]
```

影の色を複数指定できるぞ！なのでレインボーなんてのもここで可能になるよ！！

![スクリーンショット 2019-11-13 12.13.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293066/542ef985-ca7d-b786-98d6-04748901d811.png)