Do_Someting

UART는 무엇인가? UART는 2개의 선을 이용한 통신 방식입니다. 이 통신 방식은 직렬 통신 방식으로 여러 비트의 데이터를 순차적으로 하나씩 보냅니다. UART를 이용해 두 디바이스를 연결하는 방법은 다음과 같습니다. Tx는 송신선으로 데이터를 다른 디바이스로 보내는 역할을 합니다. Rx는 수신선으로 데이터를 다른 디바이스로 부터 받는 역할을 합니다. 두 선을 교차로 연결해야 UART 통신을 할 수 있습니다. Tx는 다른 Rx에 연결해야 보낸 데이터를 받을 수 있다고 생각하시면 편합니다. 아두이노로 컴퓨터와 통신하기 아두이노는 자체적으로 컴퓨터와 연결할 수 있는 회로를 가지고 있습니다. 그렇기에 USB로 연결하기만 하면 UART 통신이 가능합니다. 우리는 코드를 짜고 업로드하기만 하면 됩니다. UAR..

이번 글에서는 저번 글에 이어서 Drift를 이용한 Todo 앱을 제작한다. 2023.07.17 - [단기 프로젝트] - Drift를 이용한 Todo 앱 제작 -(1) Drift를 이용한 Todo 앱 제작 -(1) 이번에는 저번 글에서 만든 Todo 앱을 Drift를 이용해 만들어본다. Drift는flutter에서 sqlite를 쉽게 사용할 수 있도록 만든 라이브러리이다. 저번에 만든 앱은 저장이 되지 않기 때문에 앱을 끄면 값이 ti-project-11.tistory.com 1. TodoBox TodoBox는 하나의 todo를 표현하기 위한 상자이다. 이 안에는 완료되었는지 확인 할 수 있는 체크 박스와 todo의 내용이 들어가 있다. class TodoBox extends StatelessWidget..

이번에는 저번 글에서 만든 Todo 앱을 Drift를 이용해 만들어본다. Drift는flutter에서 sqlite를 쉽게 사용할 수 있도록 만든 라이브러리이다. 저번에 만든 앱은 저장이 되지 않기 때문에 앱을 끄면 값이 날라간다. SQLite를 이용하면 작성한 Todo 데이터를 로컬에 저장할 수 있다. 앱은 Todo를 생성할 수 있고 (1) ~ (3), 완료하면 체크를 할 수 있다. 체크가 되면 줄이 그어진다. 오른쪽 밑에 있는 버튼을 누르면 완료된 리스트가 삭제 된다. 앱을 끄고 다시 키면 이전에 만들어 놓은 데이터가 유지되어 있는 것을 볼 수 있다. 1. pubspec.yaml pubspec.yaml에 있는 dependencies와 dev_dependencies에 라이브러리를 추가해준다. 이 라이브러..

이번 글에서는 Todo app을 제작해본다. 이 앱의 기능은 다음과 같다. (1) 앱이 처음 실행되면 뜨는 창이다. (2) 텍스트 필드를 터치하면 필드 안에 글을 쓸 수 있다. (3) 텍스트 필드 밑에 있는 '+' 버튼을 누르면 할 일이 추가된다. (4) 체크 박스를 터치하면 완료로 뜬다. (5) 오른쪽 아래에 있는 refresh 버튼을 누르면 완료된 일이 사라진다. 이 앱의 제작에는 3개의 dart 파일이 사용되었다. lib 파일 안에 다음과 같이 폴더와 파일을 추가해준다. 1. textBox.dart textBox.dart에서는 맨 위의 제목과 할 일을 적는 TextField가 포함되어 있다. 그 밑에는 '+' 버튼을 생성하여 할 일을 추가할 수 있도록 했다. 'textBox.dart'의 위젯트리는 ..

저번 글에서는 사용자가 위젯을 드래그하면 그대로 위젯이 움직이도록 만들었다. 이번 글에서는 움직일 수 있는 위젯을 선택하여 추가, 삭제 할 수 있도록 할 것이다. 이 앱을 실행하면 다음과 같은 결과가 나온다. 앱 동작 영상 아래에 있는 네모들을 클릭하면 그 네모가 화면에 나온다. 아래 위젯은 스크롤이 가능하다. 네모는 드래그를 통해 이동이 가능하다. 네모를 터치하면 하안 선으로 감싸진다. 이 상태는 네모가 선택되어 있는 상태이다. 이 상태로 오른쪽 위에 있는 쓰레기통 버튼을 누르면 위젯이 삭제된다. 이번 앱에는 저번에 만든 앱을 기반으로 만들어진다. 위젯의 이동에 대해서는 저번 글에 참고하자. 2023.07.05 - [단기 프로젝트] - Flutter 화면에서 드래그로 위젯 이동시키기 (프로젝트1_2) ..

이번 글에서는 화면 안에서 위젯을 어떻게 이동시키는지 알아본다. 앱을 완성하면 다음과 같이 드래그로 위젯을 이동시킬 수 있다. 위젯을 움직이기 위해 이 앱에서는 Stack, Positioned, GestureDetector를 사용한다. Stack : Stack은 children 안에 있는 위젯들을 쌓아 올리는 위젯이다. Positioned : Positioned 위젯은 child 안에 있는 위젯이 위치할 곳을 지정해 준다. GestureDetector : GestureDetector는 사용자가 화면과 상호작용하는 것을 감지하고 그것에 대한 데이터를 넘겨준다. 위젯 트리는 다음과 같다. Stack안에 자식 위젯으로 2개의 Positioned 위젯을 가진다. 각각의 Positioned 위젯은 position..

이전 글에서페이지 이동에 관련하여 2가지 글을 작성했다. 2023.06.24 - [단기 프로젝트] - Flutter PageView 위젯 - 프로젝트 1_2 Flutter PageView 위젯 - 프로젝트 1_2 오늘은 PageView 위젯에 대해 알아보도록 하자 PageView 위젯은 여러 위젯을 페이지를 통해 구분해주는 위젯이다. children 파라미터 안에 위젯들을 넣어주면, 앱에서 슬라이드를 통해 페이지 넘기듯이 ti-project-11.tistory.com 2023.06.26 - [단기 프로젝트] - Flutter NavigationBar - 프로젝트 1_2 Flutter NavigationBar - 프로젝트 1_2 저번 글에서는 페이지 간의 연결을 위해 PageView Widget을 이용했다..

이번 글에서는 저번 글에서 살펴 본 ImagePicker를 이용해 비디오를 불러오고 재생하는 앱을 만들어본다. ImagePicker에 대해선 저번 글을 살펴본다. 2023.06.30 - [단기 프로젝트] - 갤러리에서 이미지를 선택하는 flutter ImagePicker (프로젝트 1_2 ) 갤러리에서 이미지를 선택하는 flutter ImagePicker (프로젝트 1_2 ) 이번에는 갤러리에서 이미지를 선택하는 ImagePicker에 대해 알아본다. 기능은 다음과 같다. 1) 홈 화면에서 floating action button을 클릭하면 선택할 수 있는 갤러리로 넘어간다. 2) 갤러리에서 사진을 ti-project-11.tistory.com 우선 pubspce.yaml에서 video_player를 추..

이번에는 갤러리에서 이미지를 선택하는 ImagePicker에 대해 알아본다. 기능은 다음과 같다. 1) 홈 화면에서 floating action button을 클릭하면 선택할 수 있는 갤러리로 넘어간다. 2) 갤러리에서 사진을 선택하면 이미지를 띄우는 화면으로 넘어간다. 다음은 완성한 앱의 화면이다. 시작화면은 아직 이미지를 선택하지 않은 상태이다. 여기서 아래 버튼을 클릭하면 갤러리 화면으로 넘어간다. 갤러리 화면에서 사진을 클릭하면 화면에 사진이 뜬다. 이 상태에서 버튼을 다시 누르면 다른 이미지를 선택할 수 있다. 이제 앱을 만들어보도록 하자 우선 pubspec.yaml로 들어가서 dependencies 안에 image_picker를 추가해 준다. 이후에 android/app/src/main 폴더에..

저번 글에서는 페이지 간의 연결을 위해 PageView Widget을 이용했다. 이번 글에서는 TabBarView와 BottomNavigationBar 위젯을 이용해 페이지 간의 이동을 구현해 본다. 먼저 TabBarView와 BottomNavigationBar에 대해 알아본다. 1. TabBarView TabBarView는 각각의 Tab에 해당하는 화면을 지정해 주는 위젯이다. 여기서 Tab은 일종의 버튼이라고 이해하면 편하다. TabBar는 여러 개의 tab이 모여있는 위젯이다. TabBar와 tab, 그리고 TabBarView에 대한 관계를 나타내면 다음과 같다. Tab이 여러 개 모여있는 위젯을 TabBar라고 하고, 각각의 Tab은 하나의 페이지와 연결이 되어 있다. TabBarView는 Tab..