Flutterのチュートリアルを実践しHello worldを出力

イントロダクション

Flutterで実際にアプリを作っていきます。練習を兼ねているので、公式サイトを参考にしながら開発していきます。

目次

環境

• PC : macbook Air (2015 early)
• OS : macOS Mojave(10.14.5)
• CPU : 1.6 GHz Intel Core i5
• メモリ : 4GB

開発環境の導入はこちらを見てください。

snova301.hatenablog.com

開発の流れ

一般的なアプリ開発と同じです。

1. 初期アプリを作成
2. コードを編集
3. アプリをエミュレータや実機で起動しデバック
4. アプリをビルド

初期アプリを作成

ターミナル

flutter create [App name]
cd [App name]

vscode

1. View → Command Palette(またはcommand + shift+ p)
2. flutterと検索→Flutter: New Projectを選択
3. プロジェクト名を付けてmain.dartが画面に出たら完了

今回のアプリ名は公式に従って、startup_namerにします。

コードを編集

アプリをcreateしたら、lib/main.dartのコードを以下のように書き換えます。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

アプリを実行

以下の作業を忘れないようにしてください。

1. open ios/Runner.xcworkspaceを実行
2. Runnerタブ → signingのteamで自分のApple IDを認証
3. Runnerタブ → Bundle Indentifierでオリジナルなものに変更(com.[my team name].testApp等)

ターミナル

flutter run

vscode

1. vscodeの右下にデバイスが接続されていることを確認
2. Debug → Start DebuggingまたはF5キーを押す

ホットリロード

ホットリロードを実験するなら、lib/main.dartを開き、'You have pushed the button this many times'の部分を書き換えて、保存またはHot Reloadをすることでホットリロードできます。

実行したら、Hello worldが出力されます。

まとめ

まずは流れを確認し、Hello worldを出力させました。 長くなったので、複数回に分けました。 次回からはより実用的なアプリを開発します。

参考サイト

• Flutter公式
• Dart公式
• Flutterで作ったアプリをiPhoneとAndroidの実機用にリリースビルドする - note
• FlutterでAndroid/iOS両対応アプリを作ってみる - 田舎からGeekを目指す