【Flutter】ボタンと文字列とアイコンを簡単に縦(Column)横(Row)に並べる方法を解説

2024年2月24日2024年4月2日

【Flutter】ボタンと文字列とアイコンを簡単に縦(Column)横(Row)に並べる方法を解説

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

ボタン、文字列、アイコンを縦（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エンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

余白の設定方法についてもご興味のある読者様。以下記事で様々な余白を簡単に設定する方法について解説していますので、ご一読いただけますと幸いです。