【flutter】BoxDecorationの使い方をわかりやすく

flutterでBoxDecorationの使い方を知りたい方向け。

デモコードを使いながら、この記事でなるべくわかりやすく解説します。

この記事は以下のような方を対象者としています。

flutter初学者の方
flutterでBoxDecorationの使い方が分からない方

今回使用するデモコード
#

まずは、こちらのソースコードをご覧ください。

こちらのコードは“BoxDecoration"と書かれた長方形型のテキストフレームを描画するデモコードです。

こちらのソースを元に解説していきます。

class SplashScreen extends StatefulWidget {
  SplashScreen({Key key, this.title}) : super(key: key);
  final String title;

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _titleArea(),
      ),
    );
  }
}

Widget _titleArea() {
  return Container(
    decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
              color: Colors.black12,
              blurRadius: 10.0,
              spreadRadius: 1.0,
              offset: Offset(10, 10))
        ],
        border: Border.all(color: Colors.black, width: 9),
        borderRadius: BorderRadius.circular(12)),
    padding: EdgeInsets.all(10),
    child: Text(
      "BoxDecoration",
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32.0),
    ),
  );
}

flutterをわかりやすく : BoxDecoration
#

BoxDecorationとはContainer内のプロパティとして使われ、Containerの見た目の装飾に使われます。

できることは様々で、例えばオブジェクトの枠線をつけたり、オブジェクトに影をつけたりできます。

数が多いため、主要なプロパティのみコード付きで解説していきたいと思います。

Widget _titleArea() {
  return Container(
    <!-- 今回の説明対象のコード ここから -->
    decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
              color: Colors.black12,
              blurRadius: 10.0,
              spreadRadius: 1.0,
              offset: Offset(10, 10))
        ],
        border: Border.all(color: Colors.black, width: 9),
        borderRadius: BorderRadius.circular(12)),
    <!-- 今回の説明対象のコード ここまで -->
    padding: EdgeInsets.all(10),
    child: Text(
      "BoxDecoration",
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32.0),
    ),
  );
}

flutterをわかりやすく : boxShadowプロパティとは
#

BoxShadowプロパティはその名の通りオブジェクトに影エフェクトをつける時に使われます。

影をつけることでより立体感のある見た目(UI)のオブジェクトを作ることができます。

color : 影の色
blurRadius : 影の濃さ
spradRadius : 影の広さ（大きさ）
offset : 影の位置(x軸,y軸)

Widget _titleArea() {
  return Container(
    decoration: BoxDecoration(
      <!-- ここから -->
        boxShadow: [
          BoxShadow(
              color: Colors.black12,
              blurRadius: 10.0,
              spreadRadius: 1.0,
              offset: Offset(10, 10))
        ],
        <!-- ここまで -->
        border: Border.all(color: Colors.black, width: 9),
        borderRadius: BorderRadius.circular(12)),
    padding: EdgeInsets.all(10),
    child: Text(
      "BoxDecoration",
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32.0),
    ),
  );
}

flutterをわかりやすく : borderプロパティとは
#

borderプロパティはオブジェクトの枠線を定義します。

強調したいコンポーネントがあった場合にこのborderプロパティを使用します。

color : 影の色
blurRadius : 影の濃さ
spradRadius : 影の広さ（大きさ）
offset : 影の位置(x軸,y軸)

Widget _titleArea() {
  return Container(
    decoration: BoxDecoration(
      
        boxShadow: [
          BoxShadow(
              color: Colors.black12,
              blurRadius: 10.0,
              spreadRadius: 1.0,
              offset: Offset(10, 10))
        ],
        <!-- ここから -->
        border: Border.all(color: Colors.black, width: 9),
        borderRadius: BorderRadius.circular(12)),
        <!-- ここまで -->
    padding: EdgeInsets.all(10),
    child: Text(
      "BoxDecoration",
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 32.0),
    ),
  );
}