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

![image.png](https://200lab-blog.imgix.net/2021/07/728592CE-E154-45FB-8D3E-D9826D0D096C.jpeg?fm=webp&auto=format,compress&w=1000)
<p>Flutterは、モバイルだけでなく、Web、組込システム、デスクトップアプリなどの他のプラットフォームでも開発が益々進んでいます。Flutterを学ぶ時間が現在限りです。！</p>


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

<!-- wp:paragraph -->
<p><strong>環境設定</strong></p>
<!-- /wp:paragraph -->

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

<!-- wp:heading -->
<h2><strong>我々</strong><strong>のデモアプリ</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここでは、<strong>Flutter</strong>とそのwidgetのいくつかにすばやく慣れるために、デモシングルページアプリケーション（単一画面のアプリ）を構築します。デモアプリは次のようになります、</p>
<!-- /wp:paragraph -->
![image.png](https://200lab-blog.imgix.net/2021/07/FC2D02C6-4F9D-46C4-AAE2-7C44D6C47547.gif)

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

<!-- wp:heading -->
<h2><strong>アプリの初期化</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>新しいアプリケーションを初期化するには、terminal/consoleでディレクトリパスを指定し、以下のコマンドを使用します、</p>
<!-- /wp:paragraph -->
<!-- wp:code -->
<pre id="data-clipboard-target-0" class="wp-block-code"><code>flutter create your_project_name</code></pre>
<!-- /wp:code -->

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

<!-- wp:heading -->
<h2><strong>プロジェクトフォルダの構造</strong></h2>
<!-- /wp:heading -->

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

<!-- wp:code -->
<pre id="data-clipboard-target-1" class="wp-block-code"><code>&gt;android
&gt;build
&gt;ios
&gt;lib 
   -&gt; main.dart
&gt;test
&gt;.gitignore
&gt;pubspec.lock
&gt;pubspec.yaml
&gt;README.md</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p><strong>フォルダー「android」</strong></p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3><strong>フォルダー「build」</strong></h3>
<!-- /wp:heading -->

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

<!-- wp:heading {"level":3} -->
<h3><strong>フォルダー「ios」</strong></h3>
<!-- /wp:heading -->

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

<!-- wp:heading {"level":3} -->
<h3><strong>フォルダー「lib」</strong></h3>
<!-- /wp:heading -->

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

<!-- wp:heading {"level":3} -->
<h3><strong>フォルダー「test」</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>このフォルダーには、Flutterアプリケーションの<strong>unit test</strong>を記述できます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>ファイル「.gitignore」</strong></h3>
<!-- /wp:heading -->

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

<!-- wp:paragraph -->
<p><strong>ファイル「pubspec.lock」と「pubspec.yaml」</strong></p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3><strong>ファイル「README」</strong></h3>
<!-- /wp:heading -->

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

<!-- wp:heading -->
<h2><strong>エミュレーター/実際のデバイスでアプリを実行します</strong></h2>
<!-- /wp:heading -->

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

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

<!-- wp:heading -->
<h2><strong>アプリケーションをビルドします。</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>main.dart</strong>ファイルのコードを削除しました。 次のようにアプリの作成を再開しましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>パッケージのインポート</strong></p>
<!-- /wp:paragraph -->

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

<!-- wp:code -->
<pre id="data-clipboard-target-2" class="wp-block-code"><code>import 'package:flutter/material.dart';</code></pre>
<!-- /wp:code -->

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

<!-- wp:paragraph -->
<p>ここまで<strong>第一部</strong>は終わりです。この記事の<strong>第二部</strong>でお会いしましょう!</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p> <a href="https://ints.vn/">株式会社INTS</a>　　開発部　ハイ．アン </p>
<!-- /wp:paragraph -->