最初のFlutterアプリを使い始める方法

投稿日: 2022-04-20 2022-10-23
タグ: 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:

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

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

の中に MyApp、私たちは戻ってきます build タイプの方法 Widget これは MaterialApp. The MaterialApp 現在のようなメタデータを保持します ThemeData、アプリケーション title、現在 home ルートなど。

注：使用する必要はありません MaterialApp ここでは、iOSスタイルのCupertinoAppまたは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を使用したことがある場合、これは render JSXの方法。

上記の例で考慮すべきより重要なことの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),
      ),
    );
  }
}

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

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

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

結論

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

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

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

getdocs

13036