0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FlutterAdvent Calendar 2024

Day 5

Flutterのチュートリアルを学んでみた(1)

Posted at

はじめてのFlutter!スマホアプリ作りへの第一歩 🚀

こんにちは!
今回はFlutterのチュートリアルをじっくり勉強していきたいと思います。

Flutterってなにかな? 🤔

Flutterは、私たちが大好きなスマホアプリを作るための魔法の道具箱みたいなものです。
一番すごいところは、iPhoneとAndroidの両方のアプリを一度に作れることです!

準備するもの 📝

お料理と同じように、始める前に必要なものを確認しましょう:

パソコンの条件 🖥

  • MacOS(64bitのもの)
  • ハードディスクの空き容量が700MB以上

必要なツール 🔧

これらは魔法の呪文のように使うツールです:

  • bash(コマンドを実行するための道具)
  • curl(インターネットからファイルを取得する道具)
  • git(プログラムのバージョン管理をする道具)
  • mkdir(新しいフォルダを作る道具)
  • rm(不要なファイルを削除する道具)
  • unzip(圧縮ファイルを解凍する道具)
  • which(プログラムの場所を探す道具)

そして一番大切なのは...

  • やる気かな(これがあれば何でもできる!笑)

インストール手順 👨‍💻

Step 1: Flutterをダウンロードしよう! 📥

  1. まずはFlutter公式サイトに行きます
  2. 大きなダウンロードボタンをクリック
  3. ダウンロードしたファイルは宝箱みたいなもの。解凍(かいとう)して中身を取り出します!
# フォルダを作って、その中に Flutter を入れよう
cd ~/development
unzip ~/Downloads/flutter_macos_v1.0.0-stable.zip

Step 2: パソコンにFlutterの居場所を教えよう 🏠

パソコンがFlutterを見つけられるように、道しるべを付けます:

export PATH="$PATH:`pwd`/flutter/bin"

これは「ここにFlutterがいるよ!」とパソコンに教えているようなものです。

Step 3: うまく準備できたか確認しよう 🔍

flutter --version

このコマンドを打って、Flutterが「はい!」と返事をしてくれたら成功です!

開発環境のチェック 🚦

Flutterには「ドクター」という便利な機能があります。
まるで健康診断のように、必要なものが全部そろっているかチェックしてくれます:

flutter doctor

もし足りないものがあったら... 🔧

ドクターが教えてくれた足りないものを一つずつインストールしていきましょう:

  1. Xcodeが必要だよ! と言われたら

    • App Storeからインストール
    • インストールが終わったら起動して確認
  2. Android Studioが必要だよ! と言われたら

    • 公式サイトからダウンロード
    • インストールウィザードの案内に従う

実際にアプリを動かしてみよう 📱

iPhoneシミュレータの起動

open -a Simulator

まるで魔法みたい!パソコンの中にiPhoneが現れます。

Androidエミュレータの設定

  1. Android Studioを開く
  2. 右上の「AVD Manager」をクリック
  3. 「Create Virtual Device」で新しいスマホを作る
  4. 好きなスマホの種類を選ぶ

困ったときは... 🆘

  • Flutter doctorの診断結果をよく読んでみよう
  • エラーメッセージは大事なヒントです
  • 分からないことはインターネットで調べるか、先生に聞いてみよう!

おめでとう! 🎉

ここまでできたら、もうアプリ作りへの準備は整いました!
次は実際にアプリを作っていきましょう。

大切なポイント ⭐️

  1. 焦らず一歩ずつ進もう
  2. エラーは友達!たくさん出会って、たくさん学ぼう
  3. 困ったら戻って確認。急がば回れ!

次は何をする? 🎯

チュートリアルをみます。

参考にしたサイト 📚

この説明は以下のサイトを参考に作成しました:

  • Flutter 導入
    • とても分かりやすく解説されているので、もっと詳しく知りたい人はチェックしてみてください!
  • Flutter 公式サイト
    • 最新の情報はここでチェックできます!

みなさんも、分からないことがあったらこれらのサイトを参考にしてみてください。
困ったときの道しるべになってくれますよ!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?