Zenn
⚡

【Flutter】React Native エンジニアが学ぶ ウィジェット

2022/07/24に公開
Flutter
Dart
tech

普段は業務で React Native を使用したアプリケーションを作成しているので、そこと対比しつつ学んでいます。

ウィジェット

Flutterアプリケーションは、「Widget(ウィジェット)」を組み合わせてUIを構築します。React/React Native でいう「コンポーネント」にあたる概念になります。

エントリーポイント

FlutterアプリのスキャフォールドをAndroid　Studio から作成すると、以下がエントリーファイルとなっています。

{プロジェクト名}/lib/main.dart

runApp関数が、引数のWidgetツリーを画面に描画します。

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

Stateful Widget / Stateless Widget

React同様、Flutterにもステートの概念が存在しています。異なるのはウィジェット自体が、ステートを管理する/しない の情報を持っていることです。

  • Stateless Widget: ステートを持たないウィジェット
  • Stateful Widget: ステートを持つウィジェット

Stateless Widget

以下のように 継承 extends を利用してウィジェットを定義します。StatelessWidgetクラスの buildメソッドを @overrideしてUIを作成します。

UIはHTML同様 ツリー構造になっています。

main.dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {  //buildメソッドでUIを作成
    return MaterialApp(
      title: "My Simple App",  // アプリのタイトル
      home: Scaffold(  // マテリアルデザインの土台
        appBar: AppBar(
          title: Text("ヘッダータイトル"),
        ),
        body: Center(
          child: Text("Hello World!"),
        ),
      ),
    );
  }
}

Statefull Widget

状態を管理するためには Stateクラスを継承したクラスを実装します。Reactで言う useState のような概念になります。

State クラス

注意したいのは、この State自体も TextのようなUI的な情報を保持できる点です。単に値を返すだけではなく、buildメソッドを実装可能です。

また、State<Counter> でジェネリクスに入っている Counter クラスは、このStateを消費する Statefull Widget 本体です。

main.dart
class CounterState extends State<Counter> {
  @override
  Widget build(BuildContext context) {
    var count = 999;
    return Text(count.toString());
  }
}

Statefull Widget クラス

上で定義した State を消費する Statefull Widget を定義します。

main.dart
class Counter extends StatefulWidget {
  @override
  CounterState createState() => CounterState();
}

createState が状態を作成し、 CounterState()が UIを構築します。ちょっとまだ妙な書き方に見えます。

CounterState createState() => CounterState();

外部ライブラリの導入

Flutterでは、以下のファイルで依存関係の管理を行います。React でいう packege.json、iOSでいう Podfile 等にあたるかと思います。

{プロジェクト名}/lib/pubspec.yaml
pubspec.yaml
name: flutter_app
description: A new Flutter application.

# The following line prevents the package from being accidentally published
...
version: 1.0.0+1

environment:
  sdk: ">=2.17.6 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
...
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
    
  flutter_lints: ^2.0.0

# For information on the generic Dart part of this file, see the
...

パッケージのインストール

以下のコマンドを実行します。pubspec.yamlに記載されたパッケージをインストールします。

flutter packages get

Flutter Inspector

Android Studio に Flutterプラグインをインストールすることで、画面右端に Flutter Inspector を表示するためのタブが追加されます。ここからUI上の様々な情報にアクセスできます。

Discussion