Flutterの基本：最初のアプリプログラミング（第一部）

Flutterは、モバイルだけでなく、Web、組込システム、デスクトップアプリなどの他のプラットフォームでも開発が益々進んでいます。Flutterを学ぶ時間が現在限りです。！

最初のアプリの作成を開始する事より良いことは何ですか？それでは、すぐに始めましょう！

環境設定

この投稿シリーズでは、EditorとしてVisual Studio Codeを使用しています。どんなeditorでも使用できます。Flutter SDKがPCにインストールされていることを確認しましょう。また、Emulatorまたは任意のAndroidデバイスでアプリを実行出来るようにAndroid Studioをインストールする必要があります。macOSを使用している場合は、iOSシミュレーターまたは実際のiOSデバイスでFlutterアプリを実行するようにXCodeを設定することもできます。

我々のデモアプリ

ここでは、Flutterとそのwidgetのいくつかにすばやく慣れるために、デモシングルページアプリケーション（単一画面のアプリ）を構築します。デモアプリは次のようになります、

これは、アプリバーとボタンにテキストを表示するために構築するとても簡単なアプリです。ボタンをクリックすると、背景色が変わります。

アプリの初期化

新しいアプリケーションを初期化するには、terminal/consoleでディレクトリパスを指定し、以下のコマンドを使用します、

flutter create your_project_name

または、Android StudioまたはVS Codeコマンドパレットから新しいFlutterプロジェクトを作成することもできます。

プロジェクトフォルダの構造

最初のアプリの作成を開始する前にプロジェクトフォルダの構造をざっと目を通しておきましょう。

>android
>build
>ios
>lib 
   -> main.dart
>test
>.gitignore
>pubspec.lock
>pubspec.yaml
>README.md

フォルダー「android」

このフォルダーには、Androidアプリケーションのすべてのプロジェクトファイルがあります。ここで変更を加えたり、必要な権限とAndroidのネイティブコードを追加したりできます。

フォルダー「build」

このフォルダーには、アプリバンドル、apkファイル、その他の関連ファイルやフォルダーなど、コンパイルされたすべての出力が含まれます。

フォルダー「ios」

このフォルダーには、iOSアプリのすべてのネイティブコードがあります。androidフォルダーと同様に、ここで必要な権限を追加し、iOSのネイティブコードを追加できます。

フォルダー「lib」

libフォルダーに、main.dartファイルがあります。 このフォルダーに記述されているすべてのdartコードは、コンパイル時にネイティブプラットフォームコード（ネイティブAndroidとiOS）にコンパイルされます。

フォルダー「test」

このフォルダーには、Flutterアプリケーションのunit testを記述できます。

ファイル「.gitignore」

プロジェクトのバージョン管理システム(version control)としてGITを使用している場合は、このファイルに精通していると思います。 GITに制御させたくない、変更を追跡させたくないファイルとフォルダーは、このファイルで宣言されます。

ファイル「pubspec.lock」と「pubspec.yaml」

このファイルには、必要なすべてのパッケージ名、それのバージョン、内容へのリンク、ディペンデンシーズ、アプリ名、アプリのバージョン、アプリのディペンデンシーズなどが含まれています。

ファイル「README」

これは、アプリケーションに関するすべての基本情報と記述を含むマークダウンファイルです。

エミュレーター/実際のデバイスでアプリを実行します

アプリを実行するには、既存のAndroidエミュレーターまたはiOSエミュレーターを作成または開いてみてましょう。ibフォルダーとmain.dartファイルを開き、F5を押してアプリケーションを実行します。 VSコードエディターにflashingとdartの拡張機能がインストールされている場合は、main.dartファイルのvoid main（）関数にマウスオーバーするとRun | Debugオプションが表示されます。 

アプリを実行すると、基本的なFlutterアプリが自動的に生成されます。 main.dartファイルは、Flutterアプリケーションのエントリポイントです。 いかなるFlutterアプリケーションの実行は、void main（）{…}から始まります。 これから、すべてを削除して、アプリケーションを最初から始めましょう。

アプリケーションをビルドします。

main.dartファイルのコードを削除しました。 次のようにアプリの作成を再開しましょう。

パッケージのインポート

まず、必要なパッケージをインポートする必要があります。このアプリケーションでは、Flutterに提供されるmaterialパッケージが必要です。すべてのウィジェットと関数は、このパッケージに基づいて構築されています。 次のコマンドでこのパッケージをインポートできます。

import 'package:flutter/material.dart';

アプリケーションで他のパッケージを追加する必要がある場合、コマンドは上記と同じ、パッケージ名を変更するだけです。

株式会社INTS　　開発部　ハイ．アン