
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んででわかること
- テキストの基本的な表示方法
- テキストの中央、上寄せ、下寄せ、左寄せ、右寄せの配置方法
- テキスト周辺の余白(Padding)の設定方法
- 文字列と余白を組み合わせた配置例
開発環境
- Dart 3.0.0
- Flutter 3.10.0
1. テキストの表示(Text Widget)
Flutterでテキストを表示する基本的な方法はText
ウィジェットを使用することです。以下はText
ウィジェットを使った基本的なサンプルコードです。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text('いちご'),
),
),
);
}
}
解説
Text
ウィジェットを使用して、画面の中心に「いちご」というテキストを表示します。Center
ウィジェットを使用することで、テキストを画面中央に配置しています。
動作確認



それでは実際の動作を見てみましょ〜
-461x1024.png)
-461x1024.png)
テキストフォームの作成についても知りたいという方は、以下個人的に自信作の記事をぜひ!


2. 文字列の配置
これから文字列の配置についてサンプルコードを用いて説明していきます
どれも実務でよく使うものばかりなので、これを機にマスターしていただけますと幸いです
文字列の中央寄せ
テキストを画面の中央に寄せるには、Center
ウィジェットを使用します。以下のコードでは、Text
ウィジェットをCenter
ウィジェットでラップして中央寄せしています。
サンプルコード
Center(
child: Text('みかん'),
)
解説
Center
ウィジェットがテキストウィジェットを中央に配置します。
動作確認



それでは実際の動作を見てみましょ〜
-461x1024.png)
-461x1024.png)
アニメーションテキスト表示についてご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。


文字列の上寄せ
テキストを画面の上部に配置する場合は、Align
ウィジェットを使用し、alignment
プロパティをAlignment.topCenter
に設定します。
サンプルコード
Align(
alignment: Alignment.topCenter,
child: Text('りんご'),
)
解説
Align
ウィジェットのalignment
プロパティを使用して、テキストの位置を指定します。
動作確認



それでは実際の動作を見てみましょ〜
-461x1024.png)
-461x1024.png)
枠線の実装、枠線の色、太さ、角丸にする方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。


文字列の下寄せ
テキストを画面の下部に配置するには、Align
ウィジェットでalignment
をAlignment.bottomCenter
に設定します。
サンプルコード
Align(
alignment: Alignment.bottomCenter,
child: Text('バナナ'),
)
動作確認



それでは実際の動作を見てみましょ〜
-461x1024.png)
-461x1024.png)
文字列の左寄せ
テキストを画面の左側に寄せるには、Align
ウィジェットでalignment
をAlignment.centerLeft
に設定します。
サンプルコード
Align(
alignment: Alignment.centerLeft,
child: Text('ぶどう'),
)
動作確認



それでは実際の動作を見てみましょ〜
-461x1024.png)
-461x1024.png)
文字列の右寄せ
テキストを画面の右側に寄せるには、Align
ウィジェットでalignment
をAlignment.centerRight
に設定します。
サンプルコード
Align(
alignment: Alignment.centerRight,
child: Text('メロン'),
)
動作確認



それでは実際の動作を見てみましょ〜
-461x1024.png)
-461x1024.png)
3. 文字列の余白(Padding)設定
テキスト周囲の余白を設定するには、Padding
ウィジェットを使用します。以下の例では、テキストの全方向に20ピクセルの余白を設定しています。
サンプルコード
Padding(
padding: EdgeInsets.all(20.0),
child: Text('パイナップル'),
)
解説
EdgeInsets.all
を使用して、全方向に一定の余白を設定します。
動作確認



それでは実際の動作を見てみましょ〜
設定-461x1024.png)
設定-461x1024.png)
余白の設定についてご興味のある読者様。以下の記事がオススメですので、ご一読頂けますと幸いです


4. 文字列の配置と余白の設定を実践的な形で使用する
以下の例では、フルーツ名と価格を縦に並べ、中央寄せで表示する方法を示します。さらに、余白の設定も組み合わせています。
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('いちご'),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('¥500'),
),
Text('みかん'),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('¥300'),
),
],
),
),
),
);
}
}
解説
Column
ウィジェットを使用して、テキストを縦に並べています。Padding
ウィジェットでテキスト間に余白を設定し、見やすくしています。Center
ウィジェットを使用して、これらのテキストを画面中央に配置しています。
動作確認



それでは実際の動作を見てみましょ〜


5. まとめ
この記事では、Flutterでのテキスト表示、テキストの配置方法、および余白の設定方法について詳しく説明しました。テキスト表示はアプリ開発において基本的ながら重要な要素です。今回紹介した方法をうまく活用して、ユーザーにとって読みやすく、魅力的なUIを設計をしている開発者の皆様の参考になればと思いこの記事を書かせていただきました。



自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
ボタンの配置についても興味があるという方は、以下個人的に自信作の記事をぜひ!


コメント
コメント一覧 (4件)
[…] […]
[…] […]
[…] […]
[…] […]