最初のFlutterアプリを使い始める方法
序章
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プロジェクトを作成できます。
まず、ターミナルウィンドウを開き、プロジェクトを開始するディレクトリに移動して、次のコマンドを実行します。
- 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パッケージをインポートします。 これにより、アプリケーションにマテリアルデザインの外観が与えられ、その後、マテリアルスタイルのウィジェットと機能にアクセスできるようになります。
次に、runApp
メソッドを使用して、MyApp
ウィジェットをアプリケーションのメインウィジェットとして登録します。
MyApp
内で、MaterialApp
を返すタイプWidget
のbuild
メソッドを返します。 MaterialApp
は、現在のThemeData
、アプリケーションtitle
、現在のhome
ルートなどのメタデータを保持します。
注:ここではMaterialApp
を使用する必要はありません。また、iOSスタイルのCupterinoAppまたは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を使用したことがある場合、これはJSXのrender
メソッドに似ています。
上記の例で考慮すべきより重要なことの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),
),
);
}
}
したがって、_counter
の状態はsetState()
で変更できます。 次に、appBar
とbody
を含むアプリケーションのScaffold
を作成するbuild
メソッドを定義します。
Scaffold
クラスは、MaterialApp
を使用する場合の最上位コンテナーと考えることができます。 これにより、ナビゲーションバー、フローティングアクションボタン、引き出しを簡単に追加したり、ノッチを回避したりすることができます。
setState()
を呼び出すたびに、ウィジェットのbuild
メソッドも呼び出されるため、ビューが更新され、新しい状態で再描画されます。 この例では、onPressed: _incrementCounter
関数を介してFloatingActionButton
内でsetState
を呼び出していることがわかります。
結論
この記事では、最初のFlutterアプリケーションを作成し、生成されたコードを調べました。
アプリケーションを試して、カウンターとテキストの値を変更する機会を利用してください。
演習やプログラミングプロジェクトについては、フラッタートピックページをチェックして、学習を続けてください。