はじめに
こんにちは！ 今回は、Flutterを学ぶうえで欠かせない「ウィジェット」について詳しく解説します。 Flutterでは、すべてのUI要素がウィジェットとして作られています。 そのため、ウィジェットを理解することがFlutter開発の第一歩となります。
この記事では、基本的なウィジェットの概念を学び、実際にウィジェットを使って画面に表示する方法を丁寧に説明していきます。 また、レイアウトを整える方法についても紹介しますので、ぜひ最後までご覧ください。
ウィジェットとは？
Flutterにおけるウィジェットとは、画面上のすべての要素を表すものです。 ボタンやテキスト、画像などのUIコンポーネントだけでなく、レイアウトやスタイルの設定もウィジェットを使って行います。
ウィジェットには、大きく分けて「StatelessWidget（ステートレスウィジェット）」と「StatefulWidget（ステートフルウィジェット）」の2種類があります。
- StatelessWidget: 状態を持たないウィジェットで、変更されることのない静的なUIを表します。
- StatefulWidget: 状態を持ち、ユーザーの操作やデータの変更によって動的に変化するUIを表します。
それでは、実際に簡単なウィジェットを作成してみましょう。
ウィジェットを使って画面に表示する
まずは、Flutterのプロジェクトを作成して基本的なウィジェットを使って画面に表示する方法を見ていきましょう。
1. 新しいFlutterプロジェクトの作成
Flutterのインストールが完了していることを前提に、新しいプロジェクトを作成します。 ターミナルで以下のコマンドを実行してください。
flutter create my_first_app
cd my_first_app
flutter runこのコマンドを実行すると、デフォルトのFlutterアプリが起動します。 次に、main.dartを編集して、ウィジェットを使った簡単な画面を作成してみましょう。
2. 基本的なウィジェットの表示
main.dart を開き、以下のように書き換えてください。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ウィジェットの基本')),
body: Center(
child: Text('こんにちは、Flutter！',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
),
),
);
}
}このコードでは、以下のウィジェットを使っています。
- MaterialApp: アプリの基本構造を提供するウィジェット
- Scaffold: 画面の骨組みを作るウィジェット
- AppBar: 画面上部のタイトルバー
- Center: 子ウィジェットを中央に配置
- Text: 文字列を表示するウィジェット
- TextStyle: テキストのスタイルを指定
このコードを保存し、アプリを再起動すると「こんにちは、Flutter！」と表示されるはずです。
レイアウトを整える
次に、ウィジェットを使って画面のレイアウトを整えてみましょう。
1. ColumnとRowを使ったレイアウト
複数のウィジェットを縦や横に並べるには、Column（縦方向）やRow（横方向）のウィジェットを使います。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('レイアウトの基本')),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('上のテキスト', style: TextStyle(fontSize: 20)),
SizedBox(height: 20), // 空白を作る
Text('下のテキスト', style: TextStyle(fontSize: 20)),
],
),
),
);
}
}Columnのポイント
mainAxisAlignmentは、子ウィジェットの配置を決める。SizedBox(height: 20)を使うと、ウィジェットの間にスペースを作れる。
2. コンテナを使ったデザインの調整
背景色やパディングを指定するには、Containerウィジェットを使います。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('コンテナの使い方')),
body: Center(
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: Text(
'装飾されたテキスト',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),
),
);
}
}まとめ
今回は、Flutterのウィジェットの基本について解説しました。
- ウィジェットはFlutterのUIを構成する要素
- StatelessWidget と StatefulWidget の違い
- 基本的なウィジェットを使った画面の作成方法
- Column や Container を使ったレイアウト調整
次回は、さらに高度なウィジェットを使って、より実用的なアプリの作り方を紹介します。 ぜひ実際にコードを書いて、Flutterのウィジェットをマスターしてください！
参考リンク
Flutter公式ドキュメントはこちら：Flutter ウィジェット
