Flutterには、さまざまなウィジェットが用意されており、デザインをカスタマイズするための機能も充実しています。その中でも、BoxDecorationは、背景色やグラデーション、ボーダー、角丸など、ウィジェットの装飾を行うためによく使われます。
ここでは、BoxDecorationの使い方について、詳しく解説していきます。
目次
BoxDecorationとは
BoxDecorationは、ウィジェットの装飾を行うためのクラスです。主にContainerウィジェットと一緒に使われます。
以下は、BoxDecorationの定義方法です。
BoxDecoration({
Color? color,
DecorationImage? image,
Border? border,
BorderRadiusGeometry? borderRadius,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape = BoxShape.rectangle,
})引数
- color: 背景色を指定します。
- image: 背景に使用する画像を指定します。
- border: ボーダーを指定します。
- borderRadius: 角丸を指定します。
- boxShadow: 影を指定します。
- gradient: グラデーションを指定します。
- backgroundBlendMode: 背景の合成モードを指定します。
- shape: ボックスの形状を指定します。
BoxDecorationの使い方
BoxDecorationは、Containerウィジェットのdecorationプロパティに設定することで、ウィジェットをカスタマイズすることができます。
以下は、BoxDecorationの使い方です。
背景色の変更
Containerブロックの背景を変更します。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BoxDecoration',
home: Scaffold(
appBar: AppBar(
title: Text('BoxDecoration'),
),
body: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: Text('Hello'),
),
),
),
);
}
}
背景色以外にも、以下のようなカスタマイズができます。(これ以降のサンプルコードはContainerブロックを抜粋した形で記載します。)
画像を背景に設定する
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/background.png'),
fit: BoxFit.cover,
),
),
child: Text(
'Hello',
style: TextStyle(fontSize: 36),
),
),
ボーダーを設定する
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 2.0,
),
),
child: Text('Hello'),
),
角丸を設定する
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 2.0,
),
borderRadius: BorderRadius.circular(10.0),
),
child: Text('Hello'),
),
影を設定する
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 2.0,
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 10.0,
spreadRadius: 5.0,
offset: Offset(0.0, 5.0),
),
],
),
child: Text('Hello'),
),
グラデーションを設定する
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 2.0,
),
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Text(
'Hello',
style: TextStyle(fontSize: 36),
),
),上記の例では、青色から緑色にかけてのグラデーションを設定しています。
BoxShapeを設定する
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 2.0,
),
shape: BoxShape.circle,
),
child: Text(
'Hello',
style: TextStyle(),
),
),上記の例では、BoxShapeをcircleに設定しているため、Containerウィジェットが円形になっています。
まとめ
BoxDecorationは、Containerウィジェットの装飾をカスタマイズするためによく使われます。背景色、画像、ボーダー、角丸、影、グラデーションなど、さまざまな設定が可能です。また、BoxShapeを指定することで、ウィジェットの形状を変更することもできます。
以上が、FlutterのBoxDecorationについての解説でした。