Flutterでテキスト使い方法を知りたい
Flutterのtextの使い方を忘れたので知りたい。
そこで、今回はFlutterのtextにおける基本的な使い方をサンプルコードとデモアプリで解説します。プログラミング初心者の方も0から分かるように簡単に解説します。不明点などありましたら、お気軽にお問い合わせ下さい。
- textって何?
- textの使い方
- textの基本プロパティ
ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。
- 学習の計画
- スケジュール管理
- ポートフォリオ作成時に技術選定 など
初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。
【Flutter】Textとは?文字・数値をいろんな装飾で表示できる

上記イメージのように単純に文字を表示できるclassです。
Text classとは
A run of text with a single style. The Text widget displays a string of text with single style.
(直訳)単一のスタイルを持つ一連のテキスト。 テキスト ウィジェットは、単一のスタイルでテキストの文字列を表示します。
引用:Flutter公式サイト「Text class」
【Flutter】Textのサンプルコードと使い方を解説
Text
サンプルコードは以下の通りです。コピペでそのまま使えます。
import 'package:flutter/material.dart';
void main() => runApp(TextDemo());
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('textデモ')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const <Widget>[
Text("テキスト0【デフォルト】", ),
Text("テキスト1【太字】", style: TextStyle(fontWeight: FontWeight.bold),),
Text("テキスト2【文字サイズ30】", style: TextStyle(fontSize: 30),),
Text("テキスト3【文字ピンク色】", style: TextStyle(color: Colors.pink),),
Text("テキスト4【文字スタイルitalic】", style: TextStyle(fontStyle: FontStyle.italic),),
],
),
),
),
);
}
}
サンプルコードのデモ画面

Textの基本プロパティ
Textのstyle:TextStyle
の以下の基本プロパティをしっかり押さえておきましょう!
プロパティ | 内容 |
---|---|
fontWeight | 文字の太さを指定 |
fontSize | 文字のサイズを指定 |
color | 文字の色を指定 |
fontStyle | 文字のフォントスタイルを指定 |
まとめ:Flutter入門者はテキストの基本の使い方:Textは押さえておくべき!
今回はFlutterのTextにおける基本的な使い方をサンプルコードとデモ画面で解説しました。
レイアウトの基本なのでしっかり理解しときましょう!
Flutterエンジニアになるには?
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

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

Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
画面レイアウト
ボタン
- ボタン(ElevatedButton、TextButton、OutlinedButton、IconButton、FloatingActionButton)
- Flutterのアイコンの探し方
入力・出力
- 文字・数値の入力(Text Field)
- 文字・数値の表示(Text)
- 画像の表示(Images)
- スクロール可能リスト(ListView.builder)
- スクロール可能マス目レイアウト(GridView.builder)
ページ遷移
状態管理
- 状態(State)管理の基本(Stateless Widget・Stateful Widget)
非同期処理
- 非同期処理・同期処理(Future)
- ローカルデータベース(SQLite)
- グラフ①(fl_chart)
- グラフ②(syncfusion_flutter_charts)
- カレンダーから日付取得①(syncfusion_flutter_datepicker)
- カレンダーから日付取得②(month_picker_dialog_2)