Flutterの概要をまとめました。
Contents
Flutter（フラッター）とは
FlutterはGoogleが提供しているアプリ開発のフレームワークです。
Flutter とは
Flutter は、Google によって開発およびサポートされているオープンソースフレームワークです。フロントエンドとフルスタックのデベロッパーは、Flutter を使用して、単一のコードベースで複数のプラットフォーム用にアプリケーションのユーザーインターフェイス (UI) を構築します。2018 年にリリースされたとき、Flutter は主にモバイルアプリの開発をサポートしていました。現在では、Flutter は、iOS、Android、ウェブ、Windows、MacOS、Linux の 6 つのプラットフォームでのアプリケーション開発をサポートしています。
https://aws.amazon.com/jp/what-is/flutter
Flutterを使用するメリット
FlutterはiOS、Androidどちらのアプリに対しても使用することができます。iOS、Android以外でも対応しています。
開発ターゲットを選ぶ
Flutter はマルチプラットフォームのツールキットです。アプリは、次のオペレーティング システムのいずれでも実行できます。iOS
Android
Windows
macOS
Linux
ウェブ
https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#1
Flutterでアプリを開発する方法
以下のGoogle公式ドキュメントを参考に、Flutterでアプリを開発していきます。
https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja
このサイトでは以下の内容を学習することができます。
Flutterでアプリを開発する流れ
まずは使っているパソコンに以下3点をインストールします。
- Visual Studio Code
- Flutter SDK
- Visual Studio Code と Flutter プラグイン
Visual Studio Codeのインストール
Microsoftが開発しているテキストエディタ、Visual Studio Codeをインストールすることでプログラミングによってアプリを開発しやすくします。
以下のGoogleのガイドでもVisual Studio Codeについて説明されています。
https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja
Flutter SDKのインストール
Flutter SDKについて以下のように案内されています。
https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#1
以下のFlutterの開発サイトからFlutter SDKをインストールできます。
上記リンクにアクセスしたら、左上の「Set Up Flutter」をクリックします。
以下のページに遷移するので、インストールするOSを選択してクリックします。
https://docs.flutter.dev/get-started/install
今回は試しにAndroid向けのアプリをWindowsのパソコンで開発してみる前提で、Windowsをまずはクリックしてみます。
すると以下のページまで飛びました。
https://docs.flutter.dev/get-started/install/windows
Androidのアプリを開発してみたいので、Androidをクリックします。以下のリンクまでページが遷移しました。
https://docs.flutter.dev/get-started/install/windows/mobile
案内に従ってセットアップしていきます。
まずはVisual Studio Codeを起動する
Visual Studio Codeを起動します。
Flutterの拡張機能をVisual Studio Codeにインストール
以下の拡張機能をVisual Studio Codeにインストールします。
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
Ctrl＋Shift＋Pを同時にクリックしてFlutterと入力します。
Flluter: New Projectをクリックします。
右下に以下のウィンドウが表示されます。Download SDKをクリックします。
Gitがインストールされていないとインストールが進まなさそうなので、zipファイルでFlutter SDKをインストールします。
Flutter SDKのインストールと環境変数の登録
以下のページへアクセスして青いボタンをクリックしてzipファイルをダウンロードします。
https://docs.flutter.dev/install/manual
zipファイルを解凍します。
以下の記事を参考にしたところ、C直下に配置していたので、C直下に解凍したフォルダを配置します。
https://zenn.dev/heyhey1028/books/flutter-basics/viewer/getting_started_windows
再度以下のウィンドウが表示されるので、Locate SDKをクリックします。
C配下に置いた、Flutter SDKのフォルダを選択して設定します。
以下のメッセージが表示されました。
Flutterのコマンドを実行できるように環境変数にFlutter SDKのbin（バイナリフォルダ）を登録しておきます。まずはWindowsの下のバーで「env」と入力します。
以下のシステム環境変数の編集をクリックします。
環境変数（N）…をクリックします。
Pathをクリックして編集をクリックします。
ここに新たにFlutter SDKのbinフォルダを登録しておきます。
OKをクリックしてウィンドウを閉じていきます。
Flutterでプロジェクトを作成する
FlutterはDartという言語を使用する
Flutterでの開発言語はDartになります。
Flutter が使用するプログラミング言語
Flutter は、同じく Google が開発したオープンソースのプログラミング言語 Dart を使用しています。Dart は UI の構築に最適化されており、Dart の強みの多くは Flutter で使用されています。例えば、Flutter で使用される Dart の機能の 1 つは、sound null safety です。Dart の sound null safety により、null エラーと呼ばれる一般的なバグの検出が容易になります。この機能により、デベロッパーはコードのメンテナンスに費やす時間が短縮され、アプリケーションの構築により多くの時間を費やすことができます。
https://aws.amazon.com/jp/what-is/flutter
Dart Padの使用
