こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- ボタン、文字列、アイコンを縦(Column)に並べる方法
- ボタン、文字列、アイコンを横(Row)に並べる方法
開発環境
- Dart 3.0.0
- Flutter 3.10.0
縦(Column)に要素を並べる
概要
ボタン、文字列、アイコンを縦に並べには、Column
ウィジェットを使用します。以下のサンプルコードでは、Column
ウィジェットを使用して、ボタン、文字列、アイコンを縦に並べる実装をしております。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('縦に要素を並べるデモ'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star, size: 50),
Text('星のアイコン'),
ElevatedButton(
onPressed: () {},
child: Text('ボタン'),
),
],
),
),
);
}
}
サンプルコードの説明
- 1行目: Flutterマテリアルデザインのライブラリをインポートします。
- 3行目: アプリケーションのエントリーポイントを定義します。
- 5-17行目:
MyApp
クラスは、アプリケーションのルートウィジェットを定義します。 - 7-16行目:
MaterialApp
ウィジェットを使用して、アプリケーションのベースを作成します。 - 9-15行目:
Scaffold
ウィジェットは、アプリバーとボディを含む基本的なマテリアルデザインレイアウトを提供します。 - 10行目:
AppBar
ウィジェットでアプリバーを作成し、タイトルを設定します。 - 13-23行目:
Column
ウィジェットを使用して、アイコン、テキスト、ボタンを縦に並べます。 - 14行目:
mainAxisAlignment
プロパティを使用して、子ウィジェットを中央に配置します。
表示確認
それでは、表示を確認してみましょ〜
横(Row)に要素を並べる
概要
次に、ボタン、文字列、アイコンを横に並べる方法を見ていきましょう。Row
ウィジェットを使用して、ボタン、文字列、アイコンを横一列に配置します。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('横に要素を並べるデモ'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star, size: 50),
Text(' 星のアイコン '),
ElevatedButton(
onPressed: () {},
child: Text('ボタン'),
),
],
),
),
);
}
}
サンプルコードの説明
- サンプルコードの説明は縦に要素を並べる時と同様ですが、
Column
ウィジェットの代わりにRow
ウィジェットを使用している点が異なります。これにより、要素が横に並びます。
表示確認
それでは、表示を確認してみましょ〜
まとめ
いかがでしたでしょうか?今回は、ボタンと文字列とアイコンを簡単に縦(Column)横(Row)に並べる方法を解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただきました。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
余白の設定方法についてもご興味のある読者様。以下記事で様々な余白を簡単に設定する方法について解説していますので、ご一読いただけますと幸いです。
コメント
コメント一覧 (1件)
[…] […]