[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 3
시리즈 목록
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 1 바로가기
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 2 바로가기
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 3 현재포스트
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 4 바로가기
저번 시간에 텍스트를 바꾸는 기능까지 구현했다
이어서 색상을 글자의 색상을 랜덤으로 변경하는 버튼도 구현해보자

저번에 만들어둔 어플리케이션이다
여기에 이어서 작성한다
일단 색상을 바꿔줄 버튼을 하나 추가하도록 한다

Row 밑에 버튼을 하나 만들어주자
이번에는 아이콘 버튼을 만들어보도록 하자

아이콘 버튼을 만든다
구조는 ElevatedButton과 유사하다
적용하면

이렇게 버튼이 추가된걸 볼 수 있는데
버튼이 또 붙어있는 느낌이라 석연치가 않다
좀 떨어뜨려주자
이번에도 Sizedbox를 사용한다

이렇게 추가하고 나면

이렇게 떨어진 것을 볼 수 있다
이제 텍스트 색상의 변경을 위해
속성을 좀 지정해두자

우리는 앞서 텍스트에 스타일을 지정해두었다
기억이 안난다면 나와 비슷한 코드를 찾아보길 바란다
이 코드에 color: 옵션을 지정하면 글자색을 지정할 수 있다
위 처럼 색상을 지정해보자

텍스트가 빨간색으로 변경된것을 알 수 있다

다른 글자를 눌러도 색상은 빨간색으로 지정되어있다
이제 색상을 랜덤으로 바꿀 수 있도록 함수를 만들어보자
랜덤한 값을 만들어낼때는
특정한 패키지가 필요하다
최 상단에

import 'dart:math';
이 패키지를 import 시켜준다
여기서 처음 import를 하게 되는데
import란 다른 기능들이 담긴 파일을 불러와 해당 파일의
함수 또는 기능들을 이용하기 위한 선 작업이다
이번에는 dart 패키지의 math 라이브러리가 필요하므로
저렇게 불러와준다
옆에 Unused 경고는 안쓰고 있는 패키지는 지우라고 뜨는건데
어차피 쓰면서 없어질 경고이기 때문에 무시한다
다만 이때 저장을 하면 vscode가 알아서 안쓰는 패키지를 지워버리므로
저장하지 않고
함수를 작성한 다음 저장하도록 한다

일단 변수를 하나 만들고 색상을 지정해준다
플러터는 색상도 변수로 만들 수 있다
변수를 분해하자면
Color : 변수의 형태
textColor : 변수 이름
Colors.black : 검은색
이로써 textColor 변수는 검은색을 가지게 되었다
그러면 이게 실제로 적용되는지 한번 보자
우리는 지금 글자를 빨간색으로 설정했는데
text의 속성중 color에 빨간색 대신 textColor 변수를 지정한다

또 Invalid constant value 오류가 생겼다
해당 오류는 부모에 생긴 const 때문이라고 전에 말한적 있다
현재 color의 부모는 TextStyle이므로 앞에 적힌 const를 삭제해준다
또 까먹었을 수 있는 사람을 위해 간단하게 const를 설명해주면
변하지 않는 데이터들은 const를 사용해 감싸주도록 되어있다
하지만 현재 color는 계속 변화할것이므로 const를 사용할 수 없다

이제 화면을 보자
글자색이 검은색으로 변한것을 확인할 수 있다

자 이제 모든 준비는 끝났다
이제 해야할 작업은 크게 두가지로 나눌 수 있다
1. 색상을 랜덤으로 바꿔줄 함수 생성
2. 버튼에 함수 연결
앞서 import 시킨 dart:math 라이브러리를 사용할 때가 되었다
근데 최 상단으로 올라가보면
패키지 import가 삭제되었을 수 있다
없으면 다시 작성해주도록 하자
그 다음 함수를 만든다

랜덤한 색상을 가져오는 함수를 하나 만들었다
해당 함수를 설명해보자면
해당 함수는 랜덤한 색상을 만들어내는 함수로
반환 형태는 Color로 색상을 반환한다
getRandomColor() 는 함수의 이름이다
return Color() 는 괄호 안에 작성된 내용을 처리하고 반환한다는 뜻이다
Random().nextDouble() 는 dart:math 에 포함된 메서드로
0.0 ~ 1.0 사이의 랜덤한 실수를 반환한다
여기서 처음보는 Double이 나오는데
플러터에서 숫자를 처리할때는
정수와 실수가 대표적이다
정수 (Int) | 실수 (Double) |
음수를 포함한 소숫점 없는 숫자 | 음수를 포함한 소숫점 있는 숫자 |
이렇게만 알고 가자
어차피 개발하면서 정말 많이 마주할것이기 때문에
자세한건 쓰는법을 익히고 이론을 배워가는 형태로 알아가기를 바란다
따라서
Random().nextDouble(): 는
0.1 ~ 1.0 사이의 랜덤한 실수를 반환하는 코드라고 생각하면 된다
0xFFFFFF 는
16진수로 표현된 흰색을 뜻한다
보통 RGB 라고 많이 부르는데
R : Red
G : Green
B : Blue
세가지로 나뉜다
이 값들은 255까지 가질 수 있는데
너무 복잡한 얘기니 생략하고
앞서 0.1 ~ 1.0 사이 실수값을 얻은 다음 흰색에 곱해 새로운 색을 만들어낸다
.toInt(): 는 실수값을 정수로 변환하는 일을 한다
쉽게 얘기해 1.0 을 1로 변환하는것이다
결과적으로
0부터 0xFFFFFF 사이의 랜덤한 정수 값이 생성되게 된다
withOpacity(1.0): 이건 투명도 설정인데
1.0 은 완전 불투명을 뜻한다
사실 생략해도 상관없다
요약하자면
0부터 0xFFFFFF 사이의 랜덤한 정수를 이용해 랜덤한 색상을 뽑아낸다

랜덤한 색상을 만들었으면 뭐 할 수 있겠나
실제 적용을 해봐야지
적용하는 함수도 만들어준다
이때 화면이 갱신되어야 색이 변하니까
setState를 사용해준다
함수를 간단하게 설명하자면
changeTextColor는 아무것도 반환하지 않는 함수로
textColor에 getRandomColor 함수에서 얻은 랜덤한 색상을 집어넣는다
그리고 setState로 화면을 갱신한다
우리는 앞서

text의 색상을 동적으로 바꿀 수 있게 변수를 연결해놨다
이제 저 함수를 버튼에 연결해 실행하면 변수의 값이 달라질것이다

이제 버튼에 연결했다
작동하는 로직을 잠깐 설명하자면
버튼을 눌렀을때 onPressed가 작동해
changeTextColor 함수가 실행된다
해당 함수는
getRandomColor 함수를 실행하고
getRandomColor 함수는 랜덤한 색상을 반환한다
여기서 반환된 랜덤한 색상은 textColor 변수에 대입되게 되며
최종적으로
text 의 Style 속성에 지정된 Color 옵션에 textColor 값이 변하게 되어 글자색이 변한다
마지막으로 setState를 통해 화면을 갱신해준다

이제 아까 만들어둔 아이콘 버튼을 클릭하면 색상이 랜덤으로 변하는것을 볼 수 있다
물론 나랑 색은 다를거다
끝내며
오늘은 짧지만 복잡한 과정이 좀 있었다
차근차근 읽어보며 복습하기를 바란다
다음 포스팅에서 보도록 하자
벌써 기능을 4개나 만들었다
어마어마하지 않은가
시리즈 목록
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 1 바로가기
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 2 바로가기
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 3 현재포스트
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 4 바로가기