Flutter Providerを使用したシンプルな状態管理のチュートリアル

まず、FlutterアプリケーションでProviderを使用するために、providerパッケージをpubspec.yamlファイルに追加します。次に、main.dartファイルでProviderパッケージをインポートします。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
  runApp(MyApp());
}

次に、状態を管理するためのデータモデルを作成します。例えば、Todoアプリケーションを考えてみましょう。

class Todo {
  String title;
  bool completed;
  Todo({
    required this.title,
    this.completed = false,
  });
}
class TodoModel extends ChangeNotifier {
  List<Todo> _todos = [];
  List<Todo> get todos => _todos;
  void addTodo(String title) {
    _todos.add(Todo(title: title));
    notifyListeners();
  }
  void toggleTodoCompleted(int index) {
    _todos[index].completed = !_todos[index].completed;
    notifyListeners();
  }
}

上記の例では、TodoModelクラスが状態を管理し、Todoクラスが各Todoアイテムを表しています。TodoModelクラスはChangeNotifierを継承し、状態の変更がある場合にnotifyListeners()メソッドを呼び出して変更を通知します。

次に、main.dartファイルでProviderを設定します。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => TodoModel(),
      child: MaterialApp(
        title: 'Flutter Provider Tutorial',
        home: TodoScreen(),
      ),
    );
  }
}

ChangeNotifierProviderウィジェットを使用して、TodoModelのインスタンスを作成し、アプリケーション全体で使用できるようにします。

次に、画面を作成し、Providerから状態を使用します。

class TodoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var todoModel = Provider.of<TodoModel>(context);
    var todos = todoModel.todos;
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          var todo = todos[index];
          return ListTile(
            title: Text(todo.title),
            leading: Checkbox(
              value: todo.completed,
              onChanged: (value) {
                todoModel.toggleTodoCompleted(index);
              },
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text('Add Todo'),
                content: TextField(
                  onChanged: (value) {
                    // 新しいTodoを追加
                    todoModel.addTodo(value);
                  },
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Cancel'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                  FlatButton(
                    child: Text('Add'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
            },
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

上記の例では、Provider.ofメソッドを使用してTodoModelのインスタンスを取得し、その状態を使用してTodoリストを表示します。ListView.builderを使用してリストを作成し、各アイテムの前にチェックボックスを表示します。また、floatingActionButtonを使用して新しいTodoを追加するためのダイアログを表示します。

これで、Flutterアプリケーションでシンプルな状態管理を行うためのProviderの使用方法がわかりました。Providerパッケージを使うことで、状態の変更を追跡し、ウィジェットツリー内の異なる部分で状態を共有することができます。

このチュートリアルでは、Todoアプリケーションを例に挙げましたが、実際のアプリケーションではさまざまな状態を管理することができます。Flutterの公式ドキュメントや他のチュートリアルも参考にしながら、より複雑な状態管理のパターンを学ぶことができます。

以上が、Flutter Providerを使用したシンプルな状態管理のチュートリアルです。アプリケーションの要件に応じて、Providerを使用して状態を効果的に管理できるようになります。