酪王カフェオレが美味しいので初投稿です。
今回、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),
),
]
影の色を複数指定できるぞ！なのでレインボーなんてのもここで可能になるよ！！
