【Flutter】簡単なメモ帳アプリを作成する方法を解説！

2024年3月10日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

Flutterを使用して簡単なメモ帳アプリを作成する方法
shared_preferencesパッケージを用いたデータ保存方法
メモの追加、編集、削除の実装方法

開発環境

Dart 3.0.0
Flutter 3.10.0
shared_preferences 2.2.2

メモ帳アプリの動作

いちの

完成したメモ帳アプリの動作を最初に確認して、
イメージつけておきましょ〜

メモ帳アプリの基本構成

メモのリスト表示
新しいメモの追加
既存のメモの編集
メモの削除
メモの永続的保存

pubspec.yamlの設定

メモの永続的保存にはshared_preferencesパッケージを使用します。まずは、pubspec.yamlファイルに以下の依存関係を追加してください。

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2

pubspec.yamlファイルにこの依存関係を記述した後、ターミナルまたはコマンドプロンプトでflutter pub getコマンドを実行して、パッケージをプロジェクトにインストールします。

メモリスト表示・メモ削除

概要

メモ帳アプリでは、保存されたメモの一覧をユーザーに表示する必要があります。以下のコードは、Flutterでメモリストを表示する方法を示しています。
メモを削除するには、各メモの横に配置された削除ボタンを使用します。このボタンを押すことで、確認なしに直ちにメモがリストから削除されます。

サンプルコード

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NotesPage(),
    );
  }
}

class NotesPage extends StatefulWidget {
  @override
  _NotesPageState createState() => _NotesPageState();
}

class _NotesPageState extends State<NotesPage> {
  List<String> _notes = [];

  @override
  void initState() {
    super.initState();
    _loadNotes();
  }

  _loadNotes() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    List<String>? notes = prefs.getStringList('notes');
    if (notes != null) {
      setState(() {
        _notes = notes;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('メモ帳'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => _addOrEditNote(),
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: _notes.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_notes[index]),
            onTap: () => _addOrEditNote(index: index),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  _notes.removeAt(index);
                  _saveNotes();
                });
              },
            ),
          );
        },
      ),
    );
  }
}

サンプルコードの解説

26-29行目: アプリ起動時に_loadNotes関数を呼び出して、保存されているメモを読み込みます。
31-39行目: SharedPreferencesを使用して、保存されたメモのリストを非同期で読み込みます。メモが存在する場合は、状態を更新してUIに反映させます。
53-70行目: ListView.builderを使用してメモのリストを表示します。各メモをタップすると編集でき、右側に配置された削除ボタンでメモを削除できます。

メモ追加・メモ編集

概要

新しいメモを追加する機能は、アプリの使い勝手に大きく影響します。追加ボタンをタップしたときに表示されるダイアログから、新しいメモを追加できるようにします。
下記サンプルコードの_addOrEditNote関数内でメモ編集機能が実装されています。メモのリストからメモをタップすると、編集用のダイアログが表示されます。ここでメモを変更し、「保存」ボタンを押すことでメモが更新されます。

サンプルコード

_addOrEditNote({int? index}) {
  TextEditingController _controller = TextEditingController();
  if (index != null) {
    _controller.text = _notes[index];
  }

  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: Text(index == null ? 'メモを追加' : 'メモを編集'),
      content: TextField(
        controller: _controller,
        autofocus: true,
      ),
      actions: <Widget>[
        ElevatedButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text('キャンセル'),
        ),
        ElevatedButton(
          onPressed: () {
            if (index == null) {
              _notes.add(_controller.text);
            } else {
              _notes[index] = _controller.text;
            }
            _saveNotes();
            setState(() {});
            Navigator.of(context).pop();
          },
          child: Text(index == null ? '追加' : '保存'),
        ),
      ],
    ),
  );
}

サンプルコードの解説

_addOrEditNote関数は、新しいメモの追加または既存のメモの編集を行います。引数indexがnullであれば新しいメモの追加、そうでなければ指定されたインデックスのメモの編集を意味します。

メモ保存

概要

メモの追加、編集、削除の各操作後には、変更を永続的に保存する必要があります。これは_saveNotes関数を通じてSharedPreferencesを使用して行われます。

サンプルコード

_saveNotes() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  prefs.setStringList('notes', _notes);
}

サンプルコードの解説

_saveNotes関数は非同期関数で、SharedPreferencesのインスタンスを取得し、setStringListメソッドを使用してメモのリストを保存します。

メモ帳アプリ全体のソースコード

概要

基本的に環境が同じであれば、下記サンプルコードをコピペしていただければ、メモ帳アプリは動くと思います。

サンプルコード

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NotesPage(),
    );
  }
}

class NotesPage extends StatefulWidget {
  @override
  _NotesPageState createState() => _NotesPageState();
}

class _NotesPageState extends State<NotesPage> {
  List<String> _notes = [];

  @override
  void initState() {
    super.initState();
    _loadNotes();
  }

  _loadNotes() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    List<String>? notes = prefs.getStringList('notes');
    if (notes != null) {
      setState(() {
        _notes = notes;
      });
    }
  }
  _addOrEditNote({int? index}) {
    TextEditingController _controller = TextEditingController();
    if (index != null) {
      _controller.text = _notes[index];
    }

    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(index == null ? 'メモを追加' : 'メモを編集'),
        content: TextField(
          controller: _controller,
          autofocus: true,
        ),
        actions: <Widget>[
          ElevatedButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('キャンセル'),
          ),
          ElevatedButton(
            onPressed: () {
              if (index == null) {
                _notes.add(_controller.text);
              } else {
                _notes[index] = _controller.text;
              }
              _saveNotes();
              setState(() {});
              Navigator.of(context).pop();
            },
            child: Text(index == null ? '追加' : '保存'),
          ),
        ],
      ),
    );
  }

  _saveNotes() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setStringList('notes', _notes);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('メモ帳'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => _addOrEditNote(),
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: _notes.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_notes[index]),
            onTap: () => _addOrEditNote(index: index),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  _notes.removeAt(index);
                  _saveNotes();
                });
              },
            ),
          );
        },
      ),
    );
  }
}

よくあるエラーの解決方法

import ‘package:shared_preferences/shared_preferences.dart’;

で、エラーが出てしまった読者様。pubspec.yamlの設定が上手くいっていない可能性が高いと思いますので、もう一度設定し直してみてはいかがでしょうか？

補足

今回はmain.dartに全てソースコードを記述しておりますが、本来はクラス毎にファイルを分けたり、機能毎にファイルを分けてアプリを作成していくのが良いと思います。

まとめ

いかがでしたでしょうか？今回は、簡単なメモ帳アプリを作成する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。