Android Studioでのシンプルなアプリケーションの作成

この章では、Android Studioでフラッターアプリケーションを作成する基本を理解するために、簡単な_Flutter_アプリケーションを作成します。

ステップ1 *-Android Studioを開きます

ステップ2 *-Flutterプロジェクトを作成します。そのためには、[ファイル]→[新規]→[新しいFlutterプロジェクト]をクリックします

新しいFlutterプロジェクト

ステップ3 *-Flutter Applicationを選択します。このために、 *Flutter Application を選択し、 Next をクリックします。

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コードを以下のコードに置き換えます-

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  //This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

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 *-最後に、アプリケーションの出力は次のとおりです-

ホームページ

Flutter-creating-simple-application-in-android-studio

Android Studioでのシンプルなアプリケーションの作成