[비전공자] 직장인 앱 개발 도전기 #3 안드로이드 스튜디오 onPressedFunction 오류

코드는 이상이 없지만, 자꾸 상수선언이 되지 않았다고 오류가 난다.

19번째 줄의 "onPressed: onPressedFunction" -> Invalid constant value

Final이란 함수도 변하지 않는 변수를 선언하는 것으로 알고 있는데 왜 이런 오류로 나아가질 못할까. 이럴 때는 구글링을 통해서 계속 찾아보고 공부해야한다.

유레카.

출처 : https://www.inflearn.com/questions/729552/52%EA%B0%95-4-50%EC%B4%88-%EB%B6%80%EB%B6%84-onpressed-%EB%92%A4%EC%97%90-%ED%95%A8%EC%88%98%EB%B6%80%EB%B6%84%EC%97%90-%EB%B9%A8%EA%B0%84-%EB%B0%91%EC%A4%84-%EC%97%90%EB%9F%AC%EB%A1%9C-%EB%B2%84%ED%8A%BC%EC%9D%B4-%EC%95%88%EA%B7%B8%EB%A0%A4%EC%A7%91%EB%8B%88%EB%8B%A4

52강 4:50초 부분 onPressed 뒤에 함수부분에 빨간 밑줄 에러로 버튼이 안그려집니다. - 인프런

주변 코드에 const가 들어있다면 일단 지워봐라?

맨 위 15번째 머티리얼앱을 정의할 때 const가 사용되었다. 우선 지워보았다. 빨간줄 오류가 해결되었다. 아직도 갈길은 너무나 먼것같다. 오류를 모두 지웠으니 드디어 실행할 때가 온 것 같다.

실행화면

마우스를 클릭했을 때 효과

기본 TextButton을 무사히 연습하고, 다음 OutlinedButton 실습

OutlineButton 코딩

OutlineButton 실행(좌), 실행 후 마우스 클릭시(좌)

반응형

OnPressed오류를 해결하고하니 위젯 연습이 일사천리로 진행되고 있다. 코드를 지금 파고들 필요는 없을 것 같다. 순환, 그리고 또 순환, 또 순환하며 연습하면 좋은 결과로 이어질 것이다. 이어서 마지막 ElevatedButton을 실습해보자.

ElevatedButton 코딩

ElevetedButton 실행 후(좌), 마우스를 클릭하였을 때(우)

그런데 버튼이 왜 둥글둥글하게 나오는걸까? 책에서는 네모처럼 나오는데, 일단 설명 자체가

TextButton : 텍스트만 있는 버튼

OutlineButton : 테두리가 있는 버튼

ElevatedButton : 입체적으로 튀어나온 느김의 배경이 들어간 버튼

이라고 설명되어있다. 도형의 성질의 궁금증은 잠시 묻어두고 다음 쳅터로 넘어가야겠다.

 

2. 아이콘 버튼 위젯

아이콘을 버튼으로 생성하는 위젯이며, OnPressed 매개변수에 IconButton을 누르면 실행할 콜백 함수를 제공할 수 잇다고 한다. 아직까진 무슨 뜻인지 잘 이해가 안된다. 아이콘은 글리프 기반의 아이콘을 사용할 수 있다고 하고 Icons클래스를 통해 플러터에서 제공하는 기본 아이콘들도 사용할 수 있다고 한다.

여기서 말하는 글리프 기반의 아이콘이란 무엇인가?

글리프 기반(Glyph-based)은 글꼴(Font)에서 사용되는 텍스트 표현 방식입니다. 글리프는 글꼴에 포함된 각각의 문자 혹은 기호를 나타내는 단위입니다.

글리프 기반 텍스트 표현 방식은 문자를 그래픽 형태로 표현하는 방식으로, 각 글리프는 문자의 시각적인 형태를 정의합니다. 글리프는 특정 크기와 위치에 배치되어 텍스트를 구성하게 됩니다.

글리프 기반 텍스트 표현 방식은 폰트에 의존하기 때문에, 각 글리프는 해당 폰트에 포함되어 있어야 합니다. 따라서 텍스트를 표시할 때 사용하는 글꼴을 제공해야 하며, 글꼴에는 문자와 기호에 대한 글리프들이 포함되어 있어야 합니다.

글리프 기반 텍스트 표현 방식은 다양한 언어와 문자 체계를 지원할 수 있습니다. 각 언어와 문자 체계에 따라 다른 글리프들이 필요하며, 글꼴은 이러한 다양한 글리프들을 제공하여 해당 언어와 문자 체계를 표현할 수 있도록 합니다.

글리프 기반 텍스트 표현 방식은 컴퓨터 그래픽스와 디자인, 타이포그래피 등 다양한 분야에서 사용되며, 우리가 일상적으로 사용하는 글자를 시각적으로 표현하는 데에 중요한 역할을 합니다.

텍스트 표현방식이지만 시각적인 형태를 정의한다? 상당히 새롭지만 몸소 해보지 않는한 어떤 의미인지 모르겠다. 아래는 글리프 기반의 아이콘을 무료료 사용할 수 있게 해놓은 구글 폰트 홈페이지이며, 약 2,500가지의 아이콘이 들어있다.

https://fonts.google.com/icons 

Material Symbols and Icons - Google Fonts

우선, 구글폰트 홈페이지로 가서, 다양한 아이콘들을 확인하고, 작업을 진행해 보았다. 오른쪽 탭을 보면 Web, Android, iOS 세가지 타입의 코드를 제공하고 있다. 지구의 아이콘을 한번 가져와 보도록 하겠다.

코딩과 실행화면

18번째 줄에 IconButton을 입력하고, 20번째 icon을 정희하고, 21번째 아이콘을 불러온다. 20번째 줄에서 왜 자꾸 const에러가 나는지 모르겠다. 강의에서는 const를 굳이 입력할 필요는 없다고 하지만 안드로이드 스튜디오는 계속 오류가 난다. 상수선언에 대한 오류라고했지. 더 자세히 알아봐야 할 것 같다.

홈페이지 오른쪽 아이콘 이름을 21번째 icons.(아이콘 이름)을 입력하니 깔끔하게 잘 생성된다.

오늘은 각종 버튼위젯에 대해 공부했다.  다음 시간은 제스처 위젯에 대한 실습을 이어나가야겠다.