序章

Flutter は、クロスプラットフォームアプリケーションの作成に焦点を当てたGoogleによって作成されたオープンソースフレームワークです。 Flutterは主にiOSとAndroidを対象としていますが、デスクトッププラットフォームのサポートもますます追加されています。

注： Flutterアプリは、Dartプログラミング言語を使用して構築されています。 Dartを初めて使用する場合は、最初に言語の概要を取得することから始めてください。

この記事では、最初のFlutterアプリケーションを作成し、生成されたコードを調べます。

前提条件

このチュートリアルを完了するには、次のものが必要です。

  • Flutterをダウンロードしてインストールするには。
  • Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。 Android Studioは、Flutterをサポートする統合された機能豊富なIDEを提供します。 Visual Studio Codeは、より軽量で機能的なサポートを提供します。
  • コードエディタ用のプラグインをインストールすることをお勧めします。 AndroidStudio用にインストールされたFlutterおよびDartプラグイン。 VisualStudioCode用にインストールされたFlutter拡張機能。

この記事はもともとFlutter1.2.xを使用して書かれました。 Flutter1.22.2をサポートするように更新されました。

ステップ1—新しいFlutterプロジェクトを作成する

Flutterをインストールし、適切な依存関係（マシンに応じて、Android SDKまたはXCode）をインストールしたら、新しいFlutterプロジェクトを作成できます。

まず、ターミナルウィンドウを開き、プロジェクトを開始するディレクトリに移動して、次のコマンドを実行します。

  1. flutter create hello_flutter

次に、プロジェクトディレクトリに移動します。

  1. cd hello_flutter

次に、選択したコードエディタでこのプロジェクトを開きます。

ステップ2—プロジェクトの立ち上げ

VisualStudioCodeまたはAndroidStudioでコードを実行するには、ドキュメントを参照してください。

たとえば、Visual Studio Codeを使用して、 Run andDebugを開きます。

Screenshot of running the application in Visual Studio Code.

次に、 ダート＆フラッタードロップダウンから、hello_flutter 構成。 ステータスバーでシミュレーター（Web、iOS、またはAndroidのいずれか）を指定します。 そして、デバッグ開始（「再生ボタン」に似ています）を押してアプリケーションを実行します。

次に、シミュレーターまたはブラウザーでデモアプリケーションを観察します。

Screenshot of the application in the iOS simulator.

Android Studioでは、デバイスを指定して構成を選択する必要があります。

ステップ3—コードを調べる

これで、最初のFlutterアプリケーションが作成されました。 そしてそれをエミュレーターで実行しました！ このセクションでは、いくつかのコードを読みます。

注： flutterによって生成されたスターターコードは公式のFlutterコードベースの一部であり、次のライセンスの下でで利用できます。

次に、コードエディタでlib/main.dartを開きます。

MyApp

ファイルの最初の部分はMyAppを定義します。 このクラスはStatelessWidgetを拡張します。

lib / main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

まず、FlutterからMaterialパッケージをインポートします。 これにより、アプリケーションにマテリアルデザインの外観が与えられ、その後、マテリアルスタイルのウィジェットと機能にアクセスできるようになります。

次に、runAppメソッドを使用して、MyAppウィジェットをアプリケーションのメインウィジェットとして登録します。

MyApp内で、MaterialAppを返すタイプWidgetのbuildメソッドを返します。 MaterialAppは、現在のThemeData、アプリケーションtitle、現在のhomeルートなどのメタデータを保持します。

注：ここではMaterialAppを使用する必要はありません。また、iOSスタイルのCupterinoAppまたはWidgetsAppのカスタムスタイルを使用することもできます。 。

MyHomePage

ファイルの次の部分はMyHomePageを定義します。 このクラスはStatefulWidgetを拡張します。

lib / main.dart
// ...

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// ...

このファイルの最後の部分は_MyHomePageStateを定義します。 このクラスは、そのウィジェットのStateとbuildメソッドを拡張します。 これまでにReactを使用したことがある場合、これはJSXのrenderメソッドに似ています。

上記の例で考慮すべきより重要なことの1つは、createStateメソッドをオーバーライドして、状態を管理する独自の方法を提供しているという事実です。

lib / main.dart
// ...

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

したがって、_counterの状態はsetState()で変更できます。 次に、appBarとbodyを含むアプリケーションのScaffoldを作成するbuildメソッドを定義します。

Scaffoldクラスは、MaterialAppを使用する場合の最上位コンテナーと考えることができます。 これにより、ナビゲーションバー、フローティングアクションボタン、引き出しを簡単に追加したり、ノッチを回避したりすることができます。

setState()を呼び出すたびに、ウィジェットのbuildメソッドも呼び出されるため、ビューが更新され、新しい状態で再描画されます。 この例では、onPressed: _incrementCounter関数を介してFloatingActionButton内でsetStateを呼び出していることがわかります。

結論

この記事では、最初のFlutterアプリケーションを作成し、生成されたコードを調べました。

アプリケーションを試して、カウンターとテキストの値を変更する機会を利用してください。

演習やプログラミングプロジェクトについては、フラッタートピックページをチェックして、学習を続けてください。