【Flutter】新規プロジェクトの作成方法

※本記事で使用している環境

<パソコン>
機種:MacBook Air(13inch)
OS:macOS Sonoma(ver.14.5)
チップ:Apple M3
シェル:zsh

<ソフトウェア>
・Flutter(ver.3.22.3)
・Xcode(ver.15.4)
・CocoaPods(ver.1.15.2)
・Android Studio(ver.2024.1)
・Visual Studio Code(ver.1.92.0)

これまで、環境構築を行い、 Dart の基本文法を学んできました。

ここから、実際にコードを書いてアプリ開発を行なっていきます。

Flutter における新規プロジェクトの作成方法について解説します。

記事を執筆するにあたって、以下の書籍を参考にしました。

おすすめ書籍

目次

新しいプロジェクトを作成する手順

STEP
Visual Studio Code を起動する
説明画像1
STEP
コマンドパレットを開き、「Flutter: New Project」と入力
説明画像2
STEP
「Application」をクリック
説明画像3
STEP
プロジェクトを格納する親フォルダを選択
説明画像4

1: 保存先のフォルダを選択

2: Select a folder to create the project in をクリック

今回僕は、shima というホームフォルダを選びました。

STEP
プロジェクト名を入力
説明画像5

今回は、デフォルトで入力されていた「flutter_application_1」をそのまま使います。

STEP
main.dart ファイルをクリック
説明画像6
STEP
ファイルを書き換えていく

全てのコードを削除し、以下のコードに書き換えてみましょう。

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        "Hello,world!",
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}
説明画像7

iOS シミュレーターで実行してみる

書き換えたプログラムを実行していきます。

STEP
ターミナル を起動
説明画像8
STEP
iOS シミュレーターを開く
open -a Simulator

とターミナルに入力します。

説明画像9
STEP
シミュレーターが起動した画面
説明画像10

赤枠で囲まれた部分に、立ち上げた iOSシミュレーターが表示されているか確認しましょう。

表示されていない場合は、赤枠で囲った部分をクリックして、該当のシミュレーターを選択します。

STEP
プログラムを実行する
説明画像11

1: アクティビティバーの 実行とデバッグ をクリックします。

2: 実行とデバッグ をクリックします。

STEP
シミュレーターの画面が変わる
説明画像12

このようにして、main.dartのファイルにプログラムを書いていきます。


これにて、Flutter で新規プロジェクトの作成・実行方法の解説は終わります。

次は、StatelessWidget についての解説を行います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

shimaのアバター shima ライター

20代のITライター。
ITやソフトウェアに関することをわかりやすくまとめ、多くの人にそれらを知ってもらおうと活動しています。
ご質問やご要望、お仕事依頼がございましたらお問合せフォームよりお願いいたします。

コメント

コメントする

CAPTCHA



reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次