【Flutter/Dart開発】見た目を整えるための基礎知識をまとめた【スマホアプリ】

こんにちは、たちつてとです。

ある程度は自分用にですが、Flutterでページの画面を整えるために必要な知識をまとめました。

3 日くらい前までは装飾すらままならなかったので...初心者は誰もが通る道と思った次第です。本ページでは、以下のことを述べます。

• 要素を上下/左右に並べるRowとCol
• 背景色や要素の高さ/長さを決めるContainer/SizedBox

はい、では本題。

要素を上下/左右に並べるRowとCol

要素を縦に並べるCol

←、わしの開発中の画面ですわ。→実際のソースを簡略化したものですわ。

緑色で全体を囲んでいる

Column(children:<Widget>[

])

というのの子要素

Card(1行目)、Row(2行目)、Container(3行目)

が縦に配置されていくという形になります。

※Cardというのは、見た目のために配置してます。Containerに置き換えてもらって大丈夫です。 

という具合に、

Columnの中身は縦に配置

されます。

要素を横に並べるRow

お次、↑画像にて2行目にRowがあります。

2行目には、「日付選択」と書いてある要素と、「金」と書いてある要素があります。

単純にこれだけです。ソースで対応するのは、Row()の中に書いてある

CardとCardになります。もうお気づきでしょうが、

Rowの中身は横に配置

されます。要素を横並びに配置したいときは、Rowの出番となります。

共通事項：Alignment

なんだかんだ使うやつ。Column/Rowの共通なプロパティで、

左寄せとか右寄せみたいなやつです。

プロパティは、

mainAxisAlignment:MainAxisAlignment.なになに

mainAxisというのは、Columnなら縦方向、Rowなら横方向です。

僕がよく使う(って言っても開発したアプリはなくて、現在進行形なアプリが1個ですが！)

のは、Rowに対してなになに=spaceEvenlyです。

横方向に関して、等間隔に要素を横並びにしてくれます。

Htmlとはちょっと違う

htmlにはtableタグがありますが、tableの書き方とは違いますよね。

tableタグに対応するものはありませんし、colspanやrowspanなどもありません。

• Columnの中に要素を作れば行が作られる→tableみたいに整列する
• 横並びにしたければRow
• 行中で縦並びにしたい→Row(Column(A,B), Column(C))

という具合ですね。htmlの話は忘れたほうが、サクッと理解できます。

背景色や要素の高さ/長さを決めるContainer/SizedBox

あまり述べることはないんですが...htmlの装飾は、

class="abc"とかstyle="width"とかで、インライン要素とかブロック要素とかあるものの、

割とシンプルに手早く要素を装飾することができます。

一方、Dart言語では、どの要素にもwidthやheight、colorといったプロパティが

あるわけではありません。大変よく利用されるんじゃないかと思うのが、やはりContainer。

Container(

　width:100,

    height:100,

    color:Colors.red

)

って感じで、長さ、高さ、背景色指定ができます。同様に、

SizedBox(

    width:100,

    height:100

)

という感じで、サイズ指定できます。ただし、sizedBoxは背景色のプロパティがありません。

まあ、Container使っとけばいいのではないでしょうか。

あとは、要素間の隙間を埋まるように勝手にサイズ指定してくれる

Expandedというのもあります。

という感じで、

大変簡単ではありますが、以上になります。

プロパティを全部かくとえらいことになりそうなので、少なくとも初心者が

まあ使いそうなやつ、という感じになりました。

Javaのオブジェクト指向がゼッタイにわかる本［第2版］ [ 立山秀利 ] 価格：2530円（税込、送料無料) (2021/9/26時点)

Flutter　モバイルアプリ開発バイブル [ 南里勇気 ] 価格：3509円（税込、送料無料) (2021/9/20時点)

エンジニア発オンラインスクール【RUNTEQ】