Flutterアプリ開発

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

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

目次

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

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

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

Flutterの特徴

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

Swift/Kotlin開発との違い

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

ReactNativeとの違い

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

Dart言語の特徴

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

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

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

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

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環境の構築手順は、以下のページで紹介しているのでこちらを参考に設定してみてください。


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

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

install plugins
flutter plugin

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

create flutter project

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

setting flutter sdk path

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

run flutter project on android

すると、AndroidのエミュレーターでFlutterアプリを起動することができます。

debuggingAndroidアプリ開発で初心者が覚えるべきデバッグ3つの手法Prev

初心者におすすめのプログラミング勉強の3ステップを紹介Nextprogramming

Related post

  1. Flutterアプリ開発

    Flutterを使ったタスク管理アプリUIの作り方を解説

    Flutterを使ったアプリ開発について勉強してきたら、それらの知識を…

  2. ウェブサイト
  3. Flutterアプリ開発

    Flutterで一覧表示の実装に使える3つの方法

    みなさんは様々なスマホアプリを日頃から触っていると思います。様々なアプ…

  4. dart

    Flutterアプリ開発

    FlutterのWebViewとはどんな機能?特徴や実装方法を一挙紹介!

    Webページを表示するモバイルアプリはよくありますよね。Flutter…

  5. Flutterアプリ開発

    Flutterで簡単なカウンターアプリを作ってみよう

    FlutterではさまざまなUIを実装するためめに、多くのパーツが用意…

  6. dart

    Flutterアプリ開発

    Dartの基本的な書き方やFlutterで活用する方法を紹介

    Flutterを使ったアプリ開発では、Dart言語というプログラミング…

PAGE TOP