【Flutter入門】部品を綺麗に並べる方法

更新日：2022年3月10日

記事の内容

Flutterで、部品を綺麗に並べる方法を紹介します。
具体的には、「crossAxisAlignment: CrossAxisAlignment.baseline」と「textBaseline: TextBaseline.alphabetic」を使います。
「textBaseline: TextBaseline.alphabetic」を設定しないとエラーが出るので、注意が必要です。

Failed assertion: line 3791 pos 15: 'crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null': is not true.

1 実装したいこと
2 実装方法

実装したいこと

1枚目の画像 → 2枚目の画像にする方法です。
「180cm」のところの表示です。

実装方法

実装方法としては、この2行が必要になります。

crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,

▼ DartとFlutterをより詳しく勉強したい人には、この記事がオススメです

: FlutterとDartの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 初心者向け3 中級者向け動画教材 Flutter & Dart - The Complete Guide [2023 Edition] ▼ 興味がある方は、画像をクリック英語版ですが、人気のコースです。 Fl ...

続きを見る

▼ SwiftでiOSアプリを開発したい人には、この記事がオススメです

: Swiftの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 初心者向け3 中級者向け動画教材【iOS】SwiftUI 超入門 - Swift を基礎から学んで iOS (iPhone) アプリを開発しよう ▼ 興味がある方は、画像をクリック Swift , SwiftUI , ...

続きを見る

▼ KotlinでAndroidアプリを開発したい人には、この記事がオススメです

: Kotlinの勉強でおすすめの本と動画【2024年最新】

目次1 動画教材2 初心者向け3 中級者向け動画教材はじめての Kotlin【Java 知らなくてOK！丁寧な解説で Android に必要な Kotlin の基本を学習】 ▼ 興味がある方は、画像をクリック今学ぶべき言語、Kotli ...

続きを見る

▼ Gitをより詳しく勉強したい人には、この記事がオススメです

: Gitの学習でおすすめの本と動画【2024年最新】

目次1 動画教材2 漫画？でわかりやすく学ぶ入門書の定番3 初心者向け4 中級者向け5 上級者向け動画教材もう怖くないGit！チーム開発で必要なGitを完全マスター ▼ 興味がある方は、画像をクリック Gitの基本コマンド、ブランチやマ ...

続きを見る

▼ ゼロからWebエンジニアになりたい人には、この記事がオススメです

: ゼロからWebエンジニアとして就職する方法【何もない自分に積み上げていく】

ちまたには、「エンジニアになるための情報」で溢れかえっています。ジョージさんが考える「Webエンジニアになる方法」を教えて下さい。目次1 私が定義するWebエンジニア2 必ずやるべきこと3 推奨されること4 まとめ私が定義するWebエ ...

続きを見る

▼ 独学で実務っぽい経験を積みたい人には、この記事がオススメです

: エンジニアが独学で実務経験っぽいことを学ぶ方法

エンジニアとして就職するためには実務経験が大事だと聞いていますが、就職しないことには実務経験を積むことができません。どうやって、最初の実務経験を積んだらいいでしょうか？目次1 スクールの理想と現実2 IT業界が抱える矛盾点3 擬似的に実 ...

続きを見る

-Flutter, プログラミング