![見出し画像](https://assets.st-note.com/production/uploads/images/79973958/rectangle_large_type_2_16aee2a11e9f6ba26463a3befbf84348.png?width=1200)
【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」をクリック
![](https://assets.st-note.com/img/1653133079917-oMtVWImoTc.png?width=1200)
↓「Next」をクリック
![](https://assets.st-note.com/img/1653133103068-NzvXkIdXct.png?width=1200)
↓「Project name:」に「memo app」と入力して、「Finish」をクリック
![](https://assets.st-note.com/img/1654242506401-GaWT8jgxKL.png?width=1200)
[1-2]Emulatorを出す
Android Studioの上部にある「<no device selected>」をクリックして、「Open Android Emulator:」 から始まるものをクリックしてください。↓
![](https://assets.st-note.com/img/1653134096008-5GMY0o14En.png)
もし「Open Android Emulator:」 から始まるものが出てこなければ、一番下の「Refresh」をクリックしてから、再度「<no device selected>」をクリックしてみてください。
↓こういうのが出てくればOKです。
![](https://assets.st-note.com/img/1653134208873-X9KnzQf16B.png)
[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(),
);
}
}
新しいアプリを作る時の定型文みたいなものだと思ってください。
下のような緑色の▶︎ボタンを押して、アプリを起動してください。
![](https://assets.st-note.com/img/1652346048236-XT32ms0B2P.png)
アプリを起動して下のようになっていればOKです。
![](https://assets.st-note.com/img/1652337735592-gmv4pPgoX4.png?width=1200)
[2]画面を表示するコードを別のファイルに分ける
今は、[アプリを起動するコード]と[画面を表示するコード]が同じファイルに書かれています。
後々に分かりにくくなる可能性があるので、[画面を表示するコード]を別のファイルに移動させます。
[2-1]「page」フォルダを作成
まずは「page」フォルダを作成します。
[画面を表示するコード]が書かれたファイルをまとめておくためです。
[2-1-1]
libを右クリック→Newをクリック→Directoryをクリック↓
![](https://assets.st-note.com/img/1652342412054-K6aSAj1LtB.png?width=1200)
[2-1-2]
「page」と入力してEnterキー↓
![](https://assets.st-note.com/img/1652342545707-Ce1KVcOB2d.png)
libの右下にpageがあればOKです↓
![](https://assets.st-note.com/img/1652342782197-Tfq10EfWVE.png)
[2-2]画面表示用のファイルを作る
[2-2-1]
pageを右クリック→Newをクリック→Dart Fileをクリック↓
![](https://assets.st-note.com/img/1652343065560-q4AuEm4JgH.png?width=1200)
[2-2-2]
「home_page」と入力してEnterキー↓
![](https://assets.st-note.com/img/1654243350808-IoFvhLoyZl.png)
pageの右下にhome_page.dartがあればOKです↓
![](https://assets.st-note.com/img/1654243395460-e00a2NddnH.png)
[2-3]コード分割
[2-3-1]
main.dartの「class HomePage ・・・」から下のコードを、home_page.dartにコピペ
[2-3-2]
コピペしたら、home_page.dartの「StatefulWidget」を右クリック→Show Context Actionsをクリック↓
![](https://assets.st-note.com/img/1652344279926-ZTvLh2cd2M.png)
[2-3-3]
「・・・material.dart'」で終わるものをクリック↓
![](https://assets.st-note.com/img/1652344341111-kV2slOl1xH.png)
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をクリック↓
![](https://assets.st-note.com/img/1652343065560-q4AuEm4JgH.png?width=1200)
[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です。
![](https://assets.st-note.com/production/uploads/images/78406691/picture_pc_c65cfcf83d96ae36122dcbdd3d28eb32.gif)
この時点のhome_page.dartのコードと画面の関係図
![](https://assets.st-note.com/img/1652419230408-Rih7u8SupM.png?width=1200)
「このコードが画面のこの部分なのか」と、なんとなくイメージできればOKです。
画面遷移のコードについて
別の画面に移動するコードを書きたい時は、下記のコードをコピーして、「EditPage()」の部分を別の画面に置き換えれば、実装できます。
これも定型文のようなものなので、コピペで使い回すか、覚えてしまいましょう。
Navigator.push(context, MaterialPageRoute(builder: ((context) => const EditPage())));
[4]メモ編集画面の入力欄と保存ボタンを作る
ここから先は
¥ 280
この記事が気に入ったらサポートをしてみませんか?