Cubit basic Todo List , Flutter

 

Cubit 으로된 간단한 Todo List 입니다.

add, sub 만 구현해봅니다.

 

제일 먼저 할일은 flutter_bloc 패키지를 설치하고

main 에서 블록 프로바이더로 wrap 한다.

여러개 쓰는 경우는 Muliti로

@override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TodoCubit(),
      child: MaterialApp(
        title: 'Flutter Demo',

// 또는 여러개일 경우 
MultiBlocProvider(
providers: [
BlocProvider(create: (_) => TodoCubit()),
] 

 

todo_cubit.dart

값을 입력 받아서 상태에 등록된 값을 emit 업데이트 한다. 삭제버튼은 단순하게

리트스에서 처럼 마지막 removeLast 만 설정했다.

import 'package:flutter_bloc/flutter_bloc.dart';
class TodoCubit extends Cubit<List<Todo>> {
  TodoCubit() : super([]);
  void addTodo(String title) {
    final todo = Todo(name: title, createdAt: DateTime.now());
    state.add(todo);
    emit([...state, todo]);
  }
  void subTodo(){
    state.removeLast();
    emit([...state]);
  }
}

 

 

todo_model.dart

name과 날짜를 받아오는 간단한 모델클레스를 작성

class Todo {
  final String name;
  final DateTime createdAt;
  Todo({required this.name, required this.createdAt});
}

 

 

 

 

todo_home.dart

class TodoListHome extends StatelessWidget {
  const TodoListHome({super.key});

  @override
  Widget build(BuildContext context) {
    final todoCubit = BlocProvider.of<TodoCubit>(context);
    return Scaffold(
      body: BlocBuilder<TodoCubit, List<Todo>>(
        bloc: todoCubit,
        builder: (context, todostate) {
          return ListView.builder(
              itemCount: todostate.length,
              itemBuilder: (context, index) {
                final todoTile = todostate[index];
                return ListTile(
                  title: Text(todoTile.name),
                  subtitle: Text(todoTile.createdAt.toString()),
                );
              });
        },
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
              heroTag: 'addTodo',
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => AddTodo()));
              },
              tooltip: 'Add Todo',
              child: const Icon(Icons.add)),
          FloatingActionButton(
              heroTag: 'SubTodo',
              onPressed: () {
                todoCubit.subTodo();
              },
              tooltip: 'Subtract Todo',
              child: const Icon(Icons.minimize)),
        ],
      ),
    );
  }
}

 

add_todo.dart

텍스트필드 값을 큐빗으로 전달하고 . 네비게이션으로 되돌아 간다.

context.read<TodoCubit>().addTodo(todoTitleController.text.trim());

class AddTodo extends StatefulWidget {
  const AddTodo({super.key});
  @override
  State<AddTodo> createState() => _AddTodoState();
}
class _AddTodoState extends State<AddTodo> {
  final todoTitleController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    final todoCubit = BlocProvider.of<TodoCubit>(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Add Todo'),      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                controller: todoTitleController,
                decoration: const InputDecoration(hintText: 'Title'),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  context.read<TodoCubit>().addTodo(todoTitleController.text.trim());
                  Navigator.of(context).pop();                },
                child: const Text('Add'),
              ),         
            ],          ),        ),      ),    );  } }