flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。

flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。

SizedBoxとExpandedを使いこなしてサイズ調整をできるようになろう！

目次

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

本記事の対象者

  • flutter初学者の方
  • flutterでオブジェクトのサイズ調整のやり方が分からない方

SizedBoxとExpandedのデモコード

tranquilpeak

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

こちらのコードでは、赤色、青色、緑色の四角形型オブジェクトを描画するデモコードです。

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

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
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: Container(
        child: Row(
            children: <Widget>[
                <!-- 今回の説明部分 -->
                Expanded(
                    child: _redBoxWidget(),
                ),
                Expanded(
                    child: _blueBoxWidget(),
                ),
                Expanded(
                    child: _greenBoxwidget(),
                )
            ],
      　),
    ));
  }
}

<!-- 赤色のボックスを描画 -->
Widget _redBoxWidget() {
  return Container(
    color: Colors.red,
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.all(10.0),
  );
}

<!-- 青色のボックスを描画 -->
Widget _blueBoxWidget() {
  return Container(
    color: Colors.blue,
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.all(10.0),
  );
}

<!-- 緑色のボックスを描画 -->
Widget _greenBoxwidget() {
  return Container(
    color: Colors.green,
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.all(10.0),
  );
}

ちなみにアプリで表示するとこんな感じです。

tranquilpeak

flutterをわかりやすく : Expandedとは

こちらはオブジェクトを縦もしくは横いっぱいにオブジェクトを表示するために使われます。

KotlinやJavaのコードでいうと”match_parent”のような役割です。

このExpandedのおかげでオブジェクトにwidthやheightの設定が不要になります。

また、ExpandedはColumn(オブジェクトを縦に並べる)、Row(オブジェクトを横に並べる)、もしくはFlex(比率で並べる)内で使われる必要があります。

flutterをわかりやすく : SizedBoxとは

こちらはExpandedとは対照的にwidthとheightで厳密にオブジェクトのサイズを指定したい時に使われます。

試しに先ほどのコードを一部ExpandedをSizedBoxに修正したコードと画像を添付します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: Row(
        children: <Widget>[
          <!-- ExpandedからSizedBoxに変更しwidthとheightを指定 -->
          SizedBox(
            width: 200,
            height: 200,
            child: _redBoxWidget(),
          ),
          Expanded(
            child: _blueBoxWidget(),
          ),
          Expanded(
            child: _greenBoxwidget(),
          )
        ],
      ),
    ));
  }
}

tranquilpeak

この通り赤色のボックスのサイズが縦横共に変わっていますね。

ColumnやRowやFlex内でExpanded等サイズを調整するキーワードがない場合

この場合は「”RenderBox was not laid out”」というエラーが発生します。

これはつまりオブジェクトのサイズ調整に関連する情報が定義されていないので、どのように描画していいか分からないということでエラーが返ってきます。

そのため、ColumnやRowなどオブジェクトの並べ方に関する定義をしたら忘れずにサイズ調整の情報も定義してください。

さいごに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

【Udemy】未経験から始める格安プログラミング講座4選

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

【Udemy】未経験から現場で活躍できるエンジニアになるための実践プログラミング講座5選

プログラミング未経験だけどエンジニアになりたい方向けで記事を書きました。 実際にUdemyを受講してエンジニアになった経験から、実務で必要とされる知識を学べるUdemyのおすすめ講座をこちらの記事でご紹介できれはと思います。 中には無料で受けられる講座もあるので、興味のある方必見です😄

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

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