[Flutter]Memo App Project_(1)

간단한 메모장을 만들어 볼 거임!

1. 다른 페이지 가져오기 - Navigator Push

 

2. 리스트 뷰 생성하고 나열하기 - ListView

 

3. 메모 쓰기 페이지 만들기 - TextField와 AppBar

---

1. 다른 페이지 가져오기 - Navigator Push

lib에 다른 directory 만들기! database와 screens 두 개를 만들었음. 이번 시간엔 screens directory만 다룬다.

---

main.dart의 길이를 완전 줄였다. 

14번째 줄을 보면 theme를 설정한다. 

Flutter의 경우 ThemeData를 통해서 전체적인 Theme을 설정할 수 있다. 그런데 색상을 하나하나 조절하는 건 일임.

그래서 primarySwatch 속성 값을 통해 전체적인 Theme를 설정한다.

primarySwatch는 미리 제공되는 색을 뜻하며, Colors 클래스에 정의된 다양한 색을 사용할 수 있다. (Material Design 참고)

나중에 확인해보면 알겠지만, primarySwatch에 Colors.blue로 설정했기 때문에 완성된 화면이 blue Theme을 띈다.

 

* Navigator에 관한 자세한 설명은 첨부한 링크를 보고 참고!(Navigator)

"Add Memo" 버튼을 누르면 새로운 화면이 떠야하니깐 home.dart는 stateful하게 만든다.

FloatingActionButton은  flutter 프로젝트를 생성하면 기본으로 주어지는 코드에 이용되는 위젯이다.

화면 하단에 둥근 버튼으로 onPresssed 속성을 설정하지 않으면 쓸 수 없는 버튼이 된다. (docs으로 더 자세히 보셈)

 

edit.dart는 우선은 그냥 파란 화면이 띄게끔 만들었다.

---

완성본!

01

 전체적으로는 파란 theme고, 저 빨간색으로 동그라미 해둔 버튼을 누르면 전체 화면이 파란색으로 변한다.

---

2. 리스트 뷰 생성하고 나열하기 - ListView

 

처음에는 list안에 container를 넣어서 나열하는 식으로 만듬. 그래서 보여지는 페이지는 아래와 같다.

 

 

근데 이걸 container 여러 개를 사용해도 되지만 저렇게 반복적인 수행일 경우엔 그냥 "..." 쓰는게 더 좋음.(...는 반복)

밑에 빨간색

 

그래서 return 값이 list인 loadmemo 만들고 그 안에 .add로 리스트 내용 추가 시켜준다.

그럼 아래와 같이 화면이 뜸.

 

---

3. 메모 쓰기 페이지 만들기 - TextField와 AppBar

위에서는 간단한 페이지 디자인이랑 버튼 클릭하면 새로운 페이지로 이동하게끔 해놨고 이번엔 실제 메모 페이지를 만들어보자..!

 

AppBar

먼저 AppBar를 먼저 만든다. AppBar란 앱의 상단 제목 줄을 의미한다. 자세한 것은 Docs 참고!

출처: https://security-nanglam.tistory.com/481

AppBar 안에 누를수 있는 Icon(IconButton) 2개를 만들어서 하나는 delete 기능을, 다른 하나는 save 기능을 부여한다. 

그럼 밑에 add memo 누르면 화면 상단 바에 두 개의 아이콘이 뜸. (아 그리고 main에서 전체 테마랑 색 바꿨다)

 

01

 

body

이건 메모장 화면, 2개의 TextField로 구성되있음. 제목용 텍스트 필드랑, 내용용 텍스트 필드. 각 필드 사이에는 20 정도 패딩 넣어줌. 실행시키면 다음과 같은 화면이 뜬다. 

원래는 keyboardtype 설정을 안해서 글을 쓰면 가로로만 진행이 됬는데, keyboardtype을 multiline으로 설정해서 글씨가 밑으로 내려올 수 있게 함.

---

완성본!

 

! 근데 오버플로우가 발생하긴 함