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

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

BoxDecorationを使いこなしてオブジェクトを自由に配置できるようになろう！

目次

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

本記事の対象者

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

今回使用するデモコード

tranquilpeak

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
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の見た目の装飾に使われます。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
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軸)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
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軸)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
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),
    ),
  );
}

さいごに

ここまでお読みいただきありがとうございました。

僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」がどのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃

【コピペok】hugoでアフィリエイト用ブログサイトを作ろう

手間暇かけずにサクッとアフィリエイト用のブログサイトを作りたいという方向け。

ある程度自由にカスタマイズできる、かつコマンド一つで 記事の自動生成ができる静的サイトジェネレータ「hugo」についてまとめました。

また、海外移住の 英語とプログラミングを習得することを推奨しています。

これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます。

以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌

速習！おすすめプログラミング勉強法【udemy】

いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはudemyでした。

udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。

ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました

udemyのコースは1つ1,000円ほどなので、itの参考本を一冊(3,000円)を買うよりもudemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトudemy

また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくてムーンウォークしながら寝落ちします💃

関連記事

【コピペOK】flutterのSizedBoxとExpandedの違いをわかりやすく

flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。 flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。

【flutter初心者】Column/Row/Center/Containerの違いをわかりやすく

flutterでオブジェクトのオブジェクト配列の理解が曖昧な方向け。 flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。

【無料で学べる】Udemyのおすすめフロントエンド講座4選

海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。