클론코딩 Todo

ToDoFlutter/lib at main · mitchkoko/ToDoFlutter (github.com)

GitHub - mitchkoko/ToDoFlutter

 

위에 코드를 클론코딩했다. 

 

배운점 

 

1. Hive 

void main()async {

  await Hive.initFlutter();


  var box = await Hive.openBox('mybox');
  runApp(const MyApp());
}

 

 

class ToDoDataBase {
  List toDoList = [];

  // 저장박스를 선언
  final _myBox = Hive.box('mybox');

  // 초기 데이터가 여기에 저장
  void createInitialData() {
    toDoList = [

    ];
  }

  // 데이터베이스에서 가져오기
  void loadData() {
    toDoList = _myBox.get("TODOLIST");
  }

  // 데이터 업데이트
  void updateDataBase() {
    _myBox.put("TODOLIST", toDoList);
  }
}

 

 

Todo데이터베이스를 db로 가져와서 

저장하고 싶은 데이터 앞에 db. 붙이기 

class _HomePageState extends State<HomePage> {

  final _mybox = Hive.box('mybox');
  ToDoDataBase db = ToDoDataBase();

  @override
  void initState() {
    if (_mybox.get("TODOLIST") == null) {
      db.createInitialData();
    } else {
      db.loadData();
    }

    super.initState();
  }

  final TextEditingController t1 = TextEditingController();

  void checkBoxChanged(bool? value, int index) {
    setState(() {
      db.toDoList[index][1] = !db.toDoList[index][1];
    });

    db.updateDataBase();
  }

  void saveNewTask() {
    setState(() {
      db.toDoList.add([t1.text, false]);
      t1.clear();
    });

 

 

 

2. flutter_slidable | Flutter Package (pub.dev)

flutter_slidable | Flutter Package

 

 

리스트에 들어가는 타일을 슬라이드 기능을 넣어주는 패키지 

좋아요..3800개.. 믿고 쓰자 

 

 

Slidabe위젯을 사용하고 그안에 

액션을 만들고 

children [] 안에 내용물과 옵션을  집어 넣을 수 있다. 

class ToDoTile extends StatelessWidget {

  final String TaskName;
  final bool taskCompleted;
  Function(bool?)? onChanged;
  Function(BuildContext)? deleteFuntion;

ToDoTile({required this.TaskName,required this.taskCompleted, required this.onChanged
,required this.deleteFuntion});

  @override
  Widget build(BuildContext context) {
    return Padding(padding: EdgeInsets.only(left: 25,right: 25,top: 25),
    child: Slidable(
      endActionPane: ActionPane(
        motion: StretchMotion(),
        children: [
          SlidableAction(onPressed: deleteFuntion,
          icon: Icons.delete,
          backgroundColor: Colors.red.shade300,
          borderRadius: BorderRadius.circular(12),),
        ],
      ),
      child: Container(
        padding: EdgeInsets.all(24),
        decoration: BoxDecoration(
          color: Colors.yellow,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Row(
          children: [
            Checkbox(value: taskCompleted,
                onChanged: onChanged,
            activeColor: Colors.black,),
            Text(TaskName,style: TextStyle(decoration: taskCompleted? TextDecoration.lineThrough : TextDecoration.none),),
          ],
        ),
      ),

    ),);
  }
}