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

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

#立体的なWidgetを作ってみよう
今回でこんな事ができるようになるよ。

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

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

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

// 丸パクリ用のコード
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('プリパラは神'),
            ),
          ),
        ),
      ),
    );
  }
}

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

// カードだけを実装するコード
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('プリパラは神'),
            ),
          ),
        ),
      ),
    );
  }
}

とりあえずこれでこんなカードが実装できます。

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

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()*を追加したような感じです。

やったね、たえちゃん！立体になったよ！！

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

color: をいじってみよう

// これを
color: Colors.black26,
↓
// こうしてみよう
color: Colors.blue,

後ろのカラーが青くなるぞ！！

spreadRadius: をいじってみよう

// これを
spreadRadius: 1.0,
↓
// こうしてみよう
spreadRadius: 50.0,

後ろの「うわー」ってなってるところがでかくなるぞ！！(きもい)

blurRadius: をいじってみよう

// これを
blurRadius: 10.0,
↓
// こうしてみよう
blurRadius: 1.0,

不透明度をいじってるので、値を小さくすれば濃くなるぞ！！

offset: をいじってみよう

// これを
offset: Offset(10, 10),
↓
// こうしてみよう
offset: Offset(100, 100),

*Offset(x軸にどれくらいズラすか, y軸にどれくらいズラすか)*を設定しているので、値を大きくすればするほどズレていくぞ！！

boxShadow: がリスト入力。なので複数入れてみよう

// これを
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),
  ),
]

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