言っても、どちらかのプラットフォームを選ぶのもなんか違う気がする。!では、FlutterがReactNativeとここが違うと言っているところを見ていきましょー(このページは流し見用として扱うことがおすすめ。開発者のためのFlutterこのページはここの翻訳です。Native(RN)と同様に、Flutterはリアクティブなスタイルビューを使用します。RNはネイティブウィジェットに移行しますが、Flutterはネイティブコードまでコンパイルされます。RNのbuttonは、androidではandroid.widget.ButtonとiOSではUIButtonをレンダリングします。Flutterは画面上の各ピクセルを制御し、JavaScriptブリッジの必要性に起因するパフォーマンス上の問題を回避します。Dartは学習するのが簡単な言語で、次の機能を提供します。Web、サーバー、およびモバイルアプリを構築するための、オープンソースのスケーラブルなプログラミング言語を提供します。ネイティブにAOTコンパイルされたC言語スタイルの構文を使用するオブジェクト指向の単一継承言語を提供します。TranscompilesオプションでJavaScriptに変換します。インタフェースと抽象クラスをサポートします。JavaScriptとDartの違いのいくつかの例を以下に説明します。エントリーポイントJavaScriptにはあらかじめ定義されたエントリ機能がありません。エントリポイントを定義します。point}Dartでは、すべてのアプリに、アプリのエントリポイントとして機能するトップレベルのmain()関数が必要です。{}DartPadで試してみてください。コンソールへの出力Dartのコンソールに出力するには、printを使います。world!');DartPadで試してみてください。変数Dartは型システムです。これは、静的型検査とランタイム検査の組み合わせを使用して、変数の値が常に変数の静的型と一致することを保証します。型は必須ですが、Dartは型推論を実行するため、型の注釈はオプションです。変数の作成と割り当てJavaScriptでは、変数は型定義できません。"JavaScript";Dartでは、変数を明示的に型指定するか、型システムが適切な型を自動的に推論する必要があります。//明示的に文字列として入力します。I文字列に推測される。どちらもOKDartPadで試してみてください。Systemを参照してください。valueJavaScriptでは、未初期化変数はundefinedです。undefinedDartでは、初期化されていない変数の初期値はnullです。数値はDartのオブジェクトなので、数値型の初期化されていない変数でも値はnullです。nullDartPadで試してみてください。詳細は、変数のドキュメントを参照してください。チェックJavaScriptでは、1またはnull以外のオブジェクトの値はtrueとして扱われます。false");}Dartでは、boolean値trueだけがtrueとして扱われます。If文はbooleanのみで条件分岐します。zero');}DartPadで試してみてください。FunctionsDart関数とJavaScript関数は一般的に似ています。次のように書くこともできます。true;}DartPadで試してください。詳細については、関数のドキュメントを参照してください。非同期プログラミング非同期制御に関してはこの辺りの理解が必要になります。QiitaFuturesJavaScriptのように、Dartはシングルスレッドです。JavaScriptでは、Promiseオブジェクトで、非同期完了(または失敗)の結果の値を表します。});};Dartはこれを処理するためにFutureオブジェクトを使用します。print(error));}DartPadで試してください。詳細については、Futuresに関する文書を参照してください。awaitasync関数宣言は、非同期関数を定義します。JavaScriptでは、async関数はPromiseを返します。await演算子は、Promiseを待つために使用されます。console.log(data);}Dartでは、async関数はFutureを返し、関数の本体は後で実行するようにスケジュールされています。await演算子は、Futureを待つために使用されます。print(ip);}DartPadで試してください。詳細については、asyncとawaitのドキュメントを参照してください。createコマンドを使用します。SDKがPATHにあることを確認してください。FlutterとDartプラグインがインストールされたIDEを使用します。[mac]を参照してください。Flutterプロジェクトを作成すると、AndroidとiOSの両方のデバイスでサンプルアプリケーションを実行するために必要なすべてのファイルが作成されます。runをプロジェクトディレクトリから実行します。Flutterアプリケーションは、いくつかの方法で実行することができます。‘run’オプションを使用します。接続されたデバイス、iOSエミュレータ、またはAndroidシミュレータで動作します。[mac]のドキュメントを参照してください。Nativeでは、必要なコンポーネントをそれぞれインポートする必要があります。Designライブラリのウィジェットを使用するには、material.dartパッケージをインポートします。iOSスタイルのウィジェットを使用するには、Cupertinoライブラリをインポートします。基本的なウィジェットセットを使用するには、ウィジェットライブラリをインポートします。独自のウィジェットライブラリを作成してインポートすることもできます。'package:flutter/my_widgets.dart';どんなウィジェットパッケージをインポートしても、Dartはあなたのアプリで使われているウィジェットだけを取り込みます。詳細については、Flutterウィジェットカタログを参照してください。Nativeでは、HelloWorldAppクラスはReact.Componentを拡張し、ビューコンポーネントを返すことによってrenderメソッドを実装します。world!」アプリを作成できます。Widgetを持ちます。);}ウィジェットツリーを形成するためにネストするには?Flutterではほとんどすべてがウィジェットです。ウィジェットは、アプリケーションのユーザーインターフェースの基本的なビルディングブロックです。ウィジェットをウィジェットツリーと呼ばれる階層に構成します。各ウィジェットは親ウィジェット内にネストし、その親からプロパティを継承します。アプリケーションオブジェクト自体もウィジェットです。別の「アプリケーション」オブジェクトはありません。代わりに、ルートウィジェットがこの役割を果たします。world!」アプリを示しています。この例では、ウィジェットツリーはMaterialAppルートウィジェット内にネストされています。world!’を示しています。アプリケーションを書くときは、StatelessWidgetまたはStatefulWidgetという2種類のウィジェットを使います。StatelessWidgetは、状態のないウィジェットです。一度作成され、外観を変更しません。StatefulWidgetは、受信したデータまたはユーザー入力に基づいて状態を動的に変更します。StatelessWidgetとStatefulWidgetの重要な違いは、StatefulWidgetsにはステートデータが格納、保持され、ツリー再構築全体に渡ってStateオブジェクトがあることです。単純なまたは基本的なアプリケーションでは、ウィジェットを入れ子にするのは簡単ですが、コードが大きくなりアプリケーションが複雑になります。入れ子になったウィジェットを深くネストせずに、ウィジェットまたはそれより小さなクラスを返す関数を別で用意することが望ましいです。機能とウィジェットを別々に作成することで、アプリ内のコンポーネントを再利用することもできます。Nativeでは、再利用可能なコンポーネントを作成するクラスを定義し、次に、選択された要素のプロパティと値を設定または返すためにpropsメソッドを使用します。以下の例では、CustomCardクラスが定義され、親クラス内で使用されています。/>Flutterで、クラスを定義してカスタムウィジェットを作成し、ウィジェットを再利用します。次の例のbuild関数に示すように、再利用可能なウィジェットを返す関数を定義して呼び出すこともできます。...CustomCardクラスのコンストラクタは、Dartの中括弧構文{}を使用して、名前付きオプションパラメータを示しています。これらのフィールドを必要とするには、コンストラクタから中括弧を削除するか、requiredをコンストラクタに追加します。次のスクリーンショットは、再利用可能なCustomCardクラスの例を示しています。プロジェクトの構造とリソースどこでコードを書く?main.dartファイルから始めます。Flutterアプリを作成すると自動生成されます。function.");}Flutterでは、エントリポイントファイルは’projectname’/lib/main.dartで、main関数から実行が開始されます。Flutterアプリケーションのファイルが構造化は?新しいFlutterプロジェクトを作成すると、次のディレクトリ構造が構築されます。後でカスタマイズすることもできます。-Android固有のファイルが含まれています。-iOSとAndroidのビルドファイルを保存します。-iOS固有のファイルが含まれています。-外部からアクセス可能なDartソースファイルが含まれています。-追加のソースファイルが含まれています。-Flutterエントリポイントと新しいアプリケーションの開始。これでダーツコードの作成が始まります。Dartコードを書く場所です。-自動テストファイルが含まれています。-Flutterアプリケーションのメタデータを含みます。Nativeのpackage.jsonファイルと同じです。resourcesまたはassetsは、アプリケーションにバンドルされて配備され、実行時にアクセス可能なファイルです。WBMP)Flutterは、プロジェクトのルートにあるpubspec.yamlファイルを使用して、アプリケーションに必要なアセットを識別します。assets/background.pngアセットサブセクションには、アプリケーションに含めるファイルを指定します。各アセットは、アセットファイルが配置されているpubspec.yamlファイルに対する明示的なパスによって識別されます。アセットが宣言される順序は関係ありません。使用される実際のディレクトリ(この場合はアセット)は関係ありません。アセットは任意のアプリディレクトリに配置できますが、アセットディレクトリに配置することをお勧めします。ビルド中、Flutterはアセットを、アセットバンドルと呼ばれる特別なアーカイブに入れます。アセットバンドルは、アプリケーションが実行時に読み込むものです。アセットのパスがpubspec.yamlのassetsセクションで指定されると、ビルドプロセスは隣接するサブディレクトリに同じ名前のファイルを探します。これらのファイルは、指定されたアセットと共にアセットバンドルにも含まれます。Flutterは、アプリの解像度に適した画像を選択する際にアセットの種類を使用します。Nativeでは、イメージファイルをソースコードディレクトリに置いて参照することで、静的イメージを追加します。/>Flutterでは、ウィジェットのビルドメソッドでAssetImageクラスを使用して静的イメージをアプリケーションに追加します。Flutterを参照してください。Nativeでは、Imageコンポーネントのソース・プロップにuriを指定し、必要に応じてサイズを指定します。Flutterでは、Image.networkコンストラクタを使用して、URLの画像をインクルードします。Dartエコシステムに寄贈した共有パッケージを使用したFlutterサポートがあります。これにより、最初からすべてを開発することなく、アプリケーションを素早く構築することができます。プラットフォーム固有のコードを含むパッケージは、パッケージプラグインと呼ばれます。{package-name}を使用します。Flutterでは、次の手順を使用してパッケージをインストールします。パッケージ名とバージョンをpubspec.yamlのdependenciesセクションに追加します。Dartパッケージをpubspec.yamlファイルに追加する方法を示しています。getを実行して、コマンドラインからパッケージをインストールします。getが実行されることがよくあります。'package:flutter/cupertino.dart';詳細については、パッケージの使用およびパッケージとプラグインの開発を参照してください。Packagesセクションにあります。widgetsFlutterでは、ウィジェットのUIを構築し、現在の設定と状態を考慮して、そのビューをどのように表示するかを記述します。ウィジェットは、しばしば強力な効果を生み出すためにネストされた、多くの小さな、単一目的のウィジェットで構成されています。ウィジェットは、レイアウト、ペイント、位置付け、およびサイズ変更を担当するいくつかのウィジェットで構成されています。具体的には、ContainerウィジェットにはLimitedBox、ConstrainedBox、Align、Padding、DecoratedBox、およびTransformウィジェットが含まれています。カスタマイズされたエフェクトを生成するためにコンテナをサブクラス化するのではなく、これらのウィジェットや他のシンプルなウィジェットを新しくユニークな方法で作成できます。センターウィジェットは、レイアウトを制御する方法のもう1つの例です。ウィジェットを中央揃えするには、それをCenterウィジェットにラップしてから、配置、行、列、およびグリッドにレイアウトウィジェットを使用します。これらのレイアウトウィジェットには独自のビジュアル表現がありません。代わりに、その唯一の目的は別のウィジェットのレイアウトのいくつかの側面を制御することです。ウィジェットが特定の方法でレンダリングする理由を理解するには、隣接するウィジェットを調べると便利です。詳細については、Flutterの技術概要を参照してください。Indexを参照してください。Nativeでは、ViewはFlexboxによるレイアウト、スタイル、タッチ操作、アクセシビリティコントロールをサポートするコンテナです。Flutterでは、コンテナ、列、行、および中心などのWidgetsライブラリのコアレイアウトウィジェットを使用できます。Widgetsを参照してください。FlatListまたはSectionListに相当するものは?リストは、垂直に配置されたコンポーネントのスクロール可能なリストです。Nativeでは、FlatListまたはSectionListを使用して、シンプルリストまたはセクションリストを表示します。<Text>{item.key}</Text>}/>ListViewはFlutterの最も一般的に使用されるスクロールウィジェットです。ListViewは、少数のウィジェットに最適です。大規模なリストまたは無限のリストの場合は、ListView.builderを使用します。ListView.builderは、必要に応じて子を構築し、可視の子のみを構築します。1を参照してください。Nativeでは、キャンバスコンポーネントが存在しないため、react-native-canvasなどのサードパーティライブラリが使用されます。);}Flutterでは、CustomPaintクラスとCustomPainterクラスを使用してキャンバスに描画できます。次の例は、CustomPaintウィジェットを使用してペイントフェーズで描画する方法を示しています。これは、CustomPainterを実装し、それをCustomPaintのペインタプロパティに渡します。CustomPaintサブクラスでは、paintメソッドとshouldRepaintメソッドを実装する必要があります。Nativeでは、ほとんどのレイアウトは特定のコンポーネントに渡されるpropsで行うことができます。propを使用します。‘column’などの小道具を指定します。}}>Flutterでは、レイアウトは主にレイアウトを提供するように設計されたウィジェットとコントロールウィジェットおよびそのスタイルプロパティによって定義されます。ColumnウィジェットとRowウィジェットは子の配列をとり、それぞれ縦と横に並べます。コンテナウィジェットはレイアウトとスタイルプロパティの組み合わせをとり、センターウィジェットはその子ウィジェットを中央に配置します。),)Flutterは、コアウィジェットライブラリにさまざまなレイアウトウィジェットを提供します。Padding、Align、Stackなどです。完全なリストについては、レイアウトウィジェットを参照してください。Nativeでは、absoluteを使用してコンポーネントを重ねることができます。Flutterはスタックウィジェットを使用して子ウィジェットをレイヤーに配置します。ウィジェットは、ベースウィジェット全体または一部をオーバーラップさせることができます。Stackウィジェットは、ボックスの端に相対的に子を配置します。このクラスは、複数の子ウィジェットを重複させたい場合に便利です。],)CircleAvatarの上にStackを使用してコンテナ(半透明の黒い背景にテキストを表示)をオーバーレイしました。Stackは、alignmentプロパティとAlignment座標を使用してテキストをオフセットします。詳細については、Stackクラスのドキュメントを参照してください。Nativeでは、インライン・スタイリングとstylesheets.createを使用してコンポーネントをスタイルします。}});Flutterでは、TextウィジェットはstyleプロパティのTextStyleクラスを取ります。複数の場所で同じテキストスタイルを使用する場合は、TextStyleクラスを作成して複数のテキストウィジェットに使用できます。Nativeにはアイコンのサポートが含まれていないため、サードパーティライブラリが使用されます。Flutterでは、マテリアルライブラリをインポートすると、マテリアルアイコンと色の豊富なセットが取り込まれます。Colors.redAccent)Iconsクラスを使用する場合は、プロジェクトのpubspec.yamlファイルでuses-material-design:trueを設定してください。これにより、アイコンを表示するMaterialIconsフォントがアプリに含まれていることが保証されます。trueFlutterのCupertino(iOSスタイル)パッケージは、現行のiOS用の高品質ウィジェットを提供します。CupertinoIconsフォントを使用するには、プロジェクトのpubspec.yamlファイルにcupertino_iconsの依存関係を追加します。^0.1.0コンポーネントの色とスタイルをグローバルにカスタマイズするには、ThemeDataを使用してテーマのさまざまな側面のデフォルトの色を指定します。MaterialAppのテーマプロパティをThemeDataオブジェクトに設定します。Designカラーパレットの色を提供します。次の例では、主スウォッチを青に設定し、テキスト選択を赤に設定しています。Nativeでは、共通のテーマがスタイルシートのコンポーネントに対して定義され、コンポーネントで使用されます。Flutterでは、ThemeDataクラスのスタイリングを定義し、それをMaterialAppウィジェットのテーマプロパティに渡すことで、ほぼすべてのスタイルの均一なスタイルを作成できます。);}ThemeはMaterialAppウィジェットを使わなくても適用できます。Themeウィジェットは、そのdataパラメータでThemeDataを受け取り、すべての子ウィジェットにThemeDataを適用します。状態とは、ウィジェットが構築されたときに同期して読み取られる情報、またはウィジェットの存続期間中に変更される可能性のある情報のことです。Flutterでアプリの状態を管理するには、StateオブジェクトとペアになっているStatefulWidgetを使用します。StatelessWidgetFlutterのStatelessWidgetは、状態の変更を必要としないウィジェットです。管理する内部状態はありません。StatelessWidgetは、記述しているユーザーインターフェースの一部が、オブジェクト自体の構成情報やウィジェットが拡張されたBuildContext以外のものに依存していない場合に便利です。AboutDialog、CircleAvatar、およびTextはStatelessWidgetをサブクラス化するStatelessWidgetの例です。}}MyStatelessWidgetクラスのコンストラクタを使用して、finalとして宣言されているtextを渡しました。このクラスはStatelessWidgetを拡張します。これは不変のデータを含みます。ステートレスウィジェットのビルドメソッドは、通常、次の3つの状況で呼び出されます:ウィジェットがツリーに挿入されるときウィジェットの親がその設定を変更するときそれが依存するInheritedWidgetを変更するときStatefulWidgetStatefulWidgetは状態を変更するウィジェットです。StatefulWidgetの状態変更を管理するには、setStateメソッドを使用します。setStateを呼び出すとFlutterフレームワークに状態が変化したことが通知され、アプリケーションが変更メソッドを再実行してアプリケーションがその変更を反映できるようになります。状態とは、ウィジェットが構築されたときに同期して読み取られる情報であり、ウィジェットの存続期間中に変更される可能性がある情報です。ウィジェットの実装者は、状態が変化したときに状態が即座に通知されるようにする責任があります。ウィジェットが動的に変更できる場合は、StatefulWidgetを使用してください。フォームに入力するか、スライダを動かすことによって、ウィジェットの状態が変わります。時間とともに変化する可能性があります。データフィードによってUIが更新される場合があります。widgetsの例です。メソッドを必要とするStatefulWidgetを宣言しています。このメソッドは、ウィジェットの状態_MyStatefulWidgetStateを管理する状態オブジェクトを作成します。メソッドを実装します。状態が変化すると、例えば、ユーザがボタンをトグルすると、新しいトグル値でsetStateが呼び出されます。これにより、フレームワークはUI内でこのウィジェットを再構築します。}}StatefulWidgetとStatelessWidgetのベストプラクティスは?ウィジェットのデザイン時に考慮すべき点をいくつか挙げておきます。ウィジェットがStatefulWidgetかStatelessWidgetかを決定するFlutterでは、状態変化に依存するかどうかによって、ウィジェットはステートフルかステートレスのいずれかになります。ウィジェットが変更された場合(ユーザーがそのウィジェットとやりとりしたり、データフィードがUIを中断した場合)、ステートフルです。ウィジェットが最後か不変の場合、それはステートレスです。どのオブジェクトがウィジェットの状態を管理しているか(StatefulWidgetの場合)Flutterには、状態を管理する主な3つの方法があります:ウィジェットは独自の状態を管理します親ウィジェットはウィジェットの状態を管理しますミックス・アンド・マッチのアプローチどのアプローチを使用するかを決定する際には、以下の原則を考慮してください:問題の状態がチェックボックスのチェックまたはチェックされていないモードやスライダの位置などのユーザデータである場合、状態は親によって最良に管理されますウィジェット。問題の状態がデザイン的なもの、例えばアニメーションである場合、ウィジェット自体は状態を最もよく管理する。疑問がある場合は、親ウィジェットが子ウィジェットの状態を管理するようにします。StatefulWidgetとStateをサブクラス化するMyStatefulWidgetクラスは独自の状態を管理します。呼び出してウィジェットを構築します。次のベストプラクティスで実装される_MyStatefulWidgetStateのインスタンスを作成します。}}StatefulWidgetをウィジェットツリーに追加するカスタムのStatefulWidgetを、アプリケーションのビルドメソッドのウィジェットツリーに追加します。Nativeでは、ほとんどのコンポーネントを、異なるパラメータまたはプロパティ(propsと呼ばれます)で作成するときにカスタマイズすることができます。これらのパラメータは、this.propsを使用して子コンポーネントで使用できます。}}Flutterでは、finalと宣言されたローカル変数または関数に、パラメータ化されたコンストラクタで受け取ったプロパティを割り当てます。},)ローカルストレージ大量のデータを格納する必要がなく、構造体を必要としない場合は、shared_preferencesを使用して、boolean、float、ints、longs、およびprimitiveデータ型の永続的なキーと値のペアを読み書きできます。Nativeでは、AsyncStorageコンポーネントのsetItem関数とgetItem関数を使用して、アプリケーションに永続的かつグローバルなデータを格納および取得します。}});Flutterでは、shared_preferencesプラグインを使用して、アプリケーションに永続的でグローバルなKey-Valueデータを格納し、取得できます。shared_preferencesプラグインは、iOS上のNSUserDefaultsとAndroid上のSharedPreferencesをラップし、単純なデータ用の永続ストアを提供します。プラグインを使用するには、pubspec.yamlファイルにshared_preferencesを依存関係として追加し、Dartファイルにパッケージをインポートします。'package:shared_preferences/shared_preferences.dart';永続データを実装するには、SharedPreferencesクラスによって提供されるsetterメソッドを使用します。setterメソッドは、setInt、setBool、setStringなどのさまざまなプリミティブ型で使用できます。データを読み取るには、SharedPreferencesクラスが提供する適切なゲッターメソッドを使用します。各セッターには、対応するgetterメソッド(getInt、getBool、getStringなど)があります。_counter;});Routingほとんどのアプリには、さまざまな種類の情報を表示するための複数の画面が含まれています。ユーザーが製品イメージをタップして新しい画面で製品に関する詳細情報を入手できるようにしたイメージを表示する製品画面があるとします。Androidでは、新しい画面が新しいアクティビティです。iOSでは、新しい画面は新しいViewControllerです。Flutterの新しい画面に移動するには、Navigatorウィジェットを使用します。Nativeには、StackNavigator、TabNavigator、DrawerNavigatorという3つのメインナビゲータがあります。それぞれは、画面の構成と定義方法を提供します。}}));Flutterには、画面間を移動するために使用される2つの主要なウィジェットがあります。ルートは、アプリの画面やページの抽象です。Navigatorは経路を管理するウィジェットです。ナビゲーターは、スタックで子ウィジェットのセットを管理するウィジェットとして定義されています。ナビゲータはRouteオブジェクトのスタックを管理し、Navigator.pushやNavigator.popなどのスタックを管理するためのメソッドを提供します。ルートのリストは、MaterialAppウィジェットで指定することも、ヒーローアニメーションのようにオンザフライで構築することもできます。次の例では、MaterialAppウィジェットで名前付きルートを指定します。}}名前付きルートにナビゲートするには、Navigatorウィジェットのofメソッドを使用してBuildContext(ウィジェットツリー内のウィジェットの位置へのハンドル)を指定します。ルートの名前は、指定されたルートに移動するためにpushNamed関数に渡されます。Navigator.of(context).pushNamed('/a');また、Navigatorのpushメソッドを使用して、指定されたコンテキストを最も密接に囲むナビゲータの履歴に与えられたルートを追加し、そのコンテキストに遷移することもできます。次の例では、MaterialPageRouteウィジェットは、画面全体をプラットフォーム適応遷移に置き換えるモーダルルートです。必須パラメータとしてWidgetBuilderが必要です。UsualNavscreen()));タブナビゲーションとドロワーナビゲーションを使用するには?マテリアルデザインアプリには、tabsとdrawersの2つの主要なフラッターナビゲーションオプションがあります。タブをサポートするスペースが不十分な場合は、drawersが適しています。Nativeでは、createBottomTabNavigatorとTabNavigationは、タブの表示とタブのナビゲーションに使用されます。});Flutterは、drawersやタブナビゲーション用のいくつかの特殊なウィジェットを提供します。TabBarとTabBarViewの間のタブ選択を調整します。タブの水平行を表示します。Tab:マテリアルデザインのTabBarタブを作成します。現在選択されているタブに対応するウィジェットを表示します。controller,),TabBarとTabBarViewの間のタブ選択を調整するには、TabControllerが必要です。TabControllerコンストラクタのlength引数は、タブの総数です。TickerProviderは、フレームが状態変更をトリガするたびに通知をトリガする必要があります。TickerProviderはvsyncです。新しいTabControllerを作成するたびに、vsync:この引数をTabControllerコンストラクタに渡します。TickerProviderは、Tickerオブジェクトを提供できるクラスによって実装されたインターフェイスです。Tickerは、フレームがトリガされるたびに通知される必要があるオブジェクトであれば使用できますが、AnimationControllerを介して間接的に使用されるのが最も一般的です。AnimationControllerにはTickerを取得するためにTickerProviderが必要です。StateからAnimationControllerを作成する場合は、TickerProviderStateMixinまたはSingleTickerProviderStateMixinクラスを使用して適切なTickerProviderを取得できます。Scaffoldウィジェットは、新しいTabBarウィジェットをラップし、2つのタブを作成します。TabBarViewウィジェットはScaffoldウィジェットのbodyパラメーターとして渡されます。TabBarウィジェットのタブに対応するすべての画面は、同じTabControllerとともにTabBarViewウィジェットの子です。Nativeでは、必要なreact-navigationパッケージをインポートしてから、createDrawerNavigatorとDrawerNavigationを使用します。Designドロワーを使用してレイアウトを作成することができます。Drawerをアプリに追加するには、Scaffoldウィジェットでラップします。Designガイドラインに従ったアプリケーションに一貫したビジュアル構造を提供します。Designコンポーネントもサポートしています。Designパネルです。あなたは、ボタン、テキストウィジェット、またはDrawerウィジェットの子として表示する項目のリストを提供することができます。次の例では、ListTileウィジェットはナビゲーションをタップします。20.0,),ScaffoldウィジェットにはAppBarウィジェットも含まれています。このAppBarウィジェットは、ScaffoldでDrawerが利用可能になったときにDrawerを表示するための適切なIconButtonを自動的に表示します。Scaffoldは自動的にエッジスワイプジェスチャーを処理して、Drawerを表示します。);}ジェスチャ検出とタッチイベント処理ジェスチャーをリッスンし、任意の処理を行うことができます。Flutterはタップ、ドラッグ、スケーリングをサポートしています。Flutterのジェスチャーシステムには2つのレイヤーがあります。最初のレイヤーには、ポインター(タッチ、マウス、およびスタイラスの動きなど)の位置と移動を認識する画面上のポインタのイベントが含まれています。第2の層は、1つ以上のポインタ移動からなるアクションを記述するジェスチャを含みます。Nativeでは、リスナーはPanResponderまたはTouchableコンポーネントを使用してコンポーネントに追加されます。Press</Text></TouchableOpacity>より複雑なジェスチャーと複数のタッチを組み合わせて単一のジェスチャーにするには、PanResponderが使用されます。}}Flutterでは、クリック(または押す)リスナーをウィジェットに追加するには、ボタンまたはonPress:フィールドを持つタッチ可能なウィジェットを使用します。GestureDetectorでラップすることで、任意のウィジェットにジェスチャ検出を追加できます。},);HTTPネットワークリクエストの作成ほとんどのアプリでは、インターネットからデータを取得するのが一般的です。Flutterでは、httpパッケージを使用してインターネットからデータを取得する最も簡単な方法を提供しています。フェッチ要求を行い、データを取得するための応答を受信します。});};Flutterはhttpパッケージを使用します。httpパッケージをインストールするには、pubspec.yamlの依存関係セクションに追加します。<latest_version>Flutterは、dart:ioコアのHTTPサポートクライアントを使用します。HTTPクライアントを作成するには、dart:ioをインポートします。'dart:io';クライアントは、GET、POST、PUT、およびDELETEのHTTP操作をサポートしています。});}フォーム入力テキストフィールドを使用すると、ユーザーはアプリケーションにテキストを入力できるので、フォーム、メッセージングアプリケーション、検索エクスペリエンスなどの作成に使用できます。Flutterは、TextFieldとTextFormFieldという2つのテキストフィールドウィジェットを提供します。Nativeでは、テキストを入力するためにTextInputコンポーネントを使用してテキスト入力ボックスを表示し、コールバックを使用して値を変数に格納します。/>Flutterでは、TextEditingControllerクラスを使用してTextFieldウィジェットを管理します。テキストフィールドが変更されると、コントローラはリスナに通知します。リスナーは、テキストと選択プロパティを読み取って、ユーザーがフィールドに入力した内容を確認します。TextFieldのテキストには、コントローラのtextプロパティでアクセスできます。),)この例では、ユーザーが送信ボタンをクリックすると、テキストフィールドに入力された現在のテキストがアラートダイアログに表示されます。これは、警告メッセージを表示するalertDialogウィジェットを使用して実現され、TextFieldのテキストはTextEditingControllerのtextプロパティによってアクセスされます。フォームウィジェットはどのように使用?Flutterで、TextFormFieldウィジェットと送信ボタンを子として渡すFormウィジェットを使用します。TextFormFieldウィジェットにはonSavedというパラメータがあり、コールバックを受け取り、フォームが保存されるときに実行されます。FormStateオブジェクトは、このフォームの子孫である各FormFieldを保存、リセット、または検証するために使用されます。FormStateを取得するには、親がFormであるコンテキストでForm.ofを使用するか、FormKeyコンストラクターにGlobalKeyを渡してGlobalKey.currentStateを呼び出します。formKey(GlobalKey)がsubmit時にフォームを保存するために使用される方法を示しています。}}プラットフォーム固有のコードクロスプラットフォームアプリケーションを構築するときは、プラットフォーム間でできるだけ多くのコードを再利用したいと考えています。OSによってコードが異なることが理にかなっているシナリオが発生することがあります。これには、特定のプラットフォームを宣言して別個の実装が必要です。recognised";}Flutterでは、次の実装を使用します。analyzeでコードを検証してください。Flutterアナライザ(dartanalyzerツールのラッパー)は、コードを調べ、問題の可能性を特定するのに役立ちます。Flutter対応のIDEを使用している場合、これは自動的に発生します。Simulatorの場合は⌘D、Androidエミュレータの場合は⌘Mです。Flutterでは、IDEを使用している場合は、IDEツールを使用できます。runを使用してアプリケーションを起動する場合は、ターミナルウィンドウにhと入力するか、次のショートカットを入力してメニューにアクセスすることもできます。qホットリロードを実行するには?Flutterのホットリロード機能は、迅速かつ簡単に実験、UIの構築、機能の追加、およびバグの修正を支援します。ソースを変更するたびにアプリケーションを再コンパイルし、即座にホットリロードすることができます。アプリはあなたの変更を反映するために更新し、そしてアプリの現在の状態は保存されます。Nativeでは、ショートカットはiOSシミュレータでは⌘R、AndroidエミュレータではRを2回タッピングします。ctrl-s)を選択するか、ツールバーの[ホットリロード]ボタンをクリックします。runを使用してコマンドラインでアプリケーションを実行している場合は、ターミナルウィンドウに「r」と入力します。「ターミナル」ウィンドウでRを入力して完全再起動することもできます。Flutterのデバッグにはどんなツールが使える?Flutterアプリケーションをデバッグする必要があるときに使用できるオプションとツールがいくつかあります。Observatoryは、Dartアプリケーションのプロファイリングとデバッグに使用されるツールです。URL(http://127.0.0.1:8100/など)でWebページを開くことができます。Observatoryには、プロファイリング、ヒープの検査、実行されたコード行の観察、メモリーリークのデバッグ、メモリー断片化のサポートが含まれています。詳細については、Observatoryのドキュメントを参照してください。SDKをダウンロードしてインストールするときに無料で含まれています。IDEを使用している場合は、IDEデバッガを使用してアプリケーションをデバッグできます。Studioを使用している場合は、Flutterインスペクタを使用できます。Inspectorを使用すると、アプリケーションがそのようにレンダリングされる理由を簡単に理解することができます。Inspectorから開くことができます。コンテンツは、アプリの実行中にのみ表示されます。アクションを選択し、接続されている実機またはシミュレータで目的のウィジェットをクリックします。アプリのUIでウィジェットが強調表示されます。ウィジェットは、IntelliJのウィジェット階層とそのウィジェットの個々のプロパティで表示されます。Appsのデバッグを参照してください。Animationうまく設計されたアニメーションはUIを直感的に感じさせ、洗練されたアプリのルック・アンド・フィールに貢献し、ユーザーエクスペリエンスを向上させます。Flutterのアニメーションサポートにより、シンプルで複雑なアニメーションを簡単に実装できます。SDKには、標準モーションエフェクトを含む多くのマテリアルデザインウィジェットが含まれています。これらのエフェクトを簡単にカスタマイズして、アプリをパーソナライズすることができます。Reactネイティブでは、アニメーション化されたAPIがアニメーションの作成に使用されます。Flutterでは、AnimationクラスとAnimationControllerクラスを使用します。アニメーションは、現在の値とその状態(完了または却下)を理解する抽象クラスです。AnimationControllerクラスを使用すると、前後にアニメーションを再生したり、アニメーションを停止したり、アニメーションを特定の値に設定してモーションをカスタマイズできます。Nativeの例では、アニメーション化されたコンポーネントFadeInViewがアニメーション化されたAPIを使用して作成されています。遷移が起こる持続時間が定義される。アニメーションコンポーネントはAnimatedコンポーネント内に追加され、不透明状態fadeAnimはアニメーション化するTextコンポーネントの不透明度にマップされ、次にstart()が呼び出されてアニメーションが開始されます。...Flutterでは同じアニメーションを作成するには、controllerという名前のAnimationControllerオブジェクトを作成し、継続時間を指定します。デフォルトでは、AnimationControllerは、一定の期間、0.0から1.0の範囲の値を線形に生成します。アニメーションコントローラは、アプリケーションを実行しているデバイスが新しいフレームを表示する準備ができたら必ず新しい値を生成します。通常、このレートは毎秒約60です。AnimationControllerを定義するときは、vsyncオブジェクトを渡す必要があります。vsyncの存在は、オフスクリーンアニメーションが不要なリソースを消費するのを防ぎます。クラス定義にTickerProviderStateMixinを追加することで、ステートフルオブジェクトをvsyncとして使用できます。AnimationControllerには、コンストラクタのvsync引数を使用して設定されたTickerProviderが必要です。Tweenは、開始値と終了値の間の補間、または入力範囲から出力範囲へのマッピングを記述します。アニメーションでTweenオブジェクトを使用するには、Tweenオブジェクトのanimateメソッドを呼び出し、変更するAnimationオブジェクトに渡します。この例では、FadeTransitionウィジェットが使用され、opacityプロパティがアニメーションオブジェクトにマッピングされています。アニメーションを開始するには、controller.forward()を使用します。他の操作は、fling()やrepeat()などのコントローラーを使用して実行することもできます。この例では、FlutterLogoウィジェットがFadeTransitionウィジェット内で使用されています。Nativeでは、スワイプアニメーションにPanResponderライブラリまたはサードパーティライブラリが使用されます。Flutterでは、スワイプアニメーションを追加するには、Dismissibleウィジェットを使用して子ウィジェットをネストします。NativeとFlutterウィジェットの同等のコンポーネント次の表に、対応するFlutterウィジェットおよび一般的なウィジェットプロパティにマップされた、一般的に使用されるReactネイティブコンポーネントを示します。Builder]このコールバックは、ゼロ以上でitemCountより小さいインデックスでのみ呼び出されます。ListViewが最大スクロール・エクステントを推定する能力を向上させます。進捗インジケータの背景色。ユーザーがスライダの新しい値を選択したときに呼び出されますSummary長々ーーと、ReactNativeでできることはFlutterでもできます!!!的な話をしてきました。[mac]普通に作るとiosとandroidのそれぞれのアプリを作らなきゃいけないのがアプリ開発の辛いところ。コメントをキャンセルメールアドレスが公開されることはありません。アニメーション入門!こんなことできますよ。