FlutterでiOSを開発するには?手順をわかりやすく解説


FlutterでiOSアプリの開発をするにはどうすれば良いの?
 
FlutterでiOSアプリの開発をする際の注意点はあるの?

Flutterはスマホアプリ開発において、iOSとAndroidアプリケーションの両方を一つの言語で開発できますが、iOSとAndroidそれぞれで固有の開発手順や注意点は存在します。

本記事では、iOSの開発にFlutterを利用する場合について解説を進めていきます。

これからFlutterでiOSアプリを作ろうと考えている方はぜひ参考にして下さい。

FlutterでiOSを開発するには

事前準備その1 基本はMac

プログラミングをするためのPCについて、iOSの開発をする場合はMacを選択しましょう。Flutterの公式サイトにも「Windowsで開発する場合はiOSアプリの開発をすることはできません。」と一文が添えられている通り、Windows PCでは基本iOSの開発は行えませんので、Mac一択となります。

事前準備その2 Xcode

こちらもFlutterの為というよりはiOSアプリ向けに必要になるツールとしてXcodeが必要になります。

Xcodeとは、Apple社が開発しているiOS開発用のツールであり、AppStoreからインストールします。

Xcode

詳細なインストール方法については以下の記事を参考にして下さい。

【入門者必見】Xcode導入から便利機能まで徹底解説
更新日 : 2020年8月18日

XcodeはFlutterでプログラミングしたものを実際に配布する際に利用します。また、プログラミングの途中の動作確認もXcodeで用意されている機能で確認することが可能です。

機能が豊富で、画面構成が少々複雑なので、初学者にとっては最初戸惑う可能性もあります。ただし、Flutter開発の際に必要な操作自体の種類はそこまで多くないので、開発をしていく中でツールの使い方に慣れることができるでしょう。

事前準備その3 VS Codeなどのコードエディタツール

Flutterを開発するにあたって、よく使われるコードエディタツールは、

  • Android Studio
  • VSCod

です。

Android Studioは以下の公式ページよりダウンロードします。

Android Studio(https://developer.android.com/studio?hl=ja

Android Studio

また、VSCodeも以下の公式ページよりダウンロードすることができます。

VSCode(https://azure.microsoft.com/ja-jp/products/visual-studio-code/
VSCode

FlutterはGoogle社によって開発されているフレームワークですので、Googleが提供しているAndroid Studio とFlutter開発の相性はよく、Flutterの公式セットアップ手順の中でも本ツールのインストールをチェックする項目が存在します。

また、同様にVSCodeもFlutterの開発を手助けするツールが充実しています。Flutter iOSの開発をする場合は、上記の二つのコードエディタツールをインストールし、Android向けアプリの動作確認などにAndroid Studioを使い、普段のプログラミングは画面構成が比較的分かりやすいVSCodeを使うなどが著者としてはオススメです。

補足としまして、Xcodeもコードエディタツールとなりますが、こちらはiOSのネイティブ言語であるSwift向けのエディタツールとなります。

FlutterでiOSを開発する手順

具体的にiOS開発を進める手順を大きく分けると以下の通りです。

  • Flutterのインストール
  • iOS開発向けのセットアップ
  • シミュレータで動作確認

詳細な手順については以下の記事にまとまっていますので参考にしていただき、本記事では各手順の概要を解説します。

Flutterのインストールを分かりやすく解説 | Mac & Windows
更新日 : 2020年9月3日

Flutterをインストール

FlutterはMac、Windowsそれぞれの環境用にインストール可能ですが、今回iOSの開発に焦点をあてる場合は、お手元のPC環境はMacになるかと思いますので、Mac用のインストールを参考にします。

iOS開発向けのセットアップ

インストールが終わると、次にiOS向けのセットアップを行います。

Flutterではセットアップ用のコマンドが用意されており、とてもシンプルにiOS開発の準備を進めることができます。

シミュレータで動作確認

XcodeにはiOSアプリの動きを自身のPC上で確認する為の機能があり、シミュレータと呼ばれています。シュミレータではiPhoneのバージョンごとにデバイスを選択できたり、ipadなどサイズの異なるデバイスで動作確認なども行うことができます。

FlutterでiOSを開発するときの注意点

iOSアプリ開発で純粋なネイティブ言語であるSwiftを使って開発をしたことがある方は、FlutterでiOSアプリを開発する際に、気をつけるべき点として、画面の見た目などを構成するビューの作り方が大きく異なることを学ぶ必要があります。

Swiftにてプログラミングを行う場合、ボタンなどの見た目の実装はXcodeにてストーリーボードと呼ばれる機能を使って視覚的に組み立てていくことができます。

ストーリーボード

ですが、Flutterではコード上で、Widget(ウィジェット)と呼ばれる機能を使い、ページのレイアウトなどをソースコード上で実現しています。

以下のコードはFlutter 公式から引用しました、Text Widget やButton(文中ではFlatButton) Widgetの実装例となります。

 Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(50.0),
      child: Column(
        children: [
          Text(
            "$_count",
            style: TextStyle(
              color:Colors.blueAccent,
              fontSize: 30.0,
              fontWeight: FontWeight.w500
            ),
          ),
          FlatButton(
            onPressed: _handlePressed,
            color: Colors.blue,
            child: Text(
              '更新',
              style: TextStyle(
                color:Colors.white,
                fontSize: 20.0
              ),
            ),
          )
        ],
      )
    );
  }

上記の様なWidgetには多くの種類があり、その他にもレイアウトを構成する用の Layout Widgeなどがあります。

まとめ

いかがでしたでしょうか?iOSアプリをFlutterで開発する為に必要な事前準備、開発の進め方、そして、ネイティブ言語SwiftでiOSを開発することとの主な違いである画面の構成の仕方についての注意点を解説しました。

iOS開発だけではなく、Androidアプリも同時にFlutter一つで開発できるのが最大の魅力の一つです、ぜひあなたも本記事を参考にFlutterによるプログラミングを楽しんでください。

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

真仲

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー