【Flutter】テキスト:text使い方を3分で解説!(サンプルコードあり)

Flutterでテキスト使い方法を知りたい
Flutterのtextの使い方を忘れたので知りたい。

そこで、今回はFluttertextにおける基本的な使い方サンプルコードデモアプリで解説します。プログラミング初心者の方も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の基本プロパティ

Textstyle:TextStyleの以下の基本プロパティをしっかり押さえておきましょう!

プロパティ内容
fontWeight文字の太さを指定
fontSize文字のサイズを指定
color文字の色を指定
fontStyle文字のフォントスタイルを指定

まとめ:Flutter入門者はテキストの基本の使い方:Textは押さえておくべき!

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

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

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

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

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

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

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次