snovaのブログ

プログラミングとか、日常のこととか、アウトプットしたほうがよいと聞いたので

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



【スポンサーリンク】



イントロダクション

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

目次

環境

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

www.snova301.work

開発の流れ

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

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

初期アプリを作成

ターミナル

flutter create [App name]
cd [App name]

vscode

  1. ViewCommand 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タブ → signingteamで自分のApple IDを認証
  3. Runnerタブ → Bundle Indentifierでオリジナルなものに変更(com.[my team name].testApp等)

ターミナル

flutter run

vscode

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

ホットリロード

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

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

まとめ

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

参考サイト