サンプルアプリを作成してみる

2023年2月23日

開発環境
OS:Windows 10
SDK:VS Code + flutter 3.7.5

事前準備

Flutter開発に必要なソフトウェアをインストールし、環境設定を行います。

必要なソフトウェアについてはこちらを参照してください。

コマンドライン

Flutterの基本操作をコマンドラインで行えるよう覚えておくと便利です。

コマンド動作
flutter create (プロジェクト名)プロジェクト名のフォルダが作られ、フォルダ内にサンプルプログラム一式が出力される
flutter devices実行可能なデバイス一覧が表示される
flutter run -d (デバイス名)指定したデバイスでアプリを起動する
flutter build (ビルド対象)ビルド対象に指定したアプリを生成する
ビルド対象は、apk/ios/webなど
flutter upgradeflutterを最新バージョンに更新する
flutter cleanビルド構成を消去する
flutter pub add (パッケージ名)外部パッケージを指定して取得する
flutter pug get外部パッケージを取得する
コマンドライン一覧

サンプルプログラムを作成する

まずはコマンドプロンプトを起動します。(Wndowsマーク+Rで検索窓を表示し、cmdと入力)

cdコマンドでプロジェクトを作成したい場所に移動した後、flutterコマンドを入力します。

「sample」という名のプロジェクトを作成してみます。

flutter create sample

createコマンド結果

コマンドを入力するとsampleフォルダが作成され、基本的なソースコード一式が出力されます。

sampleプロジェクト構成

これでベースとなるサンプルアプリのソースコードの完成です。

sampleフォルダに移動し、flutterコマンドを入力します。

chromeブラウザで動かしてみます。

flutter run -d chrome

runコマンド結果

カウンターアプリが起動しました。

右下の「+」をタップするとカウントアップするというシンプルなアプリです。

画面レイアウトやカウントアップなどの処理はソースコードlib/main.dartに定義されています。

基本的にFlutterアプリを作成するときは、このサンプルコードをベースにlibフォルダにdartファイルを追加していくなどしてアプリをカスタマイズしていきます。

今回は以上です。