이번 포스팅에서는 안드로이드 스튜디오 색상 선택 화면 만들기를 해 보도록 하겠습니다. 안드로이드 스튜디오에서 우리가 만들 앱은 노트 앱입니다. 내가 작성하는 노트가 색상에 따라 구별이 되도록 해 가독성을 높이는 기능을 추가하는 것입니다. 이렇게 하면 노트를 항목별로 구별하기도 쉬울 뿐더러 가독성 또한 매우 좋아지게 됩니다.
지난 시간에는 안드로이드 스튜디오(다운로드 링크) 를 이용해서 새롭게 노트를 작성할 수 있는 페이지를 만들었습니다. 새로운 노트 페이지 작성방법이 궁금하신 분들은 이전 글을 참고해 주세요. 노트 본문 작성 화면 만들기
안드로이드 스튜디오를 사용해서 사용자가 직접 노트 색상을 선택할 수 있는 기능을 추가해 노트 색상 선택 화면을 만들어 보는 시간을 갖도록 하겠습니다. 안드로이드스튜디오에서 note.edit.page.dart 페이지에서 색상을 저장할 공간을 선언합니다.
지금부터 저와 함께 노트 색상 선택 페이지를 직접 만들어 보도록 하겠습니다.
안드로이드 스튜디오 노트 색상 선택 화면 만들기
먼저 지난시간에 작성했던 안드로이드스튜디오 simple_note파일을 열어주세요. 지난번에 lib 폴더에 Page 폴더를 만들고 그곳에 노트화면을 직접 편집할 수 있는 noteEditPage.dart 파일을 만들었습니다. 그곳에서 색상을 선택할 수 있는 화면을 이어서 만들어 보도록 하겠습니다.
먼저 note.edit.page.dart 페이지로 이동해서 색상을 저장할 공간을 선언해 주어야 합니다.
이어서 화면의 배경에 선택한 색상이 표현될 수 있도록 기존에 작성되어있던 코드를 수정해 보도록 하겠습니다. SingleChildScrollView 속성에 커서를 두고 Alt+enter를 눌러서 Wrap with Contaioner 버튼을 클릭합니다.
SingleChildScrollView 위젯은 지난시간에 작성했었죠? 핸드폰 화면공간에 입력 공간을 초과했을 때 오류가 났었는데요. 이 문제를 해결하기 위해 입력 공간이 초과되면 스크롤 기능이 동작해서 위아래로 스크롤을 통해 입력 내용이 오류없이 입력되고 출력되도록 하는 역할을 했었습니다. 이 부분이 Body영역에 전체적으로 감싸지도록 설정을 했었는데요. 이번에도 마찬가지로 이 body 부분 전체에 색상을 적용하도록 하기 위해 Wrap with Container로 감싸주는 작업을 한번 더 실행해 주어야 합니다.
그리고 이곳에 위에서 추가한 color 값을 넣어줍니다. 코드를 이렇게 추가해 주면 화면에 선택한 배경색상을 표시할 수 있게 되었습니다.
배경색을 선택할 수 있도록 Appbar에 추가해 보도록 하겠습니다.
버튼이 눌렸을 때 실행할 함수를 구현하기 위해서 Build함수 아래에 추가를 해 줍니다.
포커스매니저를 사용해서 포커스를 잠시 해제해서 다이얼로그를 입력전에 소프트키보드가 내려갈 수 있도록 설정합니다. 소프트키보드가 올라와 있으면 다이얼로그를 표시할 공간이 없어지기 때문입니다.
ShowDialog 함수를 사용해서 다이얼로그를 표시합니다.
ontap 항목이 선택되었을 때 _applyColor 함수를 만들어 줍니다.
onTap 속성에 applycolor를 지정해줍니다.
다른 색상을 복사 붙여넣기로 지정해 줍니다.
마지막으로 Appbar에 배경색 버튼을 누르면 다이얼로그를 띄워주도록 설정해 줍니다.
안드로이드 스튜디오 애뮬레이터를 실행해서 색상 선택 화면이 제대로 동작하는지 확인해 보도록 하겠습니다. 오른 쪽 상단에 배경색을 선택할 수 있도록 팔레트 모양의 아이콘을 클릭해 보도록 하겠습니다.
body 컨터이너에서 Wrap with sizedbox를 선택합니다.
SizedBox.expand를 설정하면 됩니다.
아래 완성된 화면입니다.
지금까지 안드로이드 스튜디오를 활용해 색상 선택 화면을 만들어 보았습니다.