プロンプト
FlutterでTodoアプリを実装してください
回答
Flutterを使用してToDoアプリを実装するための基本的なステップを示します。以下の手順に従ってください。
-
Flutterプロジェクトのセットアップ:
flutter create todo_app -
プロジェクトに必要な依存関係を追加します。
pubspec.yamlファイルを編集し、flutter/material.dartとproviderパッケージを追加します。dependencies: flutter: sdk: flutter provider: ^5.0.0 -
ToDoアイテムを表すモデルを作成します。
lib/models/todo.dartを作成し、以下のコードを追加します。class Todo { final String title; final bool isDone; Todo({required this.title, this.isDone = false}); } -
ToDoリストの状態を管理するプロバイダーを作成します。
lib/providers/todo_provider.dartを作成し、以下のコードを追加します。import 'package:flutter/material.dart'; import 'package:todo_app/models/todo.dart'; class TodoProvider extends ChangeNotifier { List<Todo> _todos = []; List<Todo> get todos => _todos; void addTodo(String title) { _todos.add(Todo(title: title)); notifyListeners(); } void toggleTodoStatus(int index) { _todos[index].isDone = !_todos[index].isDone; notifyListeners(); } } -
メインのToDoアプリケーションを作成します。
lib/main.dartを編集し、以下のコードを追加します。import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:todo_app/providers/todo_provider.dart'; void main() { runApp(TodoApp()); } class TodoApp extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (context) => TodoProvider(), child: MaterialApp( title: 'Todo App', home: TodoScreen(), ), ); } } class TodoScreen extends StatelessWidget { @override Widget build(BuildContext context) { final provider = Provider.of<TodoProvider>(context); return Scaffold( appBar: AppBar( title: Text('Todo List'), ), body: ListView.builder( itemCount: provider.todos.length, itemBuilder: (context, index) { final todo = provider.todos[index]; return ListTile( title: Text(todo.title), leading: Checkbox( value: todo.isDone, onChanged: (_) { provider.toggleTodoStatus(index); }, ), ); }, ), floatingActionButton: FloatingActionButton( onPressed: () { // ダイアログを表示して新しいToDoを追加 showDialog( context: context, builder: (context) { final TextEditingController controller = TextEditingController(); return AlertDialog( title: Text('Add Todo'), content: TextField( controller: controller, decoration: InputDecoration(hintText: 'Enter todo title'), ), actions: [ TextButton( onPressed: () { Navigator.pop(context); }, child: Text('Cancel'), ), TextButton( onPressed: () { provider.addTodo(controller.text); Navigator.pop(context); }, child: Text('Add'), ), ], ); }, ); }, child: Icon(Icons.add), ), ); } }
これで、ToDoアプリが実装されました。アプリを実行して、ToDoリストにアイテムを追加し、完了/未完了のステータスを切り替えることができます。
実際にやってみる
Flutter\todo_app\pubspec.yaml
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
provider: ^5.0.0
lib以下を↓のように編集
lib
│ main.dart
│
├─models
│ todo.dart
│
└─providers
todo_provider.dart
何度かエラーが出たのでエラーログをAIに読ませてコードを何度か再生成
Flutter\todo_app\lib\models\todo.dart
class Todo {
String title;
bool isDone;
Todo({
required this.title,
this.isDone = false,
});
void toggleDone() {
isDone = !isDone;
}
}
Flutter\todo_app\lib\providers\todo_provider.dart
import 'package:flutter/material.dart';
import 'package:todo_app/models/todo.dart';
class TodoProvider extends ChangeNotifier {
List<Todo> _todos = [];
List<Todo> get todos => _todos;
void addTodo(String title) {
_todos.add(Todo(title: title));
notifyListeners();
}
void toggleTodoStatus(int index) {
_todos[index].toggleDone(); // Todoモデルのメソッドを呼び出し、isDoneをトグルします
notifyListeners();
}
}
Flutter\todo_app\lib\main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:todo_app/providers/todo_provider.dart'; // Import your TodoProvider
void main() {
runApp(TodoApp());
}
class TodoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => TodoProvider(), // Instantiate TodoProvider here
child: MaterialApp(
title: 'Todo App',
home: TodoScreen(),
),
);
}
}
class TodoScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Obtain an instance of TodoProvider using Provider.of
final provider = Provider.of<TodoProvider>(context);
return Scaffold(
appBar: AppBar(
title: Text('Todo List'),
),
body: ListView.builder(
itemCount: provider.todos.length,
itemBuilder: (context, index) {
final todo = provider.todos[index];
return ListTile(
title: Text(todo.title),
leading: Checkbox(
value: todo.isDone,
onChanged: (_) {
provider.toggleTodoStatus(index);
},
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Show a dialog to add a new todo
showDialog(
context: context,
builder: (context) {
final TextEditingController controller = TextEditingController();
return AlertDialog(
title: Text('Add Todo'),
content: TextField(
controller: controller,
decoration: InputDecoration(hintText: 'Enter todo title'),
),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Cancel'),
),
TextButton(
onPressed: () {
provider.addTodo(controller.text);
Navigator.pop(context);
},
child: Text('Add'),
),
],
);
},
);
},
child: Icon(Icons.add),
),
);
}
}
起動
