Flutter’da Provider Kullanarak Basit Bir Todo Uygulaması Geliştirme

$ flutter create todos
dependencies:
flutter:
sdk: flutter
provider: ^3.1.0
import ‘package:flutter/material.dart’;
class Task {
String title;
bool completed;
Task({@required this.title, this.completed = false});
void toggleCompleted() {
completed = !completed;
}
}
import ‘dart:collection’;
import ‘package:flutter/material.dart’;
import ‘package:todos/models/task.dart’;
class TodosModel extends ChangeNotifier {
final List<Task> _tasks = [];

UnmodifiableListView<Task> get allTasks => UnmodifiableListView(_tasks);
UnmodifiableListView<Task> get incompleteTasks =>
UnmodifiableListView(_tasks.where((todo) => !todo.completed));
UnmodifiableListView<Task> get completedTasks =>
UnmodifiableListView(_tasks.where((todo) => todo.completed));

void addTodo(Task task) {
_tasks.add(task);
notifyListeners();
}

void toggleTodo(Task task) {
final taskIndex = _tasks.indexOf(task);
_tasks[taskIndex].toggleCompleted();
notifyListeners();
}
void deleteTodo(Task task) {
_tasks.remove(task);
notifyListeners();
}
}
import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;
import ‘package:todos/models/task.dart’;
import ‘package:todos/providers/todos_model.dart’;
class TaskListItem extends StatelessWidget {
final Task task;
TaskListItem({@required this.task});
@override
Widget build(BuildContext context) {
return ListTile(
leading: Checkbox(
value: task.completed,
onChanged: (bool checked) {
Provider.of<TodosModel>(context, listen: false).toggleTodo(task);
},
),
title: Text(task.title),
trailing: IconButton(
icon: Icon(
Icons.delete,
color: Colors.red,
),
onPressed: () {
Provider.of<TodosModel>(context, listen: false).deleteTodo(task);
},
),
);
}
}
import ‘package:flutter/material.dart’;
import ‘package:todos/models/task.dart’;
import ‘package:todos/widgets/task_list_item.dart’;
class TaskList extends StatelessWidget {
final List<Task> tasks;
TaskList({@required this.tasks});
@override
Widget build(BuildContext context) {
return ListView(
children: getChildrenTasks(),
);
}

List<Widget> getChildrenTasks() {
return tasks.map((todo) => TaskListItem(task: todo)).toList();
}
}
import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;
import ‘package:todos/providers/todos_model.dart’;
import ‘package:todos/widgets/task_list.dart’;
class AllTasksTab extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Consumer<TodosModel>(
builder: (context, todos, child) => TaskList(
tasks: todos.allTasks,
),
),
);
}
}
// lib/tabs/complete_tasks.dart
import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;
import ‘package:todos/providers/todos_model.dart’;
import ‘package:todos/widgets/task_list.dart’;
class CompletedTasksTab extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Consumer<TodosModel>(
builder: (context, todos, child) => TaskList(
tasks: todos.completedTasks,
),
),
);
}
}
// lib/tabs/incomplete_tasks.dart
import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;
import ‘package:todos/providers/todos_model.dart’;
import ‘package:todos/widgets/task_list.dart’;
class IncompleteTasksTab extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Consumer<TodosModel>(
builder: (context, todos, child) => TaskList(
tasks: todos.incompleteTasks,
),
),
);
}
}
import ‘package:flutter/material.dart’;
import ‘package:todos/tabs/all_tasks.dart’;
import ‘package:todos/tabs/completed_tasks.dart’;
import ‘package:todos/tabs/incomplete_tasks.dart’;
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen>
with SingleTickerProviderStateMixin {
TabController controller; @override
void initState() {
super.initState();
controller = TabController(length: 3, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Todos’),
actions: <Widget>[
IconButton(
icon: Icon(Icons.add),
onPressed: () {
},
),
],
bottom: TabBar(
controller: controller,
tabs: <Widget>[
Tab(text: ‘All’),
Tab(text: ‘Incomplete’),
Tab(text: ‘Complete’),
],
),
),
body: TabBarView(
controller: controller,
children: <Widget>[
AllTasksTab(),
IncompleteTasksTab(),
CompletedTasksTab(),
],
),
);
}
}
final List<Task> _tasks = [
Task(title: 'Finish the app'),
Task(title: 'Write a blog post'),
Task(title: 'Share with community'),
];
import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;
import ‘package:todos/providers/todos_model.dart’;
import ‘package:todos/models/task.dart’;
class AddTaskScreen extends StatefulWidget {
@override
_AddTaskScreenState createState() => _AddTaskScreenState();
}
class _AddTaskScreenState extends State<AddTaskScreen> {
final taskTitleController = TextEditingController();
bool completedStatus = false;
@override
void dispose() {
taskTitleController.dispose();
super.dispose();
}
void onAdd() {
final String textVal = taskTitleController.text;
final bool completed = completedStatus;
if (textVal.isNotEmpty) {
final Task todo = Task(
title: textVal,
completed: completed,
);
Provider.of<TodosModel>(context, listen: false).addTodo(todo);
Navigator.pop(context);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Add Task’),
),
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15.0),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(controller: taskTitleController),
CheckboxListTile(
value: completedStatus,
onChanged: (checked) => setState(() {
completedStatus = checked;
}),
title: Text(‘Complete?’),
),
RaisedButton(
child: Text(‘Add’),
onPressed: onAdd,
),
],
),
),
)
],
),
);
}
}
import ‘package:flutter/material.dart’;
import ‘package:todos/screens/add_task_screen.dart’;


onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AddTaskScreen(),
),
);
},

import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;
import ‘package:todos/screens/home_screen.dart’;
import ‘package:todos/providers/todos_model.dart’;
void main() => runApp(TodosApp());
class TodosApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
builder: (context) => TodosModel(),
child: MaterialApp(
title: ‘Todos’,
theme: ThemeData.dark(),
home: HomeScreen(),
),
);
}
}

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store