Flutter入門

libe-irevo@master 2024年1月14日

Flutterとは

『Flutter』とは、Googleが開発した、モバイルアプリケーションのSDKです。
SDKとはsoftware development kitの略であり、あるシステムで使えるソフトウェアを作るために必要なサンプルプログラムや技術文書がまとめられたもののことです。

Flutterのメリット

１）Flutterでは、１つのコードでAndroidとiOSのどちらでもアプリを作成できる。

２）Dart 言語はJavaScript同様、学習難易度が低めです。とくにJavaScriptと文法が似ているため、JavaScriptを習得している人であればDartは習得しやすいといえます。また、Dartはコードの実行速度が早く、パフォーマンスが優れているため大規模な開発に利用できます。あわせて、開発時に実行結果をすぐ確認できる「ホットリロード機能」が搭載されているため、開発の生産性も向上します。

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

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

３）Flutterでは『ホットリロード』が採用され、プログラム内容を修正すると、すぐに画面へ反映されます。コンパイルする手間がかからず開発しやすい仕様となっています。

Flutterのデメリット

１）オープンソースライブラリが、まだまだ少ない。　

　　※リリースされて、まだ新しいので、ウィジットなどのライブラリが多くない（毎月増えている）

２）日本語で書かれた資料が少ない（2025年1月の段階）

Flutterの開発手順

ステップ1：Flutterをダウンロード＆インストール
ステップ2：Flutterの開発環境を構築する
ステップ3：Flutterを使ってアプリを開発する
ステップ4：Flutterで開発したアプリをリリースする

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

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

ステップ１：Flutterをダウンロード＆インストール、の大まかな手順は次のとおりです。

手順1：Flutter SDKをダウンロードする
手順2：ダウンロードファイルを解凍する
手順3：所定のディレクトリに配置する

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

公式サイトにてFlutter SDK安定版を入手

下記公式サイトにてFlutter SDK安定版の最新バージョンを入手できます。「
Flutter_windows_v(バージョン番号)-stable.zip」と記載されているボタンをクリックします。

https://flutter.dev/docs/get-started/install/windows

zipファイルを解凍し、任意のフォルダに配置します。今回は、C:\srcを新たに作成し、その配下に回答したflutterフォルダを配置しました。

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

ステップ２：Flutterの開発環境を構築する

Flutter SDKを準備できたら、次は開発環境を構築します。

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

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

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

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

ステップ３：Flutterを使ってアプリを開発する

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

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

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

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

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

ステップ４：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パッケージ	アプリアイコンを設定できる
intl	Dartパッケージ	数字や日付をフォーマットできる
in_app review	Flutteパッケージ	アプリ内でレビューできる
search page	Flutterパッケージ	検索画面を作成できる
syncfusion flutter charts	Flutterパッケージ	さまざまなグラフを作成できる