初心者と学ぶFlutter第2回：基本ウィジェット徹底解説

初心者と学ぶFlutter
2024.10.10

はじめに

前回はFlutterの環境構築を行いました。

初心者と学ぶFlutter第1回：環境構築ガイド(Mac編)
Flutter初心者向けに、macOSでの環境構築をステップバイステップで解説。iOS開発に必要なツールや設定をわかりやすく紹介します。
www.takatechskill.com
2024.10.09

第2回はFlutterのウィジェットについて学んでいきます。

Flutterを使ってアプリ開発を進めるうえで、まず理解しておくべきことのひとつが「ウィジェット」です。ウィジェットは、FlutterにおけるUIの構成要素であり、アプリ内で表示されるテキストやボタン、レイアウトの仕組みなど、すべてのUIがウィジェットによって作られています。

この記事では、基本的なFlutterウィジェットを初心者向けにわかりやすく解説し、アプリ開発を円滑に進められるようにします。ウィジェットの使い方に加えて、開発を効率化するためのHot Reloadやデバッグ方法についても紹介します。

Flutterウィジェットとは？

Flutterにおけるウィジェットは、アプリのUIを構築する基本単位です。各ウィジェットは画面上の要素（テキスト、ボタン、画像など）やレイアウトを表し、ウィジェット同士を組み合わせて複雑なインターフェースを作成できます。

Flutterウィジェットの特徴

  • 階層的に構成される: Flutterでは、ウィジェットはツリー構造（ウィジェットツリー）で管理されており、親ウィジェットが子ウィジェットを持つ形で構築されます。
  • 再利用可能: 同じウィジェットを異なる場所で再利用できるため、効率的にUIを構築できます。
  • 柔軟性が高い: ウィジェットをカスタマイズすることで、ユーザーが必要とするUIを簡単に作成できます。

よく使う基本的なFlutterウィジェット

ここでは、Flutter開発で頻繁に使用される基本的なウィジェットを紹介します。

Text

Textウィジェットは、画面に文字列を表示するための最も基本的なウィジェットです。フォントサイズ、色、太字などのスタイルを指定することができます。

使い方

Dart
Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue),
)

説明

  • Textは単純にテキストを表示するウィジェットです。
  • styleを使って文字のサイズ、太さ、色などを調整できます。

実行してみた

下記コードで実際に実行してみました。
時間表記に被ってますが、ひとまずTextの表示はできました。

Dart
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp()); 
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Text(
              'Hello, Flutter!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue),
              )
        );
      }
    }

Container

Containerは、ウィジェットのレイアウトやスタイル（パディング、マージン、背景色など）を設定するために使われる、非常に汎用性の高いウィジェットです。

使い方：

Dart
 Container(
        padding: EdgeInsets.all(24.0),// padding指定
        margin: EdgeInsets.all(80.0),// margin指定
        color: Colors.blueAccent, //color指定
        alignment: Alignment.center, // 要素の位置指定
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),

説明：

  • Containerは、その中に他のウィジェットを内包し、パディングやマージン、背景色を設定できます。
  • UI要素を囲むボックスとして使われ、レイアウトの制御が簡単に行えます。

実行してみた

Dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        padding: EdgeInsets.all(24.0),
        margin: EdgeInsets.all(80.0),
        color: Colors.blueAccent,
        alignment: Alignment.center, // これでContainer内のテキストを中央に配置
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

Row

Rowウィジェットは、複数のウィジェットを横に並べるために使用されます。横並びのレイアウトが必要な場合に便利です。

使い方：

Dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,// 等間隔
  children: <Widget>[
    Icon(Icons.star, color: Colors.red),
    Icon(Icons.star, color: Colors.green),
    Icon(Icons.star, color: Colors.blue),
  ],
)

説明：

  • Rowは子ウィジェットを横方向に並べます。
  • mainAxisAlignmentを使って、ウィジェットの間隔や配置を調整できます。

実行してみた

Dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Icon(Icons.star, color: Colors.red),
          Icon(Icons.star, color: Colors.green),
          Icon(Icons.star, color: Colors.blue),
          ],
      )
    );
  }
}

Column

Columnウィジェットは、Rowの縦バージョンで、複数のウィジェットを縦に並べるために使います。

使い方：

Dart
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('Column 1'),
    Text('Column 2'),
    Text('Column 3'),
  ],
)

説明：

  • Columnは子ウィジェットを縦方向に並べます。
  • crossAxisAlignmentで縦方向の配置を指定し、列の幅を調整します。

実行してみた

Dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('Column 1'),
          Text('Column 2'),
          Text('Column 3'),
          ],
      )
    );
  }
}

ListView

ListViewは、スクロール可能なリストを作成するためのウィジェットです。大量のデータを表示する場合に使用されます。

使い方：

Dart
ListView(
        padding: EdgeInsets.all(16.0), // 余白を追加
        children: <Widget>[
          Text('Item 1'),
          Text('Item 2'),
          Text('Item 3'),
          Text('Item 4'),
          Text('Item 5'),
        ],
      ),

説明：

  • ListViewは複数のアイテムをスクロール可能なリストとして表示します。
  • ListTileはリスト内の各項目のレイアウトを定義します。

実行してみた

Dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ListView(
        padding: EdgeInsets.all(16.0), // 余白を追加
        children: <Widget>[
          Text('Item 1'),
          Text('Item 2'),
          Text('Item 3'),
          Text('Item 4'),
          Text('Item 5'),
        ],
      ),
    );
  }
}

Scaffold

Scaffoldは、Flutterアプリの基本的なUIレイアウトを提供するウィジェットです。アプリ全体の構造を管理し、ナビゲーションバーやフローティングボタンを含む標準的な画面の枠組みを作成します。

使い方：

Dart
Scaffold(
  appBar: AppBar(title: Text('My App')),
  body: Center(child: Text('Hello, Scaffold!')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

説明：

  • Scaffoldはアプリのレイアウトのための基本的なウィジェットです。
  • AppBarやFloatingActionButtonを簡単に配置でき、画面全体を管理します。

実行してみた

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('My App')),
        body: Center(child: Text('Hello, Scaffold!')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
          ),
      )
    );
  }
}

Hot Reloadとデバッグ

Hot Reloadとは？

Flutterの開発中に大きな特徴となるのがHot Reload機能です。Hot Reloadを使うと、コードの変更をすぐにアプリに反映させることができ、開発効率が大幅に向上します。UIの変更やバグの修正を行う際に、アプリを再起動することなく、即座に結果を見ることができるため、開発のフローを中断することなく進められます。

使い方

flutter runを実行後、下記のような画面がコンソールに出てきます。
この中のrがHot reloadです。

r – Hot reload (ホットリロード) 🔥🔥🔥

  • コードの変更を即座に反映させるための機能です。状態（変数の値やアプリの状態など）を保持したまま、コードの変更部分だけを再コンパイルしてアプリに反映します。
  • 開発中にUIのレイアウトやスタイルなどを頻繁に変更するときに便利です。

R – Hot restart (ホットリスタート)

  • アプリ全体をリセットして再起動します。アプリの状態もリセットされるため、最初からアプリを実行し直すのと同じ効果があります。
  • 重大なコード変更（状態管理や初期化など）を行った際には、このホットリスタートが必要です。

h – List all available interactive commands (すべてのインタラクティブコマンドの一覧表示)

  • 利用可能な他のキーボードコマンドをリストアップします。このコマンドを入力すると、さらに多くの操作コマンドが表示されます。

d – Detach (アプリを終了せずにflutter runを終了)

  • アプリケーションをデバイス上でそのまま実行し続けるが、flutter run プロセス自体は終了します。
  • 例えば、デバイス上でアプリをそのまま動かしておきたいが、ターミナルで他の作業をしたい場合などに便利です。

c – Clear the screen (画面をクリア)

  • ターミナルの出力をクリアして見やすくします。デバッグメッセージやログが多く出力された場合に使用します。

q – Quit (アプリケーションを終了)

  • 実行中のアプリケーションを完全に終了させ、デバイス上でのアプリ実行も停止します。これにより、flutter run プロセスも終了します。

デバッグ方法

Flutterでは、ビルドやランタイムエラー、UIの問題を簡単にデバッグできるツールが用意されています。以下は一般的なデバッグ方法です。

コンソールでエラーメッセージを確認

アプリがクラッシュしたりエラーが発生した場合、コンソールには詳細なエラーメッセージが表示されます。このメッセージを読み取り、原因を特定しましょう。

Flutter DevToolsを使用

Flutter DevToolsは、パフォーマンスのモニタリングやUIのデバッグ、ネットワークリクエストの追跡ができるツールです。アプリがどのように動作しているか、詳細に分析できます。

Dart:Open DevToolsで起動できます。

Breakpointを活用

VSCodeやAndroid Studioでは、デバッグモードでアプリを実行し、コードにブレークポイントを設定することで、アプリの特定の場所で処理を一時停止し、変数の値を確認したり処理の流れを追跡できます。

まとめ

Flutterの基本的なウィジェットの使い方を理解することで、アプリ開発の土台が築かれます。TextやContainerなどのシンプルなウィジェットから、RowやColumnといったレイアウトの要素、Scaffoldでアプリ全体を管理するまで、基本的なウィジェットの使い方を押さえておきましょう。

さらに、Hot Reloadを活用することで、開発のスピードを格段に向上させることができます。エラーが発生した際は、コンソールやDevToolsを活用して、効率的にデバッグしましょう。

次回は、Dartの基本構文を行っていこうと思います。

第三回はこちら

初心者と学ぶFlutter第3回：Dartの基本文法
Flutter開発に必要なDartの基本文法を初心者向けに解説。データ型、制御構文、関数、クラス、非同期処理まで丁寧に学べる入門ガイド。
www.takatechskill.com
2024.10.11

スポンサーリンク

コメント

タイトルとURLをコピーしました