しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

FlutterでHello World

Flutterを使ってiPhone/Androidアプリを試してみました。

SDKのインストール

まずは下サイトを参考にSDKをダウンロードします。
ダウンロードしたら適当な場所に配置してパスを通します。

docs.flutter.dev

パスを通したら下コマンドで問題ないかチェックします。

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'),
    );
  }
}

変更すると下のようにタイトルが更新されました。