flutterを用いて初めてアプリを作るまで

はじめに

今回は flutter を用いてエンジニアのためのマッチングアプリ「Team」を作る上で学んだことをアウトプットしていこうと思います。

執筆者の経歴

• エンジニア歴は１年
• 仕事では SQL を使ってデータベースの構築などをしている
• flutter を用いて１人でアプリを作るのは初めて
• でも知り合いのエンジニアと flutter でマッチングアプリ制作・リリース済み
• 参考までにアプリのリンク →WinWin（男女のグループマッチングアプリ）

今回のゴール

flutter を使って初期アプリ（カウントアプリ）を画面で動作確認ができるようになる。

それでは早速やっていこう！

まずはアプリを格納するフォルダの作成

自分の場合はユーザーの直下に「flutter_app」というフォルダを作りました。

コマンドプロンプトの起動

先程作ったフォルダへ移動

コマンドプロンプト

$ cd flutter_app

アプリを Create する

コマンドプロンプト

$ flutter create team

自分の場合は「team」という名前のアプリを作りました。

コマンドがエラーなく実施されれば成功

All done!というメッセージを確認できれば OK です。

早速 VSCode でアプリを開いてみよう！

アプリフォルダの中の lib 配下の「main.dart」を開いてみましょう。
中身はこんな感じ。

シミュレーターを起動してflutter run

コマンドプロンプト(team)

team$ flutter run

アプリフォルダの直下でコマンドを流しましょう。

画面でアプリを確認できればOK！

簡単なカウントアプリで右下のボタンを押すとカウントがプラスされていきます。

まとめ

さぁということで今回はFlutterを用いて初めてのアプリ作成から画面確認までしてみました。
Flutterはまだまだ日本語の記事が少ないので少しでも皆さんのお役に立てればと思います！！