第4章

Flutterアプリの見た目を編集する

テキスト、ボタン、画像、色や余白を使ってFlutterアプリの画面を作ります。

この章で学ぶこと

Flutterの画面がどのように作られているか
テキストやボタンを表示する方法
画像をアプリ内に表示する方法
色、文字サイズ、余白などを変更する方法

Flutterでは、画面を構成する部品を Widget（ウィジェット） と呼びます。

たとえば、次のようなものがWidgetです。

Text：文字を表示する
ElevatedButton：押せるボタンを表示する
Image：画像を表示する
Row：Widgetを横に並べる
Column：Widgetを縦に並べる
Padding：Widgetのまわりに余白を作る

小さなWidgetを組み合わせて、ひとつの画面を作っていきます。

テキストとボタンを表示する

前の章で作ったプロジェクトを開き、lib/main.dart の内容を次のコードに書き換えます。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.blue.shade50,
        appBar: AppBar(
          title: const Text('プロフィール'),
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white,
        ),
        body: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Icon(
                Icons.person,
                size: 100,
                color: Colors.blue,
              ),
              const SizedBox(height: 24),
              const Text(
                'Flutterを勉強中です',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.black87,
                ),
              ),
              const SizedBox(height: 12),
              const Text(
                'Widgetを組み合わせて画面を作ります。',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 32),
              ElevatedButton(
                onPressed: () {
                  debugPrint('ボタンが押されました');
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.symmetric(vertical: 16),
                ),
                child: const Text('はじめる'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

アプリを実行している状態でファイルを保存すると、画面に変更が反映されます。

テキストの見た目を変える

Text の style に TextStyle を設定すると、文字の見た目を変更できます。

const Text(
  'Flutterを勉強中です',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

主な設定は次のとおりです。

fontSize：文字の大きさ
fontWeight：文字の太さ
color：文字の色
textAlign：文字の位置

値を変えて保存し、画面がどのように変わるか試してみましょう。

ボタンの見た目と動作を変える

ElevatedButton の child がボタンの表示内容、onPressed が押したときの処理です。

ElevatedButton(
  onPressed: () {
    debugPrint('ボタンが押されました');
  },
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
    padding: const EdgeInsets.all(16),
  ),
  child: const Text('次へ'),
)

backgroundColor：ボタンの背景色
foregroundColor：文字やアイコンの色
padding：ボタンの内側の余白
onPressed：ボタンを押したときに実行する処理

ここでは、ボタンを押すとデバッグコンソールに文字が表示されます。

アプリ内の画像を表示する

まず、プロジェクトの中に次のフォルダを作ります。

hello_app/
└─ assets/
   └─ images/
      └─ sample.png

表示したい画像を sample.png という名前で assets/images フォルダに置きます。

次に、プロジェクト直下の pubspec.yaml を開き、flutter: の中に画像フォルダを登録します。インデントには半角スペースを使ってください。

flutter:
  uses-material-design: true
  assets:
    - assets/images/

保存したら、ターミナルで次のコマンドを実行します。

flutter pub get

先ほどのコードにある Icon を、次の Image.asset に置き換えます。

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Image.asset(
    'assets/images/sample.png',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
)

width：画像の横幅
height：画像の高さ
fit：指定した大きさに画像をどのように収めるか
borderRadius：画像の角の丸み

画像や pubspec.yaml を追加した直後に表示されない場合は、実行中のアプリをいったん終了し、もう一度実行してください。

並び方と余白を変える

Column はWidgetを縦に並べ、Row は横に並べます。

Widget同士の間隔を空ける場合は SizedBox を使います。

const SizedBox(height: 16)

Widgetのまわりに余白を作る場合は Padding を使います。

Padding(
  padding: const EdgeInsets.all(24),
  child: Text('余白のあるテキスト'),
)

EdgeInsets.all(24) は、上下左右すべてに24の余白を設定するという意味です。

エラーが出たとき

赤い波線が表示された場所のカッコやカンマを確認する
pubspec.yaml のインデントを確認する
画像のファイル名と Image.asset に書いたパスが一致しているか確認する
flutter pub get を実行したか確認する
ホットリロードで直らない場合は、アプリを終了して再実行する

まとめ

Flutterでは、テキスト、ボタン、画像などのWidgetを組み合わせて画面を作ります。まずは文字、色、大きさ、余白を少しずつ変更し、保存するたびに画面がどう変わるか確認してみましょう。