flutterでColumn/Row/Center/Containerの理解が曖昧な方向け。
flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。
ColumnとRowを使いこなしてオブジェクトを自由に配置できるようになりましょう。
この記事は以下のような方を対象者としています。
- flutter初学者の方
- flutterでオブジェクト配置のやり方が分からない方
- flutterでレイアウトの設定のやり方が分からない方
今回使用するデモコード#
まずは、こちらのソースコードをご覧ください。
こちらのコードは赤色、青色、緑色の四角形型オブジェクトを描画するデモコードです。
こちらのソースを元に解説していきます。
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を使う方が好ましいです。
また、もしスクロールが必要な場合は別途別のウィジェットでラッピングする必要がありますが、詳しくは別記事で説明予定です。
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要素内に複数のオブジェクトを配列形式で保持することができる。
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ずつで設定しています。
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の設定や背景設定も子ウィジェット内で設定することで柔軟にカスタマイズすることができます。
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),
);
}さいごに
ここまでお読みいただきありがとうございました。
私のブログ記事を読んでいる方の中には海外転職・海外移住への興味がある方もいらっしゃるかと思います。
僕はもともと営業職から転職してITエンジニアになり、現在ベトナムで働き始めて7年目になります。
私自身ベトナムで働き始めて7年目になりますが、海外就職を実現するために大事なのは 英語力と開発現場で働いた経験だと感じました。
もし今後海外移住・海外就職を本気で実現させたい方はぜひこれらのサービスを活用してみてください。
また、独学でのベトナム語習得を目指しており現在Youtubeにもベトナム語で動画を更新しております。
日本語字幕もつけて楽しく見れるよう頑張っておりますので、そちらもぜひご興味あればご覧いただけますと幸いです。
ゼロから始めるITエンジニア | テックゲート転職
未経験からITエンジニアを目指すなら「テックゲート転職」がおすすめです。
IT業界に特化したキャリアアドバイザーが、プログラミング未経験者でも安心してスタートできるよう親身にサポートしてくれます。
履歴書・ポートフォリオ作成から面接対策、企業選びまで徹底サポートしてくれるので、キャリアチェンジに不安がある方も安心です。
僕自身も異業種からITエンジニアに転職した経験があるので、第一歩を踏み出すサポートの重要性は痛感しています。
👉「IT業界で働いてみたい」と思ったその瞬間がチャンスです！
▶【公式サイトはこちら】
ゼロから始める英語学習 | スタディサプリENGLISH
ベトナムでITエンジニアとして働く私にとって、英語でのスムーズなやり取りは欠かせません。
スタディサプリENGLISH（新日常英会話コース）は、実践的な会話表現をドラマ仕立てで学べる神アプリ。
1回3分で完結するレッスンだから、忙しい日常でも継続しやすく、自然な表現力が身につきます。英語での雑談や会議がもっとラクになります！
👉今すぐ無料体験して、自信を持って話せる自分に近づきましょう！
▶【公式サイトはこちら】
ゼロから始めるベトナム語学習 | ベトナム語動詞クイズ
ベトナム語動詞検定アプリは、日常会話に必須のベトナム語動詞を効率よく習得できる無料学習ツールです。
四択クイズ形式で出題されるため、ゲーム感覚で語彙力を強化でき、スキマ時間の学習にも最適です。
出題はランダム化されており、繰り返し学習することで自然に記憶が定着します。
初級者から中級者まで対応しており、語彙レベルごとに分かれたカテゴリも充実。
音声読み上げ機能が搭載されているため、発音の練習にも活用可能です。
これからベトナム語を本格的に学びたい方、語学試験対策や留学前の準備をしたい方におすすめのアプリです。
今すぐ「ベトナム語動詞検定」で、語学力アップを目指しましょう！
ゼロから始めるベトナム語学習 | ベトナム語漢越語クイズ
「ベトナム語漢越語発音クイズ」は効率的に語彙力と発音を強化できる無料学習ツールです。
四択クイズ形式で、視覚と聴覚の両方からアプローチし、記憶に残りやすい設計になっています。
日本語の漢字の意味をヒントに、ベトナム語の正しい読み方を選ぶトレーニングができるため、日本人学習者に特化した内容になっています。
音声付きで、ネイティブ発音を繰り返し聞けるのも大きな魅力。発音の基礎を固めたい初心者から、中級者の語彙強化まで幅広く対応しています。
漢越語の理解を深めたい方は、今すぐ「ベトナム語漢越語発音クイズ」で楽しく学習を始めましょう！