[Flutter その１] Flutterの基礎

はじめに

私自身、Flutterの開発を行っているので、ここで一つアウトプットとしてFlutterについてまとめていきたいと思います。基本は基礎をまとめ、これ以降にも続々とつづけて記載をしていきたいと思います。(時間があれば、、、、)

1.Flutterとは

Flutterは、Googleが開発したオープンソースのUIフレームワークで、一つのコードベースで、iOS、Android、Web、デスクトップを開発できます。Dart というプログラミング言語を使用して、モバイル、Web、デスクトップ向けの高性能なネイティブアプリを作成します。

2.Flutterの主な特徴

• クロスプラットフォーム開発 ：1つのコードでiOSやAndoroidなど、複数のプラットフォーム向けのアプリを開発できる。
• 高速な開発サイクル : 「ホットリロード」という機能により、コードを修正すると即座にアプリに反映されるため、開発速度が向上します。
• 豊富なウィジェット : Flutterはウィジェットベースで、カスタマイズ可能なUIを簡単に作成できる。デフォルトで多くのウィジェットが提供されていますが、独自のウィジェットも作成可能です。
• ネイティブパフォーマンス : Flutterアプリは、ネイティブのようなパフォーマンスを提供します。

3. Flutterの基本構造

Flutterアプリは、ウィジェットで構成されており、全てのUI要素がウィジェットとして表現されます。大きく分けて「ステートレスウィジェット 」と「ステートフルウィジェット 」があります。

• StatelessWidget : 状態を持たないウィジェット。固定のデータを表示するために使用されます。
• StatefulWidget : 状態を持つウィジェット。ユーザーの操作に応じて、表示を変更する場合に使用されます。

4. ウィジェットの例

Flutterでは、UIの各要素がウィジェットで表現されます。基本的なウィジェットとして以下のものがあります。

• Text　: テキストを表示するウィジェット。
• Column　: 子ウィジェットを縦に並べるコンテナ。
• Row : 子ウィジェットを横に並べるコンテナ。
• Container : レイアウトのためのウィジェット。サイズやパディングを調整したり、装飾を加えられます。
• Scaffold : 画面の基本的なレイアウトを構成するウィジェットで、アプリの主要な画面を作成する際に使います。AppBarやBottomNavigationBarなども含めることができます。

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('Flutter Demo')),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

5. 状態管理

Flutterアプリでは、ユーザーの操作に応じてUIが動的に変化します。そのため、状態管理が重要です。Flutterにはいくつかの状態管理方法があります。

• setState : 簡単なアプリで状態を更新するための方法。setStateを使って状態を変更すると、UIが再描画されます。
• Provider : より大規模なアプリで使用される状態管理パターン。InheritedWidgetを基にしたもので、アプリ全体にデータや状態を供給します。
• Riverpod : Providerの拡張バージョンで、テストや依存関係注入がしやすくなっています。

6. Flutterでのレイアウトの仕組み

Flutterでは、ウィジェットを組み合わせてレイアウトを作成します。以下は一般的なレイアウトのウィジェットです。

• Container　: サイズや装飾、パディングを設定できる汎用的なレイアウトコンテナ。
• Column　: 縦方向にウィジェットを並べる。
• Row　: 横方向にウィジェットを並べる。
• Stack　: ウィジェットを重ねて表示する。

Column(
  children: [
    Text('Title'),
    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      color: Colors.blue,
      child: Text('This is a container'),
    ),
  ],
)

7. Flutterのナビゲーション

複数の画面を持つアプリでは、画面間の遷移（ナビゲーション）が必要です。Flutterでは、Navigatorウィジェットを使って、画面遷移を行います。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

• Navigator.pop() : 現在の画面を閉じて、前の画面に戻ります。

8. まとめ

Flutterは、シンプルで強力なクロスプラットフォーム開発を提供するツールです。状態管理、ウィジェットの使い方、レイアウト、ナビゲーションといった基本概念を理解することで、効率的なアプリ開発が可能になります。