１．ファイル構成と役割
pubspec.yaml
- 役割: アプリケーションで使用するパッケージを管理するファイル。
- 自動生成:
flutter create <project_name>コマンドを実行すると生成されます。
lib/main.dart
- 役割: アプリケーションのエントリーポイント。GetXの設定を行います。
lib/models/task.dart
- 役割: タスクモデルを定義するファイル。
lib/controllers/task_controller.dart
- 役割: GetXのコントローラーを定義するファイル。
lib/screens/home_screen.dart
- 役割: タスクのリストと追加ボタンを表示するホーム画面。
lib/screens/add_task_screen.dart
- 役割: 新しいタスクを追加する画面。
lib/screens/edit_task_screen.dart
- 役割: 既存のタスクを編集する画面。
lib/widgets/task_list.dart
- 役割: タスクリストを表示するウィジェット。
２．サンプルコード
（１）pubspec.yaml
必要なパッケージ（get）を追加します。
Dart
name: task_management_app
description: A new Flutter project using GetX for state management.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
get: ^4.3.8
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
（２）lib/main.dart
アプリケーションのエントリーポイントを設定します。
Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'screens/home_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Task Management App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
（３）lib/models/task.dart
タスクモデルを定義します。
Dart
class Task {
String title;
String description;
bool isCompleted;
Task({
required this.title,
required this.description,
this.isCompleted = false,
});
}
（４）lib/controllers/task_controller.dart
GetXのコントローラーを定義します。
Dart
import 'package:get/get.dart';
import '../models/task.dart';
class TaskController extends GetxController {
// タスクリストを管理するObservableリスト
var tasks = <Task>[].obs;
// 新しいタスクを追加するメソッド
void addTask(Task task) {
tasks.add(task);
}
// タスクを編集するメソッド
void editTask(int index, Task task) {
tasks[index] = task;
}
// タスクを削除するメソッド
void removeTask(int index) {
tasks.removeAt(index);
}
// タスクの完了状態をトグルするメソッド
void toggleTaskCompletion(int index) {
var task = tasks[index];
tasks[index] = Task(
title: task.title,
description: task.description,
isCompleted: !task.isCompleted,
);
}
}
（５）lib/screens/home_screen.dart
ホーム画面を作成します。
Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/task_controller.dart';
import '../widgets/task_list.dart';
import 'add_task_screen.dart';
class HomeScreen extends StatelessWidget {
// タスクコントローラーをインスタンス化
final TaskController taskController = Get.put(TaskController());
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Task Management'),
),
body: TaskList(),
floatingActionButton: FloatingActionButton(
onPressed: () {
// タスク追加画面に遷移
Get.to(() => AddTaskScreen());
},
child: Icon(Icons.add),
),
);
}
}
（６）lib/screens/add_task_screen.dart
タスク追加画面を作成します。
Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/task_controller.dart';
import '../models/task.dart';
class AddTaskScreen extends StatelessWidget {
// タスクコントローラーを取得
final TaskController taskController = Get.find();
final _titleController = TextEditingController();
final _descriptionController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Add Task'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
// タイトル入力フィールド
TextField(
controller: _titleController,
decoration: InputDecoration(labelText: 'Title'),
),
// 説明入力フィールド
TextField(
controller: _descriptionController,
decoration: InputDecoration(labelText: 'Description'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
final title = _titleController.text;
final description = _descriptionController.text;
if (title.isNotEmpty && description.isNotEmpty) {
// 新しいタスクを追加
taskController.addTask(
Task(title: title, description: description),
);
// 画面を閉じる
Get.back();
}
},
child: Text('Add Task'),
),
],
),
),
);
}
}
（７）lib/screens/edit_task_screen.dart
タスク編集画面を作成します。
Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/task_controller.dart';
import '../models/task.dart';
class EditTaskScreen extends StatelessWidget {
final int index;
final Task task;
EditTaskScreen({required this.index, required this.task});
// タスクコントローラーを取得
final TaskController taskController = Get.find();
final _titleController = TextEditingController();
final _descriptionController = TextEditingController();
@override
Widget build(BuildContext context) {
_titleController.text = task.title;
_descriptionController.text = task.description;
return Scaffold(
appBar: AppBar(
title: Text('Edit Task'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
// タイトル入力フィールド
TextField(
controller: _titleController,
decoration: InputDecoration(labelText: 'Title'),
),
// 説明入力フィールド
TextField(
controller: _descriptionController,
decoration: InputDecoration(labelText: 'Description'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
final title = _titleController.text;
final description = _descriptionController.text;
if (title.isNotEmpty && description.isNotEmpty) {
// タスクを編集
taskController.editTask(
index,
Task(title: title, description: description),
);
// 画面を閉じる
Get.back();
}
},
child: Text('Save Changes'),
),
],
),
),
);
}
}
（８）lib/widgets/task_list.dart
タスクリストを表示するウィジェットを作成します。
Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/task_controller.dart';
import '../screens/edit_task_screen.dart';
class TaskList extends StatelessWidget {
// タスクコントローラーを取得
final TaskController taskController = Get.find();
@override
Widget build(BuildContext context) {
// タスクリストをObxウィジェットで監視
return Obx(() {
return ListView.builder(
itemCount: taskController.tasks.length,
itemBuilder: (context, index) {
final task = taskController.tasks[index];
return ListTile(
title: Text(task.title),
subtitle: Text(task.description),
trailing: Checkbox(
value: task.isCompleted,
onChanged: (value) {
// タスクの完了状態をトグル
taskController.toggleTaskCompletion(index);
},
),
onTap: () {
// タスク編集画面に遷移
Get.to(() => EditTaskScreen(index: index, task: task));
},
);
},
);
});
}
}