本記事では、Scaffoldの各プロパティについて紹介し、どんな時に使用するか解説します。

本記事は、FlutterのインストールとVScodeの拡張機能のインストールは完了していることを想定しています。

未完了の場合は、以下の記事を合わせて読んでください。

Flutterの開発を進めるには、FlutterのパッケージをPCにインストールする必要があります。
さらに、VScodeの拡張機能を使えば、時短して開発できます。

FlutterでVScodeの環境設定を解説

【Flutter】VSCodeでWindowsの開発を環境構築

Windowsを使ってflutterでvscodeの環境構築を解説をしています。アプリの開発はOSごとに使用できる言語が異なりますが、Flutterはどちらも対応していて、企業の参入もしています。

alicia-ing.com

2024.11.05

Scaffold

FlutterのScaffoldは、アプリケーションの基本的な構造やレイアウトを提供するウィジェットです。Scaffoldウィジェットは、通常アプリの標準的な画面構造を定義します。

Scaffoldにはいくつか主要な要素があり、管理できるUI部品は、VScodeで確認できます。
コードエディタ上でマウスカーソルを合わせて、「Ctrl」を押しながらクリックしてください。

「Scaffold.dart」が開かれて、使用できるプロパティーが表示されます。

class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for Material Design widgets.
  const Scaffold({
    super.key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.persistentFooterAlignment = AlignmentDirectional.centerEnd,
    this.drawer,
    this.onDrawerChanged,
    this.endDrawer,
    this.onEndDrawerChanged,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
  });
}

これらのマテリアルを使用してアプリを作成していきます。

本記事では、アプリケーションバー・画面本体・ボトムバーなどの画面構成部品とボタンやドロワーなどのUI部品に分けて紹介をします。

key

keyは、公式ページが述べているように、
同じ型のウィジェットが複数ある場合、区別するために使用するものです。

扱いが難しいので、複雑なアプリケーションを作らない場合は、無視しても大丈夫です。

A Key is an identifier for Widgets, Elements and SemanticsNodes.

A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element.

Key class – foundation library – Dart API

appBar

appBarは、スクリーンの上部に表示するアプリケーションバーを定義するプロパティです。
スクロールできるアプリバーを作成する場合は、 SliverAppBarを使用します。

App bars are typically used in the Scaffold.appBar property, which places the app bar as a fixed-height widget at the top of the screen. For a scrollable app bar, see SliverAppBar, which embeds an AppBar in a sliver for use in a CustomScrollView.

AppBar class – material library – Dart API

body

アプリケーションバー(appBar)とボトムバー(bottomNavigationBar)の間に配置される要素ー要するに、アプリの本体となり情報の提供や操作をする場所になります。

The widget in the body of the scaffold is positioned at the top-left of the available space between the app bar and the bottom of the scaffold. To center this widget instead, consider putting it in a Center widget and having that be the body. To expand this widget instead, consider putting it in a SizedBox.expand.

body property – Scaffold class – material library – Dart API

floatingActionButton

画面上に円形のボタンとして配置されます。
1画面に1つだけ使用されて、作成や共有、ナビゲーションなどのアプリケーションの主要な動作を促進します。

A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are mo０st commonly used in the Scaffold.floatingActionButton field.

Use at most a single floating action button per screen. Floating action buttons should be used for positive actions such as “create”, “share”, or “navigate”. (If more than one floating action button is used within a Route, then make sure that each button has a unique heroTag, otherwise an exception will be thrown.)

FloatingActionButton class – material library – Dart API

floatingActionButtonを使用すると、画面の右下にボタンが配置されます。このボタンを中央に配置、ボトムバーと重ねるには、「floatingActionButtonLocation」を使用します。

floatingActionButtonAnimatorは、ボタンにアニメーションを制御するプロパティです。

persistentFooterButtons

bodyプロパティの下に複数のボタンを配置できます。
また、bodyをスクロールしても、これらのボタンは、画面上に保持されます。

A set of buttons that are displayed at the bottom of the scaffold.

Typically this is a list of TextButton widgets. These buttons are persistently visible, even if the body of the scaffold scrolls.

These widgets will be wrapped in an OverflowBar.

The persistentFooterButtons are rendered above the bottomNavigationBar but below the body.

persistentFooterButtons property – Scaffold class

drawer

アイコンボタン（ハンバーガーメニュー）を配置して、ボタンを押すと水平にスライドして、ナビゲーションリンクを表示します。

A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

There is a Material 3 version of this component, NavigationDrawer, that’s preferred for applications that are configured for Material 3 (see ThemeData.useMaterial3).

Drawer class – material library – Dart API

drawerは、画面左にアイコンが配置されます。
一方でendDrawerは、画面右にアイコンが配置されます。

bottomNavigationBar

画面の下部（ボトム）にナビゲーションバーを配置します。
アイコンやテキストを表示し、3つ～５つの項目を表示します。

A material widget that’s displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

There is an updated version of this component, NavigationBar, that’s preferred for new applications and applications that are configured for Material 3 (see ThemeData.useMaterial3).

The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app. For larger screens, side navigation may be a better fit.

BottomNavigationBar class – material library – Dart API

bottomSheet

ユーザーは、ボトムシートを直接的に使うことはなく、ボタンを押すと、下部からテキストを添えたシートが表示されるものです。

The BottomSheet widget itself is rarely used directly. Instead, prefer to create a persistent bottom sheet with ScaffoldState.showBottomSheet or Scaffold.bottomSheet, and a modal bottom sheet with showModalBottomSheet.

BottomSheet class – material library – Dart API

backgroundColor

ウィジェットのマテリアルに色を付けます。

The color of the Material widget that underlies the entire Scaffold.

The theme’s ThemeData.scaffoldBackgroundColor by default.

backgroundColor property – Scaffold class – material library

現在は、primaryやonprimaryは非推奨となり、代替としてbackgroundColorとなりました。

this.primary = true,

extendBody

bodyの範囲ボトムナビゲーションバーまで拡張するプロパティです。
同様に、extendBodyBehindAppBarはアプリケーションバーまで拡張するプロパティです。
通常では重ねませんが、trueにすることで変更できます。

If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons.

extendBody property – Scaffold class – material library

restorationId

Flutterフレームワークにおいて、ウィジェットの状態を保存し、ページで構成されたルートの状態を保存および復元するための復元ID。
復元IDが指定されていない場合、ルートはその状態を復元されません。

Restoration ID to save and restore the state of the Route configured by this page.

If no restoration ID is provided, the Route will not restore its state.

restorationId property – Page class – widgets library – Dart API

UdemyでFlutterを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

まとめ

Scaffoldは、アプリケーションの基本的な構造やレイアウトを提供するウィジェットで、Flutterでのアプリ開発では必要不可欠な要素です。

主に、プロパティはアプリケーションバー、画面本体、ボトムバーから構成されています。
加えて、ボタンやドロワーなどのUI部品をウィジェットがあります。

これらを使ってFlutterでは、アプリケーション開発のハードルが低いです。

この時、考えられる原因と対処方法を紹介します。

Build faild with an exception.

「Build faild with an exception.」
このエラー文は、Androidのアプリケーション・ゲームを実行またはビルドした時に問題点があると表示されるものです。

【Flutter】VScodeでAndroidエミュレータ起動

AndroidアプリはAndroid Studioのインストール、Amdroid SDKが必要で、Android toolchaiの認識も同時に必須です。エミュレータの違法と聞いたことがあるかもしれませんが、エミュレータ自体は合法です。

alicia-ing.com

2025.08.11

Flutterの他に、Unityのビルドが失敗した時にも表示されます。

app_plugin_loaderの保管場所

ほとんどの人は、app_plugin_loaderの保管が適切ではないことが考えられます。

警告文に追従して、問題点が挙げられています。
要するに、app_plugin_loaderが存在しないと判断されています。

*What went wrong:
A problem occurred evaluating setting "android".

>Could not read script "C:\Users(USERNAME)\Desktop\@?????????\flutter\packages
\flutter_tools\gradle\app_plugin_loader.gradle" as it does not exist.

しかし、表示されたパスには、しっかりとflutterが保管されています。
原因は、パスに全角文字が含まれることです。

全角では、その部分は「?」に置き換えられています。
スクリプトを読み取ることができず、認識することができません。

flutterで環境構築するとき、配置する場所は全角文字のなくパスが複雑にならない場所に配置するべきです。

【Flutter】VSCodeでWindowsの開発を環境構築

Windowsを使ってflutterでvscodeの環境構築を解説をしています。アプリの開発はOSごとに使用できる言語が異なりますが、Flutterはどちらも対応していて、企業の参入もしています。

alicia-ing.com

2024.11.05

対処法

対処は簡単で、半角のみのパスを指定してください。
settings.jsonを開いて、「dart.flutterSdkPath」の内容を変更します。

settings.jsonは、一般的にFlutterがインストールされたPCのパス「C:\Users\(USERNAME)\AppData\Roaming\Code\User\settings.json」から開くことができます。

あるいは、VScodeを再度起動してください。

The SDK configured in dart.flutterSdkPath is not a vaild SDK folder.

SDKフォルダーが有効ではないと警告されています。
settings.jsonはここから開くことができます。

開いた後、平仮名、漢字などの全角を含むパスの部分を修正してください。

UdemyでFlutterを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

パッケージ再インストール

dart.flutterSdkPathを変更すると、パッケージが変更・破損するので、widgetがエラーを起こします。

これを修正しなければいけません。

flutter pub cache repair

flutter pub cache repairは、pubspec.yamlのパッケージすべてをインストールします。
ターミナルに入力して、実行してください。

flutter pub cache repairを実行すると、パッケージがインストールされます。
その後、「Flutter run」を実行させてください。

パッケージすべてをダウンロードするので、少し時間がかかります。

完了後、F5、デバックを実行してください。
エミュレータで動作できるようになります。

まとめ

Androidエミュレータを実行しようとしたときに、Build faild with an exception.が表示されてビルドできなかった場合、dart.flutterSdkPathに全角の文字が含まれることが考えられます。

その場合は、settings.jsonからパスを半角に変更することで解決できます。

さらに、パッケージが変更・破損してビルドできない場合は、ターミナルでflutter pub cache repairを実行してください。

Androidエミュレータを使って、アプリケーションを操作する。

Flutterの強みは、Android・iOSどちらも同時に開発ができることです。

現在、主流のアプリ開発できるプログラミング言語は、
iOSであればSwift。AndroidであればKotlin。

アプリ開発は、ビジネスの中心でもあるので、求人も多数存在します。
しかし、Android、iOSどちらも開発をしようとすると2つの言語をマスターしなければいけません。

Flutterを使えば、UI・Widgetも豊富で、iOS・Androidいずれも開発できます。

本記事では、WindowsでFlutterを使ってAndroidアプリの開発環境を構築し、
さらに、エミュレーターを使ってアプリを実行します。

また、FlutterのインストールとVScodeの拡張機能のインストールは、
完了していることを想定しています。

【Flutter】VSCodeでWindowsの開発を環境構築

Windowsを使ってflutterでvscodeの環境構築を解説をしています。アプリの開発はOSごとに使用できる言語が異なりますが、Flutterはどちらも対応していて、企業の参入もしています。

alicia-ing.com

2024.11.05

Android Studio

Android Studioは、Androidアプリを開発するために必要なツールで、
FlutterをVScodeで使用する時も、インストールが必要になるツールです。

要するに、Androidアプリを実行するときは必ず必要になるソフトウェアです。

Android Studio は Android アプリ開発用の公式の統合開発環境（IDE）です。 IntelliJ IDEA の強力なコードエディタとデベロッパー ツールをベースとした Android Studio には、Android アプリを構築する際の生産性向上に役立つ次のような多くの機能が用意されています。

Android Studio の概要

コマンドプロンプトで使用できるパッケージを確認します。

flutter doctor

入力して、実行（Enter）すると、[√]・[×]・[!]があります。

この時、[×]・[!]は、インストールされていない。
ライセンスに承諾していないことが挙げられます。

Androidアプリの開発には、Android Studioと Android toolchainの２つを[√]に認識させる必要があります。

Android Studioインストール

公式サイトからAndroid Studioをダウンロードします。

「Android Studio Giraffeをダウンロードする」に進み、ライセンス・規約を読み、承諾してダウンロードしてください。

ダウンロードしたインストーラ―をクリックして、Nextで読み進めてインストールを完了させてください。

インストール後、ライセンスの同意や各種情報を「Accept」で進んでください。
このとき、ダウンロードに時間がかかります。自分は、15分程度でした。
ゲージが全く動く気配がありませんが、突然動くので気長に待ってインストールを完了させてください。

Flutter doctorで確認すると、Android Studioの表示は[√]となり、認識されました。

Command-line Toolsをインストール

Android Studioをインストールしても、まだエミュレートすることはできません。

flutter doctorでAndroid toolchaiを認識する必要があります。
項目「cmdline-tools component is missing」の警告文通り、Command-line Toolsをインストールします。

Applyをクリックすると、インストールが始まります。
完了後、finishをクリックしてください。

Flutter doctorで確認すると、無事にインストールが完了していることが分かります。

Android license status unknown

最後にライセンスを確認します。

Android licenseの取得は、コマンドプロンプトで得ることができます。

>flutter doctor --android-licenses

ライセンスに承諾する場合は「y」、否認する場合は「N」を入力して、Enterキーを入力します。
Androidアプリを作りたい場合は、ライセンスに承諾する必要がありますので、yを6回入力します。

これにて、ライセンスの取得もできたので、最後にflutter doctorでAndroid toolchaiも[√]となり、認識されます。

以上でAndroid Studioの各種設定が終了です。

エミュレータを設定

Android StudioとAndroid toolchaiを認識できたので、flutterのコードを実行した時にどのような処理がされるか確認するためにエミュレータを作成します。

エミュレータは、英語のemulateから分かる通り「まねる、模倣する」という意味になります。
要するに、擬似的に環境を構築するソフトウェアやハードウェアのことを指します。

エミュレータを使うことで、Windows上でAndroidのアプリを動作させることができます。
アプリケーションは本来、PC・AndroidはOSに依存し、開発されたソフトウェアを異なる環境下で動作させることはできません。

Flutterでは、エミュレータを使うことでコードを書き替えてすぐに変更内容が反映されます。
実機を使うよりも開発に便利です。

エミュレータの作成

エミュレータの作成は、Android Studioで行います。
公式で用意するので、エミュレータ自体に違法性がないことが言えます。

Android Studioを起動して、More ActionsのVirtual Device Mangagerを選択してください。

Create virutal deviceを選択し、任意のデバイスを選択してNextに進んでください。

system imageですが、現在選択されているもので良いです。
本記事では、Rで進めていきます。
インストールされていない場合は、ダウンロードマークを押して、表示させてください。

名前を付けて（AVD Name）、Finishで完了です。

UdemyでFlutterを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

実演（エミュレータアプリを実行）

エミュレータも作成できたので、いよいよ実行します。

VScodeを開いて、青帯の「No Device」から作成したエミュレータを選択してください。
あるいは、実行とデバック（or F5）で実行しようとすると、デバイス決定を促されます。

スクリプトとエミュレータの接続が正常に行われると、画面に表示されます。
冒頭で紹介したように、画面上でしっかりと動作することも確認できます。

本記事の手順でAndroid Studioをインストールして、
エミュレータを操作しようとしたけれど、エラー生じる。

そのような場合は、ファイルの名前が不適切な可能性があります。

【Flutter】Androidアプリでのビルドエラーの対処法

AndroidエミュレータでBuild faild with an exceptionでビルドできなかった場合は、settings.jsonからパスを全角から半角に変更することで解決できます。同時にパッケージが破損することがあります。

alicia-ing.com

2025.08.11

まとめ

Androidアプリを作るには、Android Studioをインストールして、Amdroid SDKを設定する必要があります。

また、Android toolchaiを認識するために、Command-line ToolsのインストールとAndroid licenseの取得が必要です。

エミュレータを作成すると、無事にVScodeでアンドロイドアプリを動作させることができます。
エミュレータの違法という言葉を耳にするかもしれませんが、エミュレータ自体は合法です。
エミュレータを使ってROMを違法にダウンロードしたり、譲渡したりする行為が犯罪になります。

FlutterをVScodeからデバックをする。

現在は、PCを持っていないけれど、スマホやタブレットを持っている人が多いです。

スマホが登場して早何十年と経過して、大学や大学院で学んだ人や業務で開発をする人ではなくとも、アプリ開発はだれでも簡単に作成することができるようになりその敷居は低くなりました。

一般的にアプリはOSによって使うプログラミング言語が異なります。
したがって、iOS版を作りたいならiOS向けの言語、
Android版を作りたいならAndroid向けの言語を使わなければなりません。

しかし、FlutterはiOSとAndroidどちらにも対応した言語です。
FlutterならばOSのことを一切考えず、
どちらにも最適なものとして開発を進めることができます。

さらに、FlutterはVisual Stadio Codeのプラグインがあるので、
アプリ開発をしたことがない初心者でも作成することができます。

本記事では使用しているPCにFlutterをインストールしてVSCodeで使えるようにします。

スマホアプリのプログラミング言語

スマホアプリを開発する言語は非常に多くあります。

例として８つの言語を列挙し、iOS、Androidで使えるか、
難易度は様々な意見を参考にして自分の目安でつけています。

一般的にアプリ開発はiOS、Androidどちらでも使えるマルチプラットフォームではなく、
SwiftやKotlinのようなネイティブ言語の方がよいと言われています。

例えば、Xamarinで開発する際にC#の他にもAndroidとiOSのSDK、.NET Framework、Xamarin.Forms（iOS）（Android）の知識が必要になります。

実際にXamarinを開発をしたことがあり、個人で使う分には良かったです。
しかし、App StoreやGoogle Play Storeに出品できるものが作れるかというと、
相当な経験と技術が必要になると感じました。

さらに、案件ではSwiftとKotlinがほとんどです。
仕事にしやすいことから、iOSならばSwift、AndroidならばKotlinを学ぶべきでしょう。

Flutter

前述の通りだとFlutterも学ぶべきではないと危機感があるかもしれません。
Flutterは最近注目を集めている言語で、今後需要が高まる可能性があります。

Flutterは、2018年にGoogleがリリースしたモバイルフレームワークで比較的新しく、
クロスプラットフォームでiOSとAndroidのアプリを開発できます。

歴史が浅いので、Flutterの情報が上記の言語よりも少ないです。
また、Dartという非常にマニアックな言語を使用します。

Dartは、JavaScriptの改善した言語で、
さらにJavaとC#の影響を受けた言語で、文法が酷似しています。

Unityでのゲーム開発（C#）や動的なウェブデザイン(JavaScript)をしている人は、
Dartの学習コストは低いことでしょう。

let sum = 0;
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    sum += i;
  }
}
console.log("1から10までの偶数和:" + sum);

using UnityEngine;

public class EvenSum : MonoBehaviour
{
    void Start()
    {
        int sum = 0;
        for (int i = 1; i <= 10; i++)
        {
            if (i % 2 == 0)
            {
                sum += i;
            }
        }
        Debug.Log("1から10までの偶数和: " + sum);
    }
}

void main() {
  int sum = 0;
  for (int i = 1; i <= 10; i++) {
    if (i % 2 == 0) {
      sum += i;
    }
  }
  print("1から10までの偶数和: $sum");
}

公式ページの「Build apps for any screen」を参照すると、
BMWのアプリがFlutterで作成されていると紹介されています。

また、リクルートが運営する日本の宿・ホテルの予約サイト「じゃらん」も
Flutterで作成されています。

関連：「【Flutter】iOSプロジェクトへのAdd-to-appにおける3つのOptionの比較」

その他にもトヨタやGoogle系のアプリで採用されています。

VScodeでFlutterを使用する

Flutterを開発する環境は、VScodeがおすすめです。

VScodeを開いて、Ctrl + Shift +X。
あるいはサイドの拡張機能を選択してください。

検索バーに「Flutter」 と入力し、インストールします。

今は、プラグインをインストールしただけで、
Flutterのパッケージをインストールしたわけではありません。

Flutterを稼働させるために、
上部の検索バーに「>Flutter:New Project」と入力して実行すると、次のような警告文が出ます。

要するに、プログラムやAPI(アプリケーションプログラミングインタフェース)、サンプルコードなどをパッケージにしたSDK（ソフトウェア開発キット）をダウンロードするように指示されます。

Cound not find a Flutter SDK. Please downloaded, or, if already downloaded, click ‘Locate SDK’.

Visual Studio Code

したがって、Flutter SDKをダウンロードします。

Flutter SDKをインストール

警告文の青枠”Download SDK”を選択してください。（Flutter SDKインストールページ）

Windows、MacOS、Linux、ChromeOSの内、
自分が使用しているPCのOSに該当するものを選択してください。

※投稿者が使うPCのOSにより、Windowsで進行していきます。

下にスクロールを進めて、画像に示す「Get the Flutter SDK」のzipファイル「flutter_windows_3.13.7-stable.zip」をインストールしてください。

zipファイルのバージョンは変わっている場合がありますが、最新版をインストールしてください。

解凍後、ダウンロードファイルは、分かりやすいディレクトリに配置してください。
Cドライブ直下にすることで、間違いが無くなるのでおすすめです。

全角文字（ひらがな、カタカナなど）が含むフォルダー内だと、
正常にPathが認識しないことがあるので避けるべきです。

プログラミングで全角を使うと、文字化けしたりビルドエラーになることもあるので、
全て半角するようにしてください。

【Flutter】Androidアプリでのビルドエラーの対処法

AndroidエミュレータでBuild faild with an exceptionでビルドできなかった場合は、settings.jsonからパスを全角から半角に変更することで解決できます。同時にパッケージが破損することがあります。

alicia-ing.com

2025.08.11

Pathを通す

Flutterのコマンドが使える様にbinフォルダのPathを通します。

設定からシステム、パージョン情報に進んでください。
デバイスの仕様で、「システムの詳細設定」を開いてください。

システムのプロパティ内の詳細設定を選択した後、「環境変数」を選択してください。

Pathは、２つの環境変数ともにあります。
ユーザー（上部）の方の環境変数を選択し、「編集」を開いてください。

新規で、先ほど解凍したファイルのディレクトリーパスを追加してください。
例えば、Cドライブ直下にした場合は、以下のようになります。

C:\flutter\bin

OKを選択して、追加できたか確認します。

コマンドプロンプトを開いて、以下を入力してください。

flutter --version

画像のように、Flutterの詳細情報が表示されると正常にインストールできました。

開発環境を設定

インストールしたものの、アプリとして使用できることとは別の話です。

ここから、開発環境を構築していきます。

初めに、コマンドプロンプトに以下を入力してください。

flutter doctor

表示されるものは次の３つです。

画像の場合、Androidの開発が整ってなくて、
Visual Studioも不十分だということです。

Androidでエミュレートや実機でデバックしたい場合は、
Android Studioのインストールが必要です。

【Flutter】VScodeでAndroidエミュレータ起動

AndroidアプリはAndroid Studioのインストール、Amdroid SDKが必要で、Android toolchaiの認識も同時に必須です。エミュレータの違法と聞いたことがあるかもしれませんが、エミュレータ自体は合法です。

alicia-ing.com

2025.08.11

WindowsでiOS開発するには？

iOSの開発に必要なXcodeはWindowsで使えず、AppStoreに出品できないです。
要するに、WindowsでiPhoneやiPadのアプリは開発、配布・販売は不可能です。

日本はスマホはiPhone、タブレットはiPad一強なので、アプリ開発はMacが必要になります。

クリエイティブなことには、macが必要か書いています。

【Mac離れ】クリエイターや開発者はMacに満足しないのか？

クリエイターや開発者はMac離れがささやかれていますが、イラスト（クリスタ）、プログラミング、動画編集などWindows、Macユーザーは等しくいます。PCシェア率はWindowsが優勢ですが、iosアプリはmacでしか作れません。

alicia-ing.com

2025.04.09

UdemyでFlutterを学習

Udemyは、オンデマンド式の学習講座です。
趣味から実務まで使えるおすすめの講座を紹介します。

実演

Flutterの開発環境を整えたので、初めに戻ります。

VScodeで「Ctrl + Shift + P」とコマンド選択してから、
「>Flutter:New Project」と入力してください。

先ほどは警告文でしたが、テンプレートが選択できるようになっています。

アプリを作りたいので、「Application」を選択してプロジェクトを作成してください。

作成したプロジェクトの配置場所を選択した後、ファイル名を決めてください。

「main.dart」が既に構築されていて、
デバックすると冒頭のようなUIボタンで数値が加算されるようになります。

画像のインフォメンションにあるように、F5を押すとデバックができます。

Your Flutter project is ready! Press F5 to start running

Visual Studio Code

F5を押してもデバックすることができない場合は、
どの環境でデバックをするか決めていないからです。

ターミナルで「flutter run」と入力してください。

その後つなげるデバイス一覧が出てきてきます。
いずれか１つのコマンドを選択してください。

本記事では「2」を選択しています。

まとめ

スマホアプリは需要が高く、だれでも簡単に作成することができるようになりました。

アプリ開発においてiOSはSwift。
AndroidはKotlinが一般的で、案件の多さから２つの言語を学ぶべきとされています。

しかし、Flutterを使えば、iPhone向けAndroid向けの両方のOSのアプリを同時に開発できます。

さらに、FlutterはVisual Stadio Codeのプラグインがあるので、
アプリ開発をしたことがない初心者でも作成することができます。

Flutter SDKをインストール、binフォルダをpathに通して、開発環境を設定します。

chromeで動かすには、chromeのインストール。
Androidで動かすには、Android Studioのインストール。
iOSで動かすには、Xcodeのインストール。

これらが必要になります。