【Flutter】横行レイアウト指定：Row使い方を3分で解説!（サンプルコードあり）

Flutterで横・行のレイアウトの方法を知りたい
Flutterのrowの使い方を忘れたので知りたい。

そこで、今回はFlutterのColumnにおける基本的な使い方をサンプルコードとデモアプリで解説します。プログラミング初心者の方も０から分かるように簡単に解説します。不明点などありましたら、お気軽にお問い合わせ下さい。

縦列レイアウトの基本Columnはコチラで詳しく解説してます。

フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。

あわせて読みたい

Flutterフリーランスエージェントおすすめサイト5選！徹底比較！ Flutterの仕事をフリーランスでしたい！ どこのサイトがFlutter求人が多いのか知りたい！ そこで、今回はFlutterエンジニアの求人案件探しにオススメのサービス5選をご...

【Flutter】Rowとは？水平/横方向にウィジェットを並べることができる

上記イメージのように水平方向にウィジェットを並べることができるclassです。
水平方向に伸びるだけなため、スクロールに対応はしてません。
スクロール対応が必要な場合は、ListViewクラスです。List Viewウィジェットについてはコチラで詳しく解説してます。

Row classとは

A widget that displays its children in a vertical array.

（直訳）子を水平配列で表示するウィジェット。

引用：Flutter公式サイト「Row class」

【Flutter】Rowのサンプルコードと使い方を解説

Rowサンプルコードは以下の通りです。コピペでそのまま使えます。

import 'package:flutter/material.dart';

void main() => runApp(RowDemo());

class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Row(横行)デモ')),
        body: Center(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const <Widget>[
              Text("テキスト1"),
              Text("テキスト2"),
              Text("テキスト3"),
            ],
          ),
        ),
      ),
    );
  }
}

サンプルコードのデモ画面

Rowの基本プロパティ

Rowの基本プロパティ以下の２つはしっかり押さえておきましょう！

まとめ：Flutter入門者はレイアウトの基本の使い方：Rowは押さえておくべき！

今回はFlutterのRowにおける基本的な使い方をサンプルコードとデモ画面で解説しました。

レイアウトの基本なのでしっかり理解しときましょう！

Flutterエンジニアになるには？

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

あわせて読みたい

Flutter学習ロードマップ！０から初心者向けに完全解説！【2024年最新】 Flutterエンジニアになりたい Flutterエンジニアになるための学習ロードマップを知りたい これから、Flutterエンジニアを目指すならどうやったらなれるのか進め方は知っ...

Flutter をスクールで学ぶ

あわせて読みたい

Flutterプログラミングスクールおすすめ4社！36社の調査結果【完全公開】 Flutterでスマホアプリ開発をしたい！けど、挫折気味・・・ Flutterが学べるプログラミングスクールを知りたい！どこが良いのかな？ プログラミング初心者は疑問やエラ...

Flutterの副業を探す

あわせて読みたい

Flutterの副業案件おすすめのサイト3選！【週2・リモートあり】 Flutterで副業を始めたい！どこのサイトがおすすめか知りたい！ 週2,3日でスキルアップが望めるようなFlutterの案件をやりたい！どこのエージェントが良いかな？ 初めて...

おまけ：Flutter入門の完全ガイド

あわせて読みたい

【Flutter入門ガイド2024】知識ゼロから使い方・全体像が分かる！ Flutterの全体像がわからない。 Flutterの学習すべきことを知りたい。 新しいことを学習する際は全体像を捉えることが重要です。「今はここを学習してるんだな。」と実...