序章
Flutter は、クロスプラットフォームアプリケーションの作成に焦点を当てたGoogleによって作成されたオープンソースフレームワークです。 Flutterは主にiOSとAndroidを対象としていますが、デスクトッププラットフォームのサポートもますます追加されています。
注: Flutterアプリは、Dartプログラミング言語を使用して構築されています。 Dartを初めて使用する場合は、最初に言語の概要を取得することから始めてください。
この記事では、最初のFlutterアプリケーションを作成し、生成されたコードを調べます。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Flutterをダウンロードしてインストールします。
- Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。 Android Studioは、Flutterをサポートする統合された機能豊富なIDEを提供します。 Visual Studio Codeは、より軽量で機能的なサポートを提供します。
- コードエディタ用のプラグインをインストールすることをお勧めします。
この記事はもともとFlutter1.2.xを使用して書かれました。 Flutter1.22.2をサポートするように更新されました。
ステップ1—新しいFlutterプロジェクトを作成する
Flutterをインストールし、適切な依存関係(マシンに応じて、Android SDKまたはXCode)をインストールしたら、新しいFlutterプロジェクトを作成できます。
まず、ターミナルウィンドウを開き、プロジェクトを開始するディレクトリに移動して、次のコマンドを実行します。
- flutter create hello_flutter
次に、プロジェクトディレクトリに移動します。
- cd hello_flutter
次に、選択したコードエディタでこのプロジェクトを開きます。
ステップ2—プロジェクトの立ち上げ
VisualStudioCodeまたはAndroidStudioでコードを実行するには、ドキュメントを参照してください。
たとえば、Visual Studio Codeを使用して、 Run andDebugを開きます。
次に、 ダート&フラッタードロップダウンから、 hello_flutter
構成。 ステータスバーでシミュレーター(Web、iOS、またはAndroidのいずれか)を指定します。 そして、デバッグ開始(「再生ボタン」に似ています)を押してアプリケーションを実行します。
次に、シミュレーターまたはブラウザーでデモアプリケーションを観察します。
Android Studioでは、デバイスを指定して構成を選択する必要があります。
ステップ3—コードを調べる
これで、最初のFlutterアプリケーションが作成されました。 そしてそれをエミュレーターで実行しました! このセクションでは、いくつかのコードを読みます。
注:によって生成されたスターターコード flutter
は公式のFlutterコードベースの一部であり、次のライセンスの下で利用できます。
開催中 lib/main.dart
コードエディタで。
MyApp
ファイルの最初の部分は定義します MyApp
. このクラスは拡張します StatelessWidget
:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
// ...
まず、FlutterからMaterialパッケージをインポートします。 これにより、アプリケーションにマテリアルデザインの外観が与えられ、その後、マテリアルスタイルのウィジェットと機能にアクセスできるようになります。
次に、登録します MyApp
を使用するアプリケーションのメインウィジェットとしてのウィジェット runApp
方法。
の中に MyApp
、私たちは戻ってきます build
タイプの方法 Widget
これは MaterialApp
. The MaterialApp
現在のようなメタデータを保持します ThemeData
、アプリケーション title
、 現在 home
ルートなど。
注:使用する必要はありません MaterialApp
ここでは、iOSスタイルのCupertinoAppまたはWidgetsAppのカスタムスタイルを使用することもできます。
MyHomePage
ファイルの次の部分は定義します MyHomePage
. このクラスは拡張します StatefulWidget
:
// ...
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
_MyHomePageState createState() => _MyHomePageState();
}
// ...
このファイルの最後の部分は、 _MyHomePageState
. このクラスは拡張します State
そのウィジェットと build
方法。 これまでにReactを使用したことがある場合、これは render
JSXの方法。
上記の例で考慮すべきより重要なことの1つは、オーバーライドしているという事実です。 createState
状態を管理する独自の方法を提供する方法:
// ...
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
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),
),
);
}
}
The _counter
したがって、状態は次のように変更できます。 setState()
. 次に、 build
を作成するメソッド Scaffold
を含むアプリケーションの場合 appBar
と body
.
The Scaffold
クラスは、使用する場合のトップレベルのコンテナと考えることができます MaterialApp
. これにより、ナビゲーションバー、フローティングアクションボタン、引き出しを簡単に追加したり、ノッチを回避したりすることができます。
電話するときはいつでも setState()
、ウィジェットの build
メソッドも呼び出されるため、ビューが更新され、新しい状態で再描画されます。 この例では、この呼び出しを行っていることがわかります setState
以内 FloatingActionButton
経由 onPressed: _incrementCounter
関数。
結論
この記事では、最初のFlutterアプリケーションを作成し、生成されたコードを調べました。
アプリケーションを試して、カウンターとテキストの値を変更する機会を利用してください。
演習やプログラミングプロジェクトについては、フラッタートピックページをチェックして、学習を続けてください。