【Flutter入門】導入方法から使い方、アプリの開発手順まで徹底解説

Flutterを使ってモバイルアプリを開発するにはどうしたらいいんだろう?
何から始めればいいのかわからない…

Flutterでモバイルアプリを開発しようにも、何から始めればいいのかわからない人は多くいますよね。また、問題なく使用できるアプリが作れるのか不安な人もいるはず。

そこで、今回はFlutterの基礎知識を解説したうえで、モバイルアプリの開発手順や覚えておきたい便利機能を紹介します。加えて、Flutterの学習方法も解説しますので、ぜひ参考にしてください。

この記事の要約
  • FlutterはGoogleが開発したスマホアプリ開発用のフレームワーク
  • Flutterを利用するにはSDKのインストールが必要
  • Flutterを用いたアプリ開発はプロジェクト生成→シミュレータ起動の順で進める

なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。

受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。

\ オンラインで相談可能 /

この記事の監修者

フルスタックエンジニア

金田 茂樹


音楽大学卒業後、15年間中高一貫進学校の音楽教師として勤務。40才のときからIT、WEB系の企業に勤務。livedoor(スーパーバイザー)、楽天株式会社(ディレクター)、アスキーソリューションズ(PM)などを経験。50歳の時より、専門学校でWEB・デザイン系の学科長として勤務の傍ら、副業としてフリーランス活動を開始。 2016年、株式会社SAMURAIのインストラクターを始め、その後フリーランスコースを創設。現在までに100名以上の指導を行い、未経験から活躍できるエンジニアを輩出している。また、フリーランスのノウハウを伝えるセミナーにも多数、登壇している。

本記事の解説内容に関する補足事項

本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。

また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。

記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。

目次

【入門者向け】Flutterの基礎知識

Flutterとは?

Flutterの特徴や開発に使用する言語などを押さえておけば、スムーズにモバイルアプリの開発を進められます。そこで、まずはじめに3点のFlutterに関する基礎知識を解説します。

Flutterとは

FlutterはGoogleによって開発された、モバイルアプリを開発するためのフレームワークです。近年では「モバイルアプリケーションフレームワーク」と呼ばれることもあります。

Flutterを利用すれば「iOS」「Android」それぞれのアプリケーションを、同じ開発言語、同じ開発環境で作成可能です。それだけではなく、Windows・Mac・Linuxといった複数のプラットフォームにも対応しています。

通常モバイルアプリ開発では、iOSとAndroidで同じアプリを作る場合、それぞれにあわせたプログラミング言語や開発環境を準備しなければいけません。

iOS用に作成したコードはAndroid用には使用できず、逆も同様です。その点、Flutterを使用すれば、作成したコードをiOS用・Android用それぞれに使いまわせます。

実際には多少の改良が必要ですが、コード作成が1回で済むのは大きなメリットです。このような特徴から、FlutterはiOS・Android両方でアプリをリリースしたい場合に使用されます。

また、次の記事ではそもそもFlutterとは何なのか、その特徴を事例も交えて紹介しているので良ければ参考にしてください。

Flutterとは?始める前に押さえておきたい必須知識を解説
更新日:2024年3月18日

Flutter開発に使用されるDartとは

Dart(ダート・ダーツ)は、2011年にGoogleによって発表されたプログラミング言語です。主に、Flutterを使った開発に使用されます。

もともとDartは、JavaScriptの欠点を補う目的で開発されたプログラミング言語です。JavaScriptは拡張性やメンテナンス性があまりよくなく、大規模開発には向いていません。その弱点を補うために開発されたのがDartです。

そのため、Dartには次のような特徴があります。

  • 習得難易度が低め
  • コードの実行パフォーマンスが優れている
  • 大規模開発に向いている

DartはJavaScript同様、学習難易度が低めです。とくにJavaScriptと文法が似ているため、JavaScriptを習得している人であればDartは習得しやすいといえます。

また、Dartはコードの実行速度が早く、パフォーマンスが優れているため大規模な開発に利用できます。あわせて、開発時に実行結果をすぐ確認できる「ホットリロード機能」が搭載されているため、開発の生産性も向上します。

Dartのメリット・デメリットについては、次の記事で詳しく解説しているので、ぜひ参考にしてください。

Dartとは?メリットやデメリット、開発経緯まで丸わかり
更新日:2024年3月1日

Flutter for Webとは

Flutter for Webとは、簡単にいえばFlutterのWebアプリ開発版です。主にFlutterはモバイルアプリ開発ができるツールですが、Flutter for WebはWebアプリの開発に特化しています。

できること特徴
Flutterモバイルアプリ開発iOS・Android両方が開発できる
Flutter
or Web
Webアプリ開発Windows・Mac・LinuxなどOS問わずに開発できる

Flutter for Webは、Fulutterで開発したDartコードをブラウザ―上で動くようにすることで、Windows・Mac・LinuxなどOS問わず動かすことを可能にします。また、開発時のテストやデバッグはブラウザ上でできるため、パソコンのスペックが低くても開発できます。

高スペックパソコンが必要になると、準備コストも上がるため、コストを抑えて開発ができる点はメリットです。このように、Flutter for WebもFlutter同様に便利なツールです。

次の記事ではFlutter for Webの特徴を使うメリットや導入方法も交えて解説しているので、良ければ参考にしてください。

【Flutter for Web】メリットや導入方法をわかりやすく解説
更新日:2024年3月29日

Flutterを使ったモバイルアプリの開発手順

開発に必要なFlutterの基礎知識を押さえたところで、いよいよここからはFlutterを使ったモバイルアプリの開発手順を4つのステップで解説します。

ステップ1:Flutterをダウンロード&インストール

まずはじめに、モバイルアプリの開発に必要なFlutter SDK(ソフトウェア開発キット)をダウンロードしてインストールしましょう。

WindowsとMacで少しインストールの手順が異なりますが、基本的な流れは同じです。大まかなインストール手順は次のとおりです。

  • ステップ1:Flutter SDKをダウンロードする
  • ステップ2:ダウンロードファイルを解凍する
  • ステップ3:所定のディレクトリに配置する
  • ステップ4:pathを通す(Macのみ)

Flutterで開発を行うには、Flutterの公式サイトからSDKをダウンロードし、PC内に配置する必要があります。

ダウンロードファイルの解凍は、表示される指示に従いながら進めれば難しくありません。ディレクトリの配置は「C:\src\flutter」のように任意のディレクトリを設定してください。

ただし、あまり深い階層へディレクトリを置いてしてしまうと、あとでどこに設定したかがわかりにくくなります。「C:\src\flutter\〇〇〇\〇〇」のように階層を深くするのではなく、できるだけ浅めに設定しておくことをおすすめします。

また、Macでの開発のみ、ディレクトリ配置後にpathを通す作業が必要になります。

次の記事ではMacとWindowsのそれぞれについてFlutterのインストール方法を詳しく解説しているので、あわせて参考にしてください。

Flutterのインストール方法をわかりやすく解説【Mac&Windows】
更新日:2024年3月29日

ステップ2:Flutterの開発環境を構築する

Flutter SDKを準備できたら、次は開発環境を構築します。「SDKがあれば、モバイルアプリ開発はできるのでは?」と感じている人もいるかもしれません。しかし、次のツールを使えば、よりスムーズに開発を進められます。

具体的には次のツールを使用します。

特徴
Android Studio・アプリのテストが簡単
・コード作成支援機能がある
・アプリ作成が楽にできる機能が豊富
Visual Studio Code・セットアップが簡単
・動作が軽い
・拡張機能が豊富
Xcode・直感的に開発できる
・ソース管理がしやすい
・アプリのテストが簡単

上記のツールのなかで特に便利なのが、XcodeのシミュレータとAndroid Studioのエミュレータ機能です。この機能を使用すれば、作成したコードの実行結果をパソコン内で確認できます。わざわざ実行環境を準備する必要がないため、開発の手間を削減できるのです。

なお、それぞれのツールはインストールした後、初期設定を行う必要があります。設定する方法は、各公式サイトからご確認ください。

ステップ3:Flutterを使ってアプリを開発する

Flutterの開発環境が準備できたら、いよいよアプリ開発を行います。アプリ開発をスタートするときは、次の手順で開発準備をしてください。

  • ステップ1:Flutter内でプロジェクトを生成
  • ステップ2:コマンドラインでアプリ起動
  • ステップ3:シミュレーターを起動する
  • ステップ4:開発スタート

まずは、Flutter内でプロジェクトを生成します。プロジェクトは「flutter create プロジェクト名(アプリ名)」で作成してください。プロジェクトを作成することで、アプリのコーディングなどを行えるようになります。

プロジェクトを立ち上げたら、次はアプリ・シミュレータを起動して、コードの実行を確認できる準備をしてください。

ここまで準備できれば、後はアプリ開発を行うだけです。自分が開発したいアプリにあわせてDartでコーディングしていきます。

また、次の記事ではFlutterを使ったiOSアプリの開発手順を注意点も交えて解説しているので、良ければ参考にしてください。

FlutterでiOSを開発するには?手順をわかりやすく解説
更新日:2024年3月29日

ステップ4:Flutterで開発したアプリをリリースする

アプリが開発できたら、iOS・Androidそれぞれでアプリをリリースしましょう。

Flutterで開発したアプリを公開するためには、申請が必要です。iOS向けアプリの場合、Appleデベロッパープログラムに登録しなければいけません。公開に必要な情報(アプリケーションのタイトルや説明文・スクリーンショットなど)を用意し、Appleへ申請をしましょう。

Android向けアプリケーションの場合は、Google Playに申請をする必要があります。どちらも審査があるため、公開までに時間がかかる場合もあるようです。公開予定日がある場合、審査が難航することも予想し、早めに開発を完了する必要があります。

入門者が覚えておきたいFlutterの主な機能

Flutterには、モバイルアプリ開発を助ける便利な機能が数多くあります。そこで、ここからは入門者が覚えておきたいFlutterの便利機能を紹介します。

  • ウィジェット
  • パッケージ
  • ホットリロード

ウィジェット

ウィジェットは、スマホの画面に表示されるボタンやテキストなどのパーツのことです。

テキストであれば、Text Widget、ナビゲーションバーであれば、Appbar Widgetなどがあります。それぞれウィジェット単位で文字の内容や大きさ、色などを指定・管理します。

Flutterのウィジェットにはたくさんの種類があり、Webアプリのボタン・アラート機能・アイコンデザインなど、よく使う機能が使用可能です。

具体的には次のようなウィジェットが用意されています。

ウィジェット名内容
Iconマテリアルデザインのアイコン
Image画像を表示するウィジェット
Check boxユーザーが対象を選択しチェックできる

引用:Flutter公式サイト

ウィジェットを使えば、難しいコーディングをしなくても直感的にデザイン・機能を実装できます。Flutterを使うなら、覚えておきたい機能です。

パッケージ

Flutterで開発を行う場合、パッケージを使いこなせると便利です。

パッケージとは、アプリ開発に便利な機能をまとめたものです。パッケージを読み込むことで、自分で一からプログラミングをせずとも、すでに用意されている機能を使って効率的に開発を進められます

また、Flutterでは、Dartのパッケージと、iOSやAndroidのネイティブプラットフォーム固有機能を利用するためのプラグインパッケージを利用できます。それぞれのパッケージを組み合わせることで、実現したい機能を素早くプログラミングすることが可能です。

これは、Flutterで使用できるパッケージの具体例です。

具体例パッケージの種類機能
flutter
launcher
icons
Dartパッケージアプリアイコンを設定できる
intlDartパッケージ数字や日付をフォーマットできる
in_app
review
Flutteパッケージアプリ内でレビューできる
search
page
Flutterパッケージ検索画面を作成できる
syncfusion
flutter
charts
Flutterパッケージさまざまなグラフを作成できる

モバイルアプリに搭載される機能のなかには、パッケージを使っているものもたくさんあります。開発を効率化するためにも、パッケージについて学んでおくとよいでしょう。

ホットリロード

Flutterを使う場合、ホットリロードは頭に入れておきたい機能です。

ホットリロードとは、記載したコードがリアルタイムで作成中のアプリに反映される仕組みです。ホットリロード機能があれば、すぐに記述したコードの確認ができます。

Flutterのホットリロード機能は常時使用可能なため、利用者は特に設定は必要ありません。ただ、ホットリロード機能があることを頭に入れておくと、開発時に活用しやすいはずです。

Flutterの学習方法

Flutterでモバイルアプリ開発を行うには、Flutterの使い方はもちろんDartといったプログラミング言語を扱うスキルを習得しなければいけません。ここでは、Flutterの学習方法を3つ解説します。

  • 学習サイトで学ぶ
  • 本で学ぶ
  • プログラミングスクールで学ぶ

学習サイトで学ぶ

Flutter入門者におすすめの学習サイトは、この5つです。

学習サイト名特徴費用
Flutter
公式サイト
・Flutterのチュートリアルや基本的な開発機能などが学べる無料
Dart
Pad
・ブラウザ上でDartを実行できる無料
みんなの
プログラミング
・「Flutter(iOS・Androidスマホアプリ開発)」を受講すれば動画形式でアプリ開発が学べるみんプロ式・FlutterでiOS・Androidアプリを”いっぺんに”開発入門(初級編)〜ゼロからのFlutter〜
質問対応あり:30,000円
質問対応なし:22,400円
Udemy・講座数が豊富
・現役エンジニアの講座も受講できる
【Flutter+Firebase+MLKit】人工知能(AI)を搭載したiOS、Androidアプリを作ろう:10,000円
ストアカ・オンラインと通学を選択できる
・講師のレクチャーを受けながら学習できる
【初心者歓迎】Flutterで作る!iOS・Androidアプリ:4,000円

無料で学べるサイトのなかでは、Flutterの公式サイトをおすすめします。Flutterの公式サイトには、学習を始めるためのサポートページが用意されています。英語ではありますが、コマンドや画面のキャプチャーを用いて丁寧に解説されています。

例えば、先ほど紹介したウィジェットやパッケージなど、開発で使用するツールの導入方法なども解説されています。自分で学習していて分からないときなど、参考にしながら学ぶのもよいでしょう。

一方、有料学習サイトのなかでは、Udemyがおすすめです。Udemyには、たくさんの講座が開講されています。現役エンジニアや分野の専門家が開講している講座も多く、教材の質も高いです。

有料であるためコストはかかりますが、効率的に学習するならおすすめのサイトといえます。ちなみに、Flutterが学べるおすすめ有料サイトは次の記事で解説しているので、ぜひ参考にしてください。

Flutterが学べる講座&研修会社おすすめ6選【無料から有料まで】
更新日:2024年3月1日

本で学ぶ

Flutter入門者向けのおすすめ学習サイトは、次の3冊です。

書籍タイトル対象者
基礎から学ぶFlutter初心者向け
Flutter×Firebaseで始めるモバイルアプリ開発初心者向け
Flutterモバイルアプリ開発バイブル初心者~中級者向け

「基礎から学ぶ Flutter」は、次のようなFlutter全般の基礎知識がまとめられています。

  • Flutterの歴史からインストール方法
  • Dartの基本的な文法解説
  • Flutterのアーキテクチャー・ライブラリの使い方

この本には、初級者から実務レベルのFlutterエンジニアになるための知識が網羅的に解説されています。

「Flutter×Firebaseで始めるモバイルアプリ開発」は、AndoroidとiOSで動作するモバイルアプリ開発について書かれた入門書です。

AndroidとiOS上で動作する「貸し借りをメモするアプリ」の開発をとおして、実践的な学習ができます。

「Flutter モバイルアプリ開発バイブル」は、豊富なサンプルが魅力です。Flutter開発の始め方や、ライブラリの活用法、テストの仕方など実務レベルで有益な知識を解説している書籍です。

Flutterの基礎から開発後の運用までを解説しているため、開発の一連の流れを学べます。

今回紹介した本を含め、Flutter入門者におすすめの本を次の記事で解説しているので、ぜひ参考にしてください。

Flutterを学ぶおすすめ入門書籍4選!本を選ぶポイントも解説
更新日:2024年3月29日

プログラミングスクールで学ぶ

挫折なくFlutterを活用したモバイルアプリ開発を学ぶなら、プログラミングスクールがおすすめです。

そもそも、モバイルアプリの開発に限らず、プログラミング学習の途中で挫折する独学者は多くいます。事実、弊社の調査では

  • 不明点を聞ける環境になかった
  • エラーが解決できなかった
  • モチベーションが続かなかった

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

87.5%の人がプログラミング学習時に挫折を経験
不明点やエラーが解決できずプログラミングを挫折した人が多数

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

また、こうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では

  • 確実にスキルを身につけられると思ったから
  • 独学では不安がある
  • 効率よく学べそう

などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。

61%の人がプログラミングの勉強を始めるならスクールが良いと回答
確実にスキルを身につけられそうという理由でプログラミングスクールを選ぶ人が多い

調査概要:プログラミングに興味がある方の意識調査
調査期間:2021/11/19~2021/12/3
対象者:プログラミング学習を検討している10代~50代の男女100名
調査媒体:クラウドワークス
掲載元:PR TIMES

加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。

上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。

いざ独学でFlutterを活用したモバイルアプリ開発を学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「モバイルアプリの開発って思っていたよりも難しいんだな…」とスキルの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、転職や副業などの目的を実現できるほどの実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER(侍エンジニア)」です。

300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
previous arrow
next arrow
料金月分割4.098円~
実績・累計指導実績4万5,000名以上
・受講生の学習完了率98%
・受講生の転職成功率99%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、モバイルアプリの開発スキルを習得するのは非常に難易度が高いといえます。

しかし、侍エンジニアでは

  • 現役エンジニア講師によるマンツーマンレッスン
  • 現役エンジニアに質問できるオンラインでのQ&Aサービス
  • 不安や悩み・勉強の進み具合を相談できる学習コーチ

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもFlutterを活用したモバイルアプリの開発に必要なスキルだけを効率的に習得可能です。

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なぜ侍エンジニアが挫折せずFlutterを活用したモバイルアプリの開発スキルを習得できるのか気になる人はぜひ公式サイトをご覧ください。

公式サイトで詳細を見る

まとめ

今回は、Flutter入門者向けに、Flutterの特徴や開発手順などを解説しました。

Flutterは、iOS・Androidの両方でモバイルアプリを開発できるツールです。Flutterはウィジェットやパッケージなど、便利機能も充実しているため、習得すれば活用の場はたくさんあります。

Flutterで使用するDartの難易度は低めであるため、プログラミング未経験者が学習するにもおすすめです。モバイルアプリ開発に興味がある人は、ぜひスキル習得にチャレンジしてみてください。

この記事を書いた人

【プロフィール】
新卒でプログラマーとして勤務し、実務経験を積んだ後、現在はフリーランスWebライターとして活動中。主に、企業のオウンドメディアやブログ記事の執筆を担当。IT・プログラミング関連の執筆が得意。2020年から侍エンジニアブログの記事制作を務めており、文章の読みやすさや納得感を意識しながら執筆しています。
【専門分野】
IT/プログラミング
【SNS】
X(旧:Twitter)

目次