cococo-coding

유튜브 동영상을 보고 삼일정도를 이용해 간단한 투두리스트 기능을 완성했다. 해당 글은 아래 링크에 넣어두겠다. 복기할 겸 프로젝트 구조 분석과 코드 분석을 써볼 예정이다. 프로젝트 구조 분석 1) 전체 프로젝트 우선 가장 위에 있는 프로젝트 구조는 다음과 같다. 내가 만든 flutter 프로젝트와 외부 라이브러리, 그리고 스크래치와 콘솔로 구성되어 있다. 주로 작업하게 될 영역은 flutter 프로젝트이다. 2) flutter 프로젝트 flutter 프로젝트의 구조는 위와 같다. 굉장히 많은 것들이 있는데 이 중에서 우리가 자주 쓰는 친구는 lib 라이브러리이다. lib라이브러리안에는 기본으로 main.dart 파일이 들어있다. 이 main.dart파일을 주로 쓰며, 애뮬레이터를 실행할 때에도 항상 이 ..

프로젝트 구조 home.dart파일은 lib디렉터리 > screens 디렉터리에 있다. 투두리스트에서 가장 긴 파일이라 코드 분석 글도 길어질 것 같다. 전체 코드 import 'package:flutter/material.dart'; import 'package:flutter_todolist_app/model/todo.dart'; import 'package:flutter_todolist_app/constants/colors.dart'; import 'package:flutter_todolist_app/widgets/todo_item.dart'; class Home extends StatefulWidget { Home({Key? key}) : super(key: key); @override State ..

우선 todo_list.dart는 lib디렉터리>widgets디렉터리 안에 있는 다트파일이다. 전체 코드 import 'package:flutter/material.dart'; import 'package:flutter_todolist_app/model/todo.dart'; import 'package:flutter_todolist_app/constants/colors.dart'; class ToDoItem extends StatelessWidget { final ToDo todo; final onToDoChanged; final onDeleteItem; const ToDoItem({ Key? key, required this.todo, required this.onToDoChanged, required..

개발기간: 2024.02.10~2024.02.12 (3일) 참고: https://www.youtube.com/watch?v=K4P5DZ9TRns&t=1701s&pp=ugMICgJrbxABGAHKBRBmbHV0dGVyIHRvZG9saXN0 기능: 1) 투두리스트 생성 2) 투두리스트 완료 3) 투두리스트 삭제 4) 투두리스트 서치 기능 구현 동영상: 1) 투두리스트 생성 새로운 일정을 입력하고 + 버튼을 누르면 맨 위에 새로 생성이 된다. 2) 투두리스트 완료 완료한 일정을 클릭시 일정에 줄이 그어지고 완료표시(체크)가 된다. 3) 투두리스트 삭제 투두리스트의 trash 아이콘을 클릭하면 해당 일정이 삭제된다. 4) 투두리스트 서치 원하는 일정을 서치바에 검색할 수 있다. 느낀 점 플러터를 접하고 처음 만..

플러터를 접하고 느낀 점과 도움받았던 사이트들을 정리하고자 쓴 글입니다. 플러터 배운 첫째 날 코딩애플 사이트에서 플러터 무료강의 부분을 보면서 안드로이드 스튜디오/플러터 설치와 기본적인 개발환경 세팅을 완료했다. 개인적으로 문법 이론을 하나하나 공부하고 이런 스타일에 질렸었는데 딱 필요한 부분만 알려주시고 하나의 강좌당 시간도 10분 내외라서 편하게 듣기 좋았다. + 영상 밑에 글도 있어서 혼자서 따라하기 편했다. Flutter로 만드는 iOS, Android 앱 - 코딩애플 온라인 강좌 (codingapple.com) Flutter로 만드는 iOS, Android 앱 - 코딩애플 온라인 강좌 Flutter 라이브러리를 사용하면 하나의 코드베이스로 iOS, Android 앱을 만들 수 있습니다. - R..

발생 Refactor> Extract Method를 하는 와중에 다음과 같은 에러가 발생했다. 스택오버플로우에 나온 방법을 시도해봤는데도 계속해서 같은 에러가 발생... 방법 원래는 저렇게 클릭 몇 번으로 쉽게 바뀔 코드인데 결국 일일이 다 바꿔줬다. 바꾼 코드내용이다. 바꿀 때는 괄호짝이나 개수에 주의하자! import 'package:flutter/material.dart'; import 'package:flutter_todolist_app/constants/colors.dart'; class Home extends StatelessWidget { const Home({super.key}); @override Widget build(BuildContext context) { return Scaffol..

발생 투두리스트 앱을 만들던 중에 appBar: Appbar( ) 를 Extract Method 를 했는데 아래와 같은 에러가 났다. 참고) AppBar에 커서를 놓고 오른쪽 버튼>Refactor>Extract Method 를 눌렀을 때 생긴 에러이다. 해결법 커서를 블록의 첫번째 문자 앞에 두고 똑같이 실행하면 된다. Appbar의 맨 앞에 커서를 둔 것을 확인 위의 방법대로 하면 선택이 잘 된다. 출처: https://stackoverflow.com/questions/56558409/flutter-extract-widget-requires-a-return-widget Flutter extract widget requires a return widget I am getting a lot of widge..

투두리스트 앱을 만들기 위해 기본적인 디렉터리들과 dart파일을 생성한다. 이때 lib 디렉토리 내부구조는 다음과 같다. lib ㄴconstants ㄴscreens ㄴhome.dart ㄴmain.dart 원하는 dart파일 import하기 main.dart에 home.dart를 import해주고 싶다. 위의 구조를 보면 screens부터 경로를 넣어줘야 한다. import 'package:flutter_todolist_app/screens/home.dart'; 즉 lib > constants = screens = main.dart > home.dart 순이므로 main.dart가 home.dart로 가기위해서는 우선 screens을 거쳐서 home.dart로 가야한다는 것이다. 그렇게 만들어진 main...