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年目になります。
現在は現地のIT企業に勤めながら、個人でアプリ開発およびブログ執筆を続けております。
ご興味があれば、ぜひ私が開発している個人アプリもチェックしてみてください。
語学学習や日常生活に役立つアプリを中心に、Google Play ストアで無料公開しています。
また、YouTubeチャンネルでは海外生活やアプリ開発に関する情報を発信しています。
海外就職のリアルな体験談やエンジニアとしてのキャリア形成についても触れていますので、
興味のある方はぜひチャンネル登録していただけると嬉しいです。
今後もブログ・アプリ・動画を通じて、海外挑戦を目指す方に役立つ情報をお届けしていきます。
開発アプリ一覧
個人でAndroidアプリ開発を行なっており、下記がこれまで開発・リリースしたアプリ一覧です。
ゼロから始めるベトナム語学習 | ベトナム語類音語クイズ
「ベトナム語類音語発音クイズ」は、日本人学習者のために設計された、効率的に語彙力と発音を強化できる無料学習アプリです。
特徴
- 日常会話でよく使うベトナム語を中心に収録
- 四択クイズ形式で、視覚＋聴覚から効果的に学習
- 日本語の漢字の意味をヒントに正しい読み方を選べる、日本人特化の設計
- 音声付きでネイティブ発音を繰り返し聞ける
- 初心者の発音基礎から、中級者の語彙強化まで幅広く対応
旅行や留学の準備、語学試験対策にも最適。スキマ時間に楽しく学べます。
今すぐ「ベトナム語類音語発音クイズ」をダウンロードして、発音と語彙力を同時にレベルアップしましょう！
Viloで学ぶベトナム語動詞｜毎日5分で語彙力UP
Vilo｜ベトナム語動詞学習アプリは、日常会話に欠かせないベトナム語の動詞を、効率的に楽しく習得できる無料学習アプリです。
特徴
- 日常会話でよく使う動詞を効率的に学習
- 四択クイズ形式で、ゲーム感覚でテンポよく学習
- 音声読み上げ機能付きで、正しい発音も同時に練習
- CEFRレベル対応で、初級～中級まで段階的に学べる
- ランダム出題で繰り返し復習しやすく、記憶に定着
スキマ時間を活用して、短時間でベトナム語の動詞をマスター。留学や旅行、検定試験対策にも最適です。
今すぐ「Vilo」をダウンロードして、毎日の5分でベトナム語動詞の語彙力を伸ばしましょう！
------
Viloで学ぶベトナム語名詞｜毎日5分で語彙力UP
Vilo｜ベトナム語名詞学習アプリ は、日常会話に必須のベトナム語の名詞単語を効率よく習得できる無料学習ツールです。
特徴
- 日常会話で頻出するベトナム語の名詞を効率的に習得
- 四択クイズ形式でゲーム感覚で名詞を学習
- 音声読み上げ機能で正しい発音を確認しながら学習可能
- CEFRレベル対応で初心者～中級者までベトナム語名詞学習が可能
これからベトナム語の名詞を基礎から学びたい方、検定試験対策や留学準備をしたい方に特におすすめです。
今すぐ「Vilo」をダウンロードして、楽しみながらベトナム語名詞の語彙力を伸ばしましょう！
------ ------
Viloで学ぶベトナム語形容詞｜毎日5分で語彙力UP
Vilo｜ベトナム語形容詞学習アプリ は、日常会話に必須のベトナム語の形容詞単語を効率よく習得できる無料学習ツールです。
特徴
- 日常会話で頻出するベトナム語の形容詞を効率的に習得
- 四択クイズ形式でゲーム感覚で形容詞を学習
- 音声読み上げ機能で正しい発音を確認しながら学習可能
- CEFRレベル対応で初心者～中級者までベトナム語形容詞学習が可能
これからベトナム語の形容詞を基礎から学びたい方、検定試験対策や留学準備をしたい方に特におすすめです。
今すぐ「Vilo」をダウンロードして、楽しみながらベトナム語形容詞の語彙力を伸ばしましょう！
------
Vocaboost｜無料＆聞き流し対応の自分で作る単語帳アプリ
「Vocaboost」は、無料で使える＆自分で作れる単語帳アプリです。さらに聞き流し学習や発音読み上げ機能も搭載し、効率的に語彙を定着させることができます。
覚えたい単語やフレーズを自由に追加し、自分だけのオリジナル単語帳を作成可能。英語・ベトナム語・中国語など、あらゆる語学や資格試験に活用できます。
フラッシュカード形式で繰り返し学習ができるうえ、耳から覚える「聞き流し」機能により、通勤・通学やスキマ時間でも学習が可能。シンプルで直感的な操作性で、初心者から上級者まで幅広く対応します。
「単語帳＋聞き流し＋自分で作る＋無料」をすべて実現した学習アプリ。今すぐ「Vocaboost」で自分専用の語学トレーニングを始めましょう！
