初めてでも開発できるFlutter入門

Home
Flutterアプリ開発
初めてでも開発できるFlutter入門

2021.01.8

初めてでも開発できるFlutter入門

FlutterでAndroidやiPhoneアプリを作りたいけれど、どういうものなの？どうやって作ったら良いの？と疑問に思っているのではないでしょうか。今回は、Flutterはどういうものでどうやってアプリを作っていくのか解説していきます。

Flutterはアプリのハイブリット開発ツール
1. Flutterの特徴
2. Swift/Kotlin開発との違い
3. ReactNativeとの違い
4. Dart言語の特徴
Flutterでアプリを作る環境を構築しよう
1. flutterをダウンロードする
2. -/developmentで展開する
3. pathを通し、動作確認する
iOS/Androidの開発環境を構築する
1. Xcodeをインストールする
2. Android StudioとSDKをインストールする
Flutterプロジェクトを作って動かしてみる
1. flutterプロジェクトを作る
2. Android エミュレーターで起動する

Flutterはアプリのハイブリット開発ツール

FlutterはAndroidとiOSの両方のアプリを作ることができる、Google社製のハイブリット型の開発ツールです。Google社が開発しているDartという言語で開発することができ、KotlinやSwiftのネイティブ開発言語を知らなくてもアプリを作ることができます。

Flutterの特徴

デフォルトでマテリアルデザインが適用
開発しながらUIを確認できるホットリロード
ネイティブ用のコードにコンパイルされるため処理が速い
予め様々なWidgetが用意されているためUI開発がしやすい

Swift/Kotlin開発との違い

異なるプラットフォームを同一言語で開発できるため学習コストや開発コストが下がる
宣言的UIを採用しているため状態管理がしやすい
SwiftUIも宣言型UIと言われている

ReactNativeとの違い

ReactNativeはネイティブコードではなく、JavaScriptで実行される
コンパイルしてネイティブコードに変換されるため処理が速い
AndroidのMaterial DesignやiOSのCupertino Designがサポートされている
ReactNativeは審査を通さずにアプリのアップデートが可能

Dart言語の特徴

DartVM上で動作する
BLoCというアーキテクチャに基づいてUIとビジネスロジックを分けている
Platform/UI/GPU/IOタスクランナーの４つでスレッドを管理している

Flutterでアプリを作る環境を構築しよう

Flutterの開発環境を準備する方法は、Zipファイルをダウンロードしてきてローカルでセットアップをする方法、Gitを使ってFlutterのプロジェクトをダウンロードしてセットアップする方法の２つあります。

それぞれの方法を紹介するので、自分にあった方法を選んでセットアップしましょう。

1. zipファイルをダウンロードする

Flutterの公式ページから、開発に使う自身の環境を選ぶとダウンロードページへ遷移することができます。

ダウンロードページにいくと、FlutterのSDKをダウンロードするボタンが表示されているのでクリックしてzipファイルをダウンロードしましょう。

ダウンロードが終わったらターミナルを開いて、ダウンロードしたzipファイルを開発ディレクトリに移動して展開しましょう。

flutter_macos_1.22.5-stable.zipというファイルをDownlodsディレクトリにダウンロードした場合は、以下のようになります。

$ mkdir ~/development
$ mv ~/Downlods/flutter_macos_1.22.5-stable.zip~/development
$ cd ~/development
$ unzip flutter_macos_1.22.5-stable.zip -d flutter

2. Gitを使ってダウンロードする

Gitを使ってセットアップする場合は、以下のようになります。

$ mkdir ~/development
$ cd ~/development
$ git clone https://github.com/flutter/flutter.git -b stable

Flutterの動作を確認する

Flutterのダウンロードが終わったら、動作を確認しましょう。ダウンロードしたFlutterを動作させるには、パスを通してあげる必要があります。必要に応じて.bashrcファイルなどに追加してあげましょう。

$ export PATH="$PATH:~/development/flutter/bin"

パスを通すとflutterコマンドが使えるようになります。以下のコマンドで動作を確認してみましょう。問題なく動作すればflutterのインストールは終了です。

$ flutter doctor

iOS/Androidの開発環境を構築する

iOSとAndroid環境の構築手順は、以下のページで紹介しているのでこちらを参考に設定してみてください。

2020.11.23

初心者向けにiOSアプリ開発からリリースまでの手順を丁寧に解説！

iPhoneやiPadのアプリ作ってリリースをしてみたいけれど、実際に何をしたらアプリ開発ができるのか分からないから教えて欲しい今回は、初心者向けにアプリ開発からリリースするまでの手順を一通り紹介していきます。...

2020.07.11

Androidアプリの開発の手順や必要な知識を詳しく解説！

Androidアプリ開発を始めたいけれど、どういった知識や準備が必要なのかわからないという人は多いと思います。アプリ開発するための知識がなくて、なかなかチャレンジできていない人や詰まってしまったりした人も多くいます。今回は、そういった方向けにAndroidアプ...

Flutterプロジェクトを作って動かしてみる

各プラットフォームの環境が設定できたら早速Flutterのプロジェクトを作成してみます。FlutterのプロジェクトはAndroid Studioを使って作ります。Android Studioを開いて[Configure] > [Plugins]からFlutterとDartのPluginを追加してAndroid Stuidioを再起動しましょう。

すると Create New Flutter Project という項目が追加されています。このボタンを押すことで、Flutterプロジェクトを作成することができます。

プロジェクト作成ボタンを押すと、Flutterプロジェクトの初期設定画面が表示されてSDKのパスを要求されるので、最初にダウンロードしたFluterパッケージのディレクトリを指定しましょう。

入力が終わったら[Next] > [Finish]と進みましょう。すると、プロジェクトが作成され開発用の画面が表示されます。ここまで来たら、Flutterアプリをビルドして動かしてみましょう。先ほどのAndroidのセットアップでエミュレーターをインストールしたと思うので、Androidエミュレータを指定してビルドしてみましょう。