これまでの章では、Flutterの基本的な概念とプロジェクトの構造について学びました。この章からは、実際に電卓アプリのUIを作成していきます。前編では、電卓アプリの全体レイアウトを構築し、結果表示部分とボタン部分のUIを作成します。

1. 全体レイアウトの構築

まず、電卓アプリの全体レイアウトを考えましょう。今回の電卓アプリは、以下のような構成にします。

• 画面上部に結果を表示するエリア
• 画面下部にボタンを配置するエリア

このように、画面を大きく2つのエリアに分けて考えます。

Flutterでレイアウトを構築するには、Column、Row、Expanded などのウィジェットを使用します。

• Column: 子ウィジェットを縦方向に配置する
• Row: 子ウィジェットを横方向に配置する
• Expanded: 親ウィジェットの利用可能なスペースに合わせて、子ウィジェットを拡大する

今回は、画面を縦方向に分割するために、Column ウィジェットを使用します。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          // 結果表示エリア
          Expanded(
            child: Container(
              color: Colors.blueGrey,
              alignment: Alignment.bottomRight,
              padding: const EdgeInsets.all(16.0),
              child: const Text(
                '0',
                style: TextStyle(
                  fontSize: 48.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          // ボタンエリア
          Container(
            color: Colors.grey,
            child: const Center(
              child: Text('Button Area'),
            ),
          ),
        ],
      ),
    );
  }
}

Column の children プロパティに、結果表示エリアとボタンエリアを表すウィジェットを配置します。結果表示エリアには Expanded を使用し、画面の上部いっぱいに広がるようにしています。Expanded の child には Container を配置し、背景色、配置、パディング、テキストスタイルなどを設定しています。

ボタンエリアには、とりあえず Container を配置し、背景色を設定しています。

main関数からCalculatorウィジェットを呼び出すように修正しましょう。

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calculator',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const Calculator(),
    );
  }
}

CalculatorAppウィジェットを作成し、MaterialAppのhomeにCalculatorウィジェットを設定しました。

このコードを実行すると、以下のような画面が表示されます。

2. 結果表示部分の作成

次に、結果表示部分を詳しく作り込んでいきましょう。結果表示部分には、現在入力されている数値や計算結果を表示します。

Container の child に Text ウィジェットを配置し、表示するテキストを設定します。

Expanded(
  child: Container(
    color: Colors.blueGrey,
    alignment: Alignment.bottomRight,
    padding: const EdgeInsets.all(16.0),
    child: const Text(
      '0',
      style: TextStyle(
        fontSize: 48.0,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      ),
    ),
  ),
),

Text ウィジェットの style プロパティを使って、フォントサイズ、太さ、色などを設定しています。

3. ボタン部分の作成

続いて、ボタン部分を作成します。電卓には、数字ボタン（0-9）、演算子ボタン（+、-、×、÷）、小数点ボタン（.）、イコールボタン（=）、クリアボタン（C）などが必要です。

ボタンを配置するには、Row と Column を組み合わせて、格子状にレイアウトします。

Container(
  color: Colors.grey,
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          _buildButton('7'),
          _buildButton('8'),
          _buildButton('9'),
          _buildButton('/'),
        ],
      ),
      Row(
        children: <Widget>[
          _buildButton('4'),
          _buildButton('5'),
          _buildButton('6'),
          _buildButton('x'),
        ],
      ),
      Row(
        children: <Widget>[
          _buildButton('1'),
          _buildButton('2'),
          _buildButton('3'),
          _buildButton('-'),
        ],
      ),
      Row(
        children: <Widget>[
          _buildButton('.'),
          _buildButton('0'),
          _buildButton('C'),
          _buildButton('+'),
        ],
      ),
      Row(
        children: <Widget>[
          _buildButton('='),
        ],
      ),
    ],
  ),
),

_buildButton は、ボタンを作成するためのカスタム関数です。後ほど詳しく説明します。

Column の中に、4つの Row を配置し、各 Row の中に4つのボタンを配置しています。最後の Row には、イコールボタンを配置しています。

ボタンを作成するには、ElevatedButton ウィジェットを使用します。ElevatedButton は、マテリアルデザインのElevated Buttonを表現するウィジェットです。

Widget _buildButton(String buttonText) {
  return Expanded(
    child: ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.grey[300],
        padding: const EdgeInsets.all(24.0),
      ),
      child: Text(
        buttonText,
        style: const TextStyle(fontSize: 24.0),
      ),
    ),
  );
}

_buildButton 関数では、ElevatedButton を作成しています。onPressed プロパティには、ボタンが押されたときの処理を記述しますが、ここではまだ空にしています。style プロパティで、ボタンの背景色やパディングを設定しています。child プロパティには、ボタンに表示するテキストを設定しています。

Expanded でラップすることで、ボタンを行いっぱいに広げています。

このコードを実行すると、以下のような画面が表示されます。