【Flutter初心者向け講座】メモアプリを作ってみよう！

こんな方におすすめの内容です
・スマホアプリ開発に興味がある
・Flutterを勉強したいけど、難しそうで迷っている
・とりあえず動くものを作ってみたい

スマホアプリを作ってみたい、という方のための講座です。

図や画像を使って、丁寧に解説していきますので、プログラミング初心者でも学習を進められると思います。
ただ、一発で全て理解するのは難しいです。天才じゃない限りは。
まずは、動くものを作ってみるという経験をしていただければと思います。

有料となっていますが、途中までは無料で公開しています。
途中まで進めてみて、ご自身に合いそうだなと感じていただければ購入して、最後まで学習してみてください。

上手く進められない箇所があれば、コメントを残してくだされば、できる限り回答いたします。
お気軽にご質問ください。

[0]準備

[0-1]完全に初めてという方へ

プログラミングは全くの初めてという方は、まずはこちらのnoteに目を通してみてください。この講座の内容を理解しやすくなると思います。
一通り軽く読んでみるだけで十分です。
▶︎初めてのプログラミング学習用【Dart(Flutter)】

下記のような方は飛ばして次に進んでください。
・アプリ開発がどんなものか知りたい
・とりあえず動くものを作ってみたい
・これくらいの内容は知ってるよ

[0-2]Flutterの環境構築

環境構築が完了している方は飛ばして[1]に進んでください。

環境構築の手順は他の方が分かりやすく解説してくれているので、そちらを見ていただくことにします。

▶︎Macをご利用は方はこちら
▶︎Windowsをご利用の方はこちら

[1]何も機能が無いアプリを用意する

[1-1]Flutterプロジェクト作成

まずはAndroid StudioでFlutterのプロジェクトを作成します。
Android Studioを起動したら、下記の順に操作してください。

↓「New Flutter Project」をクリック

↓「Next」をクリック

↓「Project name:」に「memo app」と入力して、「Finish」をクリック

[1-2]Emulatorを出す

Android Studioの上部にある「<no device selected>」をクリックして、「Open Android Emulator:」 から始まるものをクリックしてください。↓

もし「Open Android Emulator:」 から始まるものが出てこなければ、一番下の「Refresh」をクリックしてから、再度「<no device selected>」をクリックしてみてください。

↓こういうのが出てくればOKです。

[1-3]カウンターアプリを消して書き換える

プロジェクトを作った直後は簡単なカウンターアプリのコードが書かれています。まずはこれを消して、まっさらな状態にします。

main.dartに書かれているものを全て削除して、下記の内容をコピペしてください。ここはあまり何も考えずコピペして次に進んでください。

import 'package:flutter/material.dart';

// 最初はここから処理が開始する
void main() {
  // アプリを起動する処理　「MyAppに書かれているアプリを起動します」みたいな意味
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(), // 「最初に開く画面は "class HomePage" に書かれている内容です」みたいな意味
    );
  }
}

// 最初に開かれる画面のコード
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 画面上の青いやつです。画面のタイトルとかメニューボタンを設置できます。
      appBar: AppBar(),
    );
  }
}

新しいアプリを作る時の定型文みたいなものだと思ってください。

下のような緑色の▶︎ボタンを押して、アプリを起動してください。

アプリを起動して下のようになっていればOKです。

[2]画面を表示するコードを別のファイルに分ける

今は、[アプリを起動するコード]と[画面を表示するコード]が同じファイルに書かれています。
後々に分かりにくくなる可能性があるので、[画面を表示するコード]を別のファイルに移動させます。

[2-1]「page」フォルダを作成

まずは「page」フォルダを作成します。
[画面を表示するコード]が書かれたファイルをまとめておくためです。

[2-1-1]
libを右クリック→Newをクリック→Directoryをクリック↓

[2-1-2]
「page」と入力してEnterキー↓

libの右下にpageがあればOKです↓

[2-2]画面表示用のファイルを作る

[2-2-1]
pageを右クリック→Newをクリック→Dart Fileをクリック↓

[2-2-2]
「home_page」と入力してEnterキー↓

pageの右下にhome_page.dartがあればOKです↓

[2-3]コード分割

[2-3-1]
main.dartの「class HomePage ・・・」から下のコードを、home_page.dartにコピペ

[2-3-2]
コピペしたら、home_page.dartの「StatefulWidget」を右クリック→Show Context Actionsをクリック↓

[2-3-3]
「・・・material.dart'」で終わるものをクリック↓

home_page.dartがこんな感じになります↓

import 'package:flutter/material.dart'; // [2-3-3]をした時に追加されたコードです。Flutterのコードを使うために必要です。

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 画面上の青いやつです。画面のタイトルとかメニューボタンを設置できます。
      appBar: AppBar(),
    );
  }
}

[2-3-4]
main.dartの「class HomePage ・・・」から下のコードを削除

[2-3-5]
main.dartの「HomePage()」右クリック
→Show Context Actionsをクリック
→「・・・home_page.dart'」で終わるものをクリック

main.dartがこんな感じになります↓

import 'package:flutter/material.dart';
import 'package:teaching_materials_memo/page/home_page.dart'; // [2-3-5]をした時に追加されたコードです。HomePage()を呼び出すために必要です。

// 最初はここから処理が開始する
void main() {
  // アプリを起動するコード　「MyAppに書かれているアプリを起動します」みたいな意味
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(), // 「最初に開く画面は "class HomePage" に書かれている内容です」みたいな意味
    );
  }
}

編集したコードを反映させる

下記操作でコードを保存して反映させましょう。
(Macの方)「command」+「s」
(Windowsの方)「control」+「s」
これで反映されない場合は、緑色の▶︎ボタンを押して、アプリを起動してください。
コードを編集するたびにこの操作でコードを反映させてください。

エラー無く、アプリ画面に変化がなければOKです。

[3]メモ編集画面を作って、その画面に移動する

新しいメモを作成したり、既にあるメモを更新するための画面を作っていきます。

[3-1]メモ編集画面のコードを書くファイルを作る

[3-1-1]
pageを右クリック→Newをクリック→Dart Fileをクリック↓

[3-1-2]
New Dart Fileというのが出てきたら
「edit_page」と入力してEnterキー
pageの右下にedit_page.dartがあればOKです

[3-2]空白のメモ編集画面を作る

edit_page.dartに下記のコードをコピペしてください。

// メモ編集画面のコード

import 'package:flutter/material.dart';

// プログラム上でのメモ編集画面の名前を「EditPage」と名付けました
class EditPage extends StatefulWidget {
  const EditPage({Key? key}) : super(key: key);

  @override
  State<EditPage> createState() => _EditPageState();
}

class _EditPageState extends State<EditPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(), // 画面上の青いやつです。画面のタイトルとかメニューボタンを設置できます。
    );
  }
}

現在のhome_page.dartの「HomePage」を「EditPage」に置き換えたものです。
プログラム上でのメモ編集画面の名前が「EditPage」となります。

これは画面を作る時の定型文だと思ってください。これにコードを追記していって作りたい画面を形にしていきます。

[3-3]メモ作成ボタンを作る

home _page.dartに下記のようにコードを追記してください。
追記するのは「↓↓追記ここから↓↓」と「↑↑追記ここまで↑↑」の間のコードです。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),

↑の箇所のすぐ下に
↓のコードを追記してください。

floatingActionButton: FloatingActionButton( // 画面右下に固定されるボタン
  child: const Icon(Icons.add), // ボタンの中に「+」を表示
  onPressed: () { // ボタンを押した時の処理
    // メモ編集画面に移動する処理↓
    Navigator.push(context, MaterialPageRoute(builder: ((context) => const EditPage())));
  },
),

「EditPage」を右クリック
→Show Context Actionsをクリック
→「・・・edit_page.dart'」で終わるものをクリック

「+」ボタンを押してみて、下のような動作ができていればOKです。

この時点のhome_page.dartのコードと画面の関係図

「このコードが画面のこの部分なのか」と、なんとなくイメージできればOKです。

画面遷移のコードについて

別の画面に移動するコードを書きたい時は、下記のコードをコピーして、「EditPage()」の部分を別の画面に置き換えれば、実装できます。
これも定型文のようなものなので、コピペで使い回すか、覚えてしまいましょう。

Navigator.push(context, MaterialPageRoute(builder: ((context) => const EditPage())));

[4]メモ編集画面の入力欄と保存ボタンを作る