今回使用するデモコード

tranquilpeak

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

こちらのコードは“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),
    ),
  );
}