【Flutter/Dart】プログラムを記録・共有する準備をしよう

# 1.はじめに
これまでに7つのAndroidStudio&Flutter&Dart記事を書いている。以下は内容、

- 【Flutter/Dart】環境構築方法の紹介
https://qiita.com/my_programming/items/ad1493e3fef2fb63e036

- **【Flutter/Dart】簡単なプロジェクトの設定と共有方法の紹介（今回説明する内容）**

- 【Flutter/Dart】エミュレータの言語設定をかえよう
https://qiita.com/my_programming/items/6c67fed22c624fd9494b

- 【Flutter/Dart】Dartの文法について学ぼう
https://qiita.com/my_programming/items/9ba25114ef217d077ca5

- 【Flutter/Dart】タスク管理アプリを作ろう
https://qiita.com/my_programming/items/9ed2276f6e9076f43444

- 【Flutter/Dart】Google地図アプリを作ろう
https://qiita.com/my_programming/items/26b9ac6f0d2b3d1bd766

- 【Flutter/Dart】情報管理アプリ＋Google地図アプリを作ろう
https://qiita.com/my_programming/items/5bd1bb7b789b642635b4

プログラムをこまめに記録できたり第三者と共有する環境があると便利。
そこでgithubをもちいてプログラムを記録・共有する方法を紹介する。


# 2.github連携
## 2-1.githubアカウントの作成
アカウントの作成は以下が参考になる。
https://qiita.com/ayatokura/items/9eabb7ae20752e6dc79d
<br>
AndroidStudioにgithubのアカウントを連携するためのトークンを以下の手順で発行する

①`settings`を選択
<img width="100" alt="step2_1_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/a4813b49-3d3d-1a4e-f2e9-5611c062e33a.png">

②次の画面の左下にある`Developper setttings`を選択。
<img width="100" alt="step2_1_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/6fedc245-5498-be21-55ab-14b21986b380.png">

③次の画面の左上にある`Personal access tokens`を選択。
<img width="100" alt="step2_1_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/459829fa-d984-8e67-787a-160aa1eebb49.png">

④次の画面の右上にある`Generate new token`ボタンを押す。
<img width="200" alt="step2_1_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/c5e020ca-adaa-8632-0b43-76688e0d6f49.png">

⑤次の画面の上部にある`note`エディットボックスに任意の言葉をいれて画面最下部にある`Generate Token`ボタンを押す。
<img width="200" alt="step2_1_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/9e1b640b-98d7-b0eb-e43a-86f8acbf761a.png">

⑥次の画面上に表示されているトークンをコピーボタンで入手。
<img width="250" alt="step2_1_6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/616addb0-b74f-0975-c904-8a3035b94fc9.png">

## 2-2.AndroidStudioへのトークンの登録
①`New Flutter Project`ボタンを押す。
<img width="250" alt="step2_2_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/3ae98f45-e402-249b-7dbc-1179d10fd053.png">

②プロジェクト名`hello_world`として`Finish`ボタンを押す。
<img width="250" alt="step2_2_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/42f3ab5c-6099-1b34-9d85-9a07f1812808.png">

③メニューから`VCS`を選択。`Enable Version Control Integration`を押す。
<img width="250" alt="step2_2_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/849252db-fb93-c614-bb3d-f170826f73e4.png">

④バージョン管理の種類を聞かれるので`Git`（初期選択）を選択して`OK`ボタンを押す。
<img width="250" alt="step2_2_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/fdeb5438-d920-f590-65ab-910639c9a8de.png">

⑤メニューバーの`VCS`が`Git`に変更される。
<img width="250" alt="step2_2_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/b0964da6-3445-0291-8531-f35a965d1d0f.png">

⑥メニューから`Git`を選択。次に`GitHub`を選択。そして`Share Project on GitHub`を選択。そして`Log in with Token`を押す。
<img width="250" alt="step2_2_6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/b08165f8-e9b3-d252-9c4f-2001439597f4.png">

⑦共用する際のダイアログが表示されたら`Add account`を押して、
<img width="250" alt="step2_2_7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/04c12cc6-9ba3-cd0f-6f6b-4bd93c96d522.png">

⑧開いたウィンドウのToken欄に2-1で作成したトークンを貼り付けて`Add Account`ボタンを押す。
<img width="250" alt="step2_2_8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/00fcbe0f-db02-ffaf-5ec9-b21a69c61f25.png">

⑨開いたウィンドウにはGitHubにコミット＆プッシュする一覧が表示される。内容を確認して「コミット・メッセージ」に適宜入力。下部にある`add`ボタンを押す。
<img width="250" alt="step2_2_9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/fc1dc148-d29e-975f-d117-96ddc6da6939.png">

⑩GitHubのリポジトリ一覧にhello_worldが追加されていれば作業は終了。
<img width="250" alt="step2_2_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/ba64a64e-803b-fb01-d4ff-d0bb3d58cc72.png">

<img width="250" alt="step2_2_11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/6c89612a-8a6e-7163-d84d-fa4df999db38.png">

## 2-3.プロジェクトを変更してコミットしてみよう
①エミュレータを導入するためにDeviceManagerをひらきCreate virtual deciceを押す。
<img width="250" alt="step2_3_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/cda977e9-3624-2755-b573-f73a867bd374.png">

②Virtual Device Configurationウィンドウで代表的なアンドロイドのエミュレータであるPixel2を選択してNextボタンを押す。
<img width="250" alt="step2_3_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/0a52ebcf-3336-b9bb-2185-3031503fdb61.png">

③Release NameはRを選択してNextボタンを押す。
<img width="250" alt="step2_3_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/b827a825-b266-7621-a5e4-3e887fe581a8.png">

④Finishボタンを押す。
<img width="250" alt="step2_3_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/0998c618-7707-094b-682a-bf27ba0a6d51.png">

⑤エミュレータが追加されるので、再生ボタンを押してエミュレータを起動する。
<img width="250" alt="step2_3_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/e26d01a1-2f15-2f62-3fb9-5b59ba30b1b5.png">

⑥エミュレータが起動しているかをタブをひらいて確認する。
<img width="250" alt="step2_3_6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/242fa28b-966c-3528-585e-70d3c2b598ca.png">

⑦エミュレータが起動したらプロジェクトを実行するために赤枠のボタンを押す。Flutter Demo Home Pageというアプリのバーが表示されたら実行は成功。
<img width="250" alt="step2_3_7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/0f93c94c-bef5-57eb-e1f3-0cde6adfe129.png">

⑧ここからmain.dartの中身をかえてみる。StatefulWidget以下のすべてを以下といれかえる。エミュレータの画面が瞬時にきりかわる。バーがなくなり画面にHello Worldの文字だけが表示される。この文字だけが画面に表示されたら変更は成功。

```
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
```
<img width="250" alt="step2_3_8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/897c5e4f-d489-a889-490f-3b118234a33b.png">

⑨変更点をgithubにコミットしてみる。上部からGit>Commitを選択する。
<img width="250" alt="step2_3_9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/69d70a98-22e9-3e1f-b0a2-5b1cf761d7be.png">

⑩コミットを入力する画面になる。コミットとして、「updated main.dart to write code which is “hello world” message.」をエディットボックスに記入してCommitボタンを押す。下部からgitを選んでウィンドウを切り替える。
<img width="250" alt="step2_3_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/5f44db36-3c49-18b1-777a-a4262c174e1a.png">

⑪コミットを追加するために、masterにマウスを移動させてプルダウンメニューからpushを選択する。Push Commits to hello_worldのウィンドウが起動する。そのままPushボタンを押す。
<img width="250" alt="step2_3_11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/11a3131a-7dd4-1320-2911-82942753d97f.png">

⑫右下にPushed master to new branchと表示されたらコミットのpushが成功。
<img width="250" alt="step2_3_12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/168b07a4-7073-34aa-ac8d-edc91022eb74.png">

⑬Githubをひらいてみてコミットが登録されているか確認する。
<img width="250" alt="step2_3_13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/686de82f-ae0d-d667-1213-1a4ed3ffebcb.png">

ここまでに使ったコードをgithubに置いたのでリンクを紹介
https://github.com/MY-CODE-1981/hello_world

# 3.まとめ
ここまでの作業でgithubをもちいてプログラムを記録・共有する準備が整った。