Flutterを使ってiPhone/Androidアプリを試してみました。
SDKのインストール
まずは下サイトを参考にSDKをダウンロードします。
ダウンロードしたら適当な場所に配置してパスを通します。
パスを通したら下コマンドで問題ないかチェックします。
flutter doctor
今回は下のような結果になりました。
2つエラーが出ていたので書かれている指示に従って対応します。
対応したら下のように全て緑になりました。
Flutterアプリ作成
アプリの作成は下コマンドです。
flutter create my_app
コマンドを実行すると下のような構成でプロジェクトが作られます。
iPhoneシミュレータで動かしたいので下コマンドでシミュレータを起動します。
open -a Simulator
プロジェクトのフォルダに移動して下コマンドを打つことでflutterの実行ができます。
flutter run
これで下のようにシミュレータ上でアプリが起動しました。
次はAndroidでのアプリ立ち上げも検証します。
まずはAndroid Studioを開いてエミュレータを実行します。
その状態でflutter runコマンドを打つと下のようにデバイス選択画面になるのでAndroidエミュレータを選びます。
少し待つと下のようにアプリが起動しました。
Flutterアプリの編集
次はアプリの編集も少しやってみたいと思います。
今回はAndroid Studioを使って編集します。
Android Studio以外にもVSCodeなどいくつか対応しているIDEがあるようです。
まずはAndroid Studioの最初の画面のPluginsの画面に移動します。
下の方にFlutterのプラグインがあるのでインストールして再起動します。
次はAndroid Studioで先程作ったFlutterプロジェクトを開きます。
開くと下のようなプロジェクト構成になっているのが分かります。
Android Studio画面の右上からシミュレータなどを選んで実行する事が可能です。
最後にこのアプリのナビゲーションバーのタイトルを変更してみます。
main.dartを開きMyAppクラスのMyHomePageを作っている箇所のタイトルを変更します。
class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'MyApp'), ); } }
変更すると下のようにタイトルが更新されました。