flutterでColumn/Row/Center/Containerの理解が曖昧な方向け。
flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。
ColumnとRowを使いこなしてオブジェクトを自由に配置できるようになろう!
目次
この記事は以下のような方を対象者としています。
本記事の対象者
- flutter初学者の方
- flutterでオブジェクト配置のやり方が分からない方
- flutterでレイアウトの設定のやり方が分からない方
今回使用するデモコード
まずは、こちらのソースコードをご覧ください。
こちらのコードは赤色、青色、緑色の四角形型オブジェクトを描画するデモコードです。
こちらのソースを元に解説していきます。
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),
);
}
|
flutterをわかりやすく : Rowとは
Rowプロパティとはオブジェクトを横並べにしたい時に使います。
デモアプリでも子要素のChildren内のウィジェットがRowの設定により横並びになっています。
デフォルトの設定ではこれら子ウィジェットはスクロールすることはできません。
また、もしも子ウィジェットが多数ある場合にはChildrenで囲むよりもListViewを使う方が好ましいです。
また、もしスクロールが必要な場合は別途別のウィジェットでラッピングする必要がありますが、詳しくは別記事で説明予定です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
|
class _SplashScreenState extends State<SplashScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
<!-- 横並びレイアウトにするためRowで設定 -->
child: Row(
children: <Widget>[
Expanded(
child: _redBoxWidget(),
),
Expanded(
child: _blueBoxWidget(),
),
Expanded(
child: _greenBoxwidget(),
)
],
),
));
}
}
|
flutterをわかりやすく : Columnとは
こちらはRowとは逆にオブジェクトを縦並べにしたい時に使います。
Row同様にChildren要素内に複数のオブジェクトを配列形式で保持することができる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
|
class _SplashScreenState extends State<SplashScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
<!-- 縦並びレイアウトにするためColumnで設定 -->
child: Column(
children: <Widget>[
Expanded(
child: _redBoxWidget(),
),
Expanded(
child: _blueBoxWidget(),
),
Expanded(
child: _greenBoxwidget(),
)
],
),
));
}
}
|
flutterをわかりやすく : Centerとは
Centerは子ウィジェットを中央に配置することができるウィジェットです。
CenterはColumnやRowのように複数の子ウィジェットを設定することはできません。
そのためデモコードもchildrenからchildプロパティに変更しています。
また、Centerウィジェットが動作していることをわかりやすく伝えるため、redBoxWidgetにwidth,heightプロパティを100ずつで設定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
|
class _SplashScreenState extends State<SplashScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: _redBoxWidget(),
),
));
}
}
Widget _redBoxWidget() {
return Container(
<!-- 中央配置を確認するためwidthとheightを100に設定 -->
width: 100,
height: 100,
color: Colors.red,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.all(10.0),
);
}
|
flutterをわかりやすく : Containerとは
こちらは子ウィジェットでカスタマイズするための基本ウィジェットです。
paddingの設定や背景設定も子ウィジェット内で設定することで柔軟にカスタマイズすることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
|
class _SplashScreenState extends State<SplashScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: _redBoxWidget(),
),
));
}
}
Widget _redBoxWidget() {
return Container(
<!-- 中央配置を確認するためwidthとheightを100に設定 -->
width: 100,
height: 100,
color: Colors.red,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.all(10.0),
);
}
|
さいごに
ここまでお読みいただきありがとうございました。
僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」がどのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃
手間暇かけずにサクッとアフィリエイト用のブログサイトを作りたいという方向け。
ある程度自由にカスタマイズできる、かつコマンド一つで 記事の自動生成ができる静的サイトジェネレータ「HUGO」についてまとめました。
また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます。
以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌
速習!おすすめプログラミング勉強法【Udemy】
いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。
Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。
ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました
Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy
また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃
人気記事
未経験だけどプログラミングを学んでエンジニアになりたい、社会人だから時間もそれほど多く無いので効率よく勉強したい。
私もその内の一人でした。今回の記事で最短でエンジニアになるためのおすすめUdemy講座4選をご紹介したいと思います。
プログラミングを勉強し始めてIT資格を取ろうか悩んでいる方向け。
プログラミング未経験の方が資格勉強をされることは僕の経験上おすすめしません。
なぜ資格の勉強がプログラミング学習において、エンジニアの就活においてNGかこの記事で解説します。
個人で副業のためにアプリ開発をしてみたいと考えている方向け。
iOS/Androidの個人アプリ開発の場合データのやりとりを行うため、サーバを契約する人が多いです。
しかし、考えなしにサーバを契約するのは非常に大きなデメリットがあるため、私はあまりオススメしません。
ではどの様にしてお金をかけずにアプリ作りができるか、なぜFirebaseを使うべきなのかこの記事で解説していきます。
海外での就活を考えている方向けの記事です。
ブラック企業は日本企業のイメージがありますが、そんなことはありません。
日本の就活とは違う点、また海外の就活で失敗しないために事前に知っておいた方が良い情報を本記事にてまとめていきます。
ベトナム・ダナン生活関連
最近観光地として人気が高まっているダナンですが、近年物価の変動が大きくなっていっているように感じます。
2019年〜2020年でのダナンの物価はどのようなものなのか、ダナン在住者として現地の声をお届けできればと思います
日本ってやっぱり「働く」ことに関しては異常ですよ。
「お客様は神様」精神、残業を美徳とする文化、過労死という言葉を作り出してしまう労働環境。
今回は日本の異常な労働環境をベトナムの労働環境と比較しながら説明したいと思います😱
海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。
ベトナム・ダナンへ移住を考えている方向け。
海外移住をする上で家賃相場を事前に知っておくことは生活費がどれくらいかかるのか計算ができるので非常に重要です。
こちらの記事で家賃相場、賃貸契約の流れ、賃貸契約時のトラブルについて解説していきます。
技術メモ・プログラミング関連
AWS ソリューションアーキテクトの勉強をしている方向け。
Udemyでのおすすめ講座、一発合格のための勉強方法から受験の手順まで本記事でまとめました。
認定試験の受験を考えている方には必見です。
こんにちはkzyです。
今回は文字認識ライブラリのPyOCRとTesseractを使って画像からテキストを抽出したいと思います。
環境構築含めpythonでの文字認識のやり方を簡潔に説明できればと思います。
flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。
flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。
</div>
こんにちはkzyです。
今回はPyOCRで文字認識したテキストをエクセルに出力する方法を解説します。
具体的にはXlsxWriterというライブラリを使用してPythonスクリプトからエクセル操作を行います。