Flutter-creating-simple-application-in-android-studio
提供:Dev Guides
Android Studioでのシンプルなアプリケーションの作成
この章では、Android Studioでフラッターアプリケーションを作成する基本を理解するために、簡単な_Flutter_アプリケーションを作成します。
- ステップ1 *-Android Studioを開きます
ステップ2 *-Flutterプロジェクトを作成します。 そのためには、[ファイル]→[新規]→[新しいFlutterプロジェクト]をクリックします
ステップ3 *-Flutter Applicationを選択します。 このために、 *Flutter Application を選択し、 Next をクリックします。
- ステップ4 *-アプリケーションを以下のように構成し、[次へ]をクリックします。
- プロジェクト名: hello_app
- Flutter SDKパス: <path_to_flutter_sdk>
- プロジェクトの場所: <path_to_project_folder>
- 説明:フラッターベースのHello Worldアプリケーション
- ステップ5 *-プロジェクトを構成します。
会社のドメインを flutterapp.finddevguides.com として設定し、[*完了]をクリックします。
- ステップ6 *-会社のドメインを入力します。
Android Studioは、最小限の機能で完全に機能するフラッターアプリケーションを作成します。 アプリケーションの構造を確認してから、コードを変更してタスクを実行しましょう。
アプリケーションの構造とその目的は次のとおりです-
アプリケーションの構造のさまざまなコンポーネントはここで説明されています-
- アンドロイド-アンドロイドアプリケーションを作成するために自動生成されたソースコード
- ios -iOSアプリケーションを作成するために自動生成されたソースコード
- lib -flutterフレームワークを使用して記述されたDartコードを含むメインフォルダー
- ib/main.dart -Flutterアプリケーションのエントリポイント
- test -フラッターアプリケーションをテストするためのDartコードを含むフォルダー
- test/widget_test.dart -サンプルコード
- .gitignore -Gitバージョン管理ファイル
- .metadata -フラッターツールによって自動生成
- .packages -フラッターパッケージを追跡するために自動生成
- .iml -Androidスタジオで使用されるプロジェクトファイル
- pubspec.yaml -Flutterパッケージマネージャー Pub で使用
- pubspec.lock -Flutterパッケージマネージャー、 Pub によって自動生成
- README.md -Markdown形式で記述されたプロジェクト記述ファイル
- ステップ7 *-_lib/main.dartファイルのdartコードを以下のコードに置き換えます-
dartコードを1行ずつ理解してみましょう。
- *行1 *-flutterパッケージ_material_をインポートします。 マテリアルは、Androidで指定されたマテリアルデザインガイドラインに従ってユーザーインターフェイスを作成するためのフラッターパッケージです。
- *行3 *-これはFlutterアプリケーションのエントリポイントです。 _runApp_関数を呼び出して、_MyApp_クラスのオブジェクトを渡します。 _runApp_関数の目的は、指定されたウィジェットを画面に添付することです。
- *行5-17 *-ウィジェットは、フラッターフレームワークでUIを作成するために使用されます。 StatelessWidget_はウィジェットであり、ウィジェットの状態を保持しません。 _MyApp_は_StatelessWidget_を拡張し、その_buildメソッド_をオーバーライドします。 _build_メソッドの目的は、アプリケーションのUIの一部を作成することです。 ここで、_build_メソッドは、アプリケーションのルートレベルUIを作成するウィジェットである_MaterialApp_を使用します。 _title、theme _、 home_の3つのプロパティがあります。
- _title_はアプリケーションのタイトルです
- _theme_はウィジェットのテーマです。 ここでは、_ThemeData_クラスとそのプロパティ_primarySwatch_を使用して、アプリケーションの全体的な色として_blue_を設定します。
- homeはアプリケーションの内部UIで、別のウィジェット MyHomePage を設定します
- *行19-38 *-MyHomePage_は、_Scaffold Widgetを返すことを除いて、_MyApp_と同じです。 _Scaffold_は、_MaterialApp_ウィジェットの横にあるトップレベルのウィジェットで、UI準拠のマテリアルデザインを作成するために使用されます。 アプリケーションのヘッダーを表示する_appBar_と、アプリケーションの実際のコンテンツを表示するbodyの2つの重要なプロパティがあります。 _AppBar_は、アプリケーションのヘッダーをレンダリングする別のウィジェットであり、_appBar_プロパティで使用しています。 _body_プロパティでは、子ウィジェットを中央に配置する_Center_ウィジェットを使用しました。 _Text_は、テキストを表示するための最後で最も内側のウィジェットであり、画面の中央に表示されます。
ステップ8 *-次に、 *Run→Run main.dart を使用してアプリケーションを実行します
- ステップ9 *-最後に、アプリケーションの出力は次のとおりです-