[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 2
시리즈 목록
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 1 바로가기
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 2 현재 포스트
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 3 바로가기
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 4 바로가기
오랜만이다
추석에 너무 많이 먹어 나태해져있었다
바로 본론으로 들어가보자
저번에 우리는
여기까지 만든것으로 기억하고 있다
오늘은
버튼을 만들고
버튼을 누르면 텍스트를 바꿔보는 시간을 가지도록 하겠다
그러면 일단 버튼부터 만들어야겠지?
저번에 만들었던 main.dart 에서 진행한다
body에 코드를 추가한다
잘 봐두자
Row 바깥에 작성했다
이렇게 작성하면
Column의 자식이 되어 Column의 영향을 받는다
다시말해
세로로 작성된다는 얘기다
그리고
Invalid Constant value 오류가 있는데
이건 해결하기 쉽다
Column 을 보면 앞에 const가 작성되어 있다
저걸 지우면 오류가 해결된다
Column 앞에 있는 const를 지우면
이렇게 여러줄에 경고가 뜨는것처럼 보이는데
상관없다
그럼 여기서 const에 대해 잠깐 공부하고 가자
/ 알 필요 없으면 다음으로 넘어가라 /
==START==
플러터에서 Const란 변하지 않는 데이터 같은거에 사용된다
예를 들어
변하지 않는 텍스트라던지
텍스트의 색상 , 사이즈 라던지
반대로 Const가 있으면 데이터는 변화할 수 없다
버튼은 누르면 무언가가 변화하거나 하는 액션이 취해지므로
Const가 있으면 데이터가 변화될 수 없어
앞에서 본
Invalid Constant value.
오류가 생기는것이다
==END==
이제 저장해주면
오류는 없어질 것이고
화면에는
이렇게 버튼이 하나 생길것이다
해당 버튼은
아무런 기능이 없으며
그냥 누를수만 있다
그러면 Row에 버튼을 옮겨볼까?
· 안따라해도 된다 그냥 보기만해라
나중에 바꾸기 귀찮아진다 ·
코드는 이렇게 작성될 것이다.
이러면 화면은
위에 있는 Row의 자식이 되어
Row의 영향을 받은 바람에 두개가 가로로 세팅되어버렸다
기억해둬라
어떤 부모의 영향을 받냐에 따라 결과는 달라진다
그러면 원래대로 돌려두고
버튼을 좀 여러개 넣을 생각이니까
Row를 사용해 버튼을 안에 넣는다
Row를 하나 만들고
밑에 있는 ElevatedButton을 옮긴다
Row안에 정상적으로 넣었고
이때 화면은
다음과 같을 것이다
이제 버튼 몇개를 추가해주자
코드 복붙해도 상관없으니
미리 만들어둔 버튼을 사용한다
화면은
이렇게 될 것이다
근데 왼쪽에 몰려있어서 좀 불편하다
전에
mainAxisAlignment 에 대해 공부한 적이 있다.
기억 안난다면
비 전공자도 텍스트컨트롤 할 수 있다 - 1
포스팅을 참고하길 바란다
무슨 옵션을 사용하던 상관은 없지만
필자는
MainAxisAlignment.spaceEvenly 옵션을 적용했다
기능 구현에는 아~무런 영향이 없으니
원하는 옵션을 적용하면 된다
그런데 텍스트랑 너무 붙어 있어서 맛이 안산다
좀 떨어지게 만들어보자
어디에 배치했는지 잘 보길 바란다
Row와 Row사이에 SizedBox를 배치했다
그리고 옵션으로 height를 100 줬는데
이러면 Row 와 Row 사이에 높이 100만큼의 빈 공간이 생긴다
다만 주의하길 바란다
sizedbox를 너무 많이 남용해 UI를 배치하면
이빨 사이를 이쑤시개로 너무 쑤셔
사이가 벌어지고 다른 이빨에도 영향을 주는것처럼
모든 UI에 영향을 주게 되고
사용하는 핸드폰마다 화면 크기가 달라
원하는대로 구현이 안 될 가능성이 높다
지금은 간단하게 구현하는거니까
사용하도록 하지만
가급적이면 UI의 배치는
Margin과 Padding을 사용하기 바란다
버튼을 조금 더 디자인 해보자
버튼에 속성을 넣어봤다
텍스트는 속성을 지정할때
style 옵션과 TextStyle() 위젯을 사용했지만
버튼은 ButtonStyle() 위젯을 사용한다
코드를 설명해보자면
배경색을 변경하는 코드인데
버튼이 눌렸을때는 빨간색 기본 색은 파란색
이렇게 작성되어 있다
나머지 버튼도 비슷하게 만들어보길 바란다
해당 스타일 옵션은 텍스트파일로 첨부해두겠다
굳이 따라칠 이유가 없어 파일로 첨부하니
따라치고 싶으면 따라치고
아니면 복붙해서 써도 된다
글자 디자인이 끝났으면
이제 텍스트를 바꿀 준비를 해보자
여기까지 오는데 참 오래걸렸다
오늘은 내용이 좀 길어도 끝까지 따라오길 바란다
여기서 끊으면 비빔면 한봉지 같은 느낌이 날게 뻔하다
상단에 텍스트 변수를 하나 만들자
예전에도 설명했지만 다시한 번 설명한다
String text = '가지고 놀 텍스트임';
여기서 String은 변수의 형태다
사람으로 치면
김 이 박 최 같은거라고 이해하면 편하다
text는 이름 같은 거다
길동이라던지 영희라던지
= 는 대입을 의미한다
비 전공자가 볼때 = 는 결과를 나타낸다고 생각할 수 있다
예를 들어 1 + 1 = 2 이런것처럼 말이다
근데 프로그래밍에서
= 는 대입을 뜻한다
1 + 1 = 2 이걸 프로그래밍으로 해석하면
말도 안되지만 1+1 에 2를 넣으란 얘기랑 같다
그럼 프로그래밍에서 같다는 어떻게 쓰냐고?
=를 두개 쓴다
==
정리
| 대입 | 같다 |
| 1 + 1 = 2 | 1 + 1 == 2 |
변수를 만들었으니까
이제 직접 사용해보자
이렇게 기존에 만들어둔
가지고 놀 텍스트임 을 변수 이름으로 바꿔주면 된다
기억하자
constant 오류가 발생하면 부모위젯에 있는 const를 지우면 해결된다
거슬러 올라가보니
Text 위젯의 부모는 Row 위젯으로 앞에 Const가 붙어있다
저걸 지우면 오류가 해결된다
이제 저장해보자
화면에 변화가 없다
오류가 생긴건가?
아니다 text 변수의 내용을 바꿔보자
그러나 변한게 없다
이제
리 스타트 혹은 핫 리로드를 눌러보자
잘 변하는걸 확인할 수 있었다
왜 바꾸자마자 변하지 않느냐 라고 물어본다면
플러터는 기본적으로
데이터가 변화했다고 화면을 새로 만들어주지 않는다
이때는 Provider 라는 패키지 혹은 Rapid 혹은 SetState 등을 사용해
화면을 갱신하라고 알려줘야만 한다
왜 이런 구조를 가지게 됐느냐 라는 의문이 생기면
구글에 찾아보거나 플러터 개발자한테 물어보도록 하자
필자가 그냥 추측하건데
너무 많은 데이터가 계속 갱신되면
리소스를 너무 많이 잡아먹어서 그런게 아닐까? 한다
이제 텍스트도 변화시켰겠다
버튼을 누르면 바뀌게만 하면 끝인거다
일단 원래 형태로 텍스트를 바꿔놓도록 하자
지우고 할 필요 없다
CTRL + Z를 이용하자
막간상식
뭘 하던 뒤로가기 앞으로가기는 알아두길 바란다
| 뒤로가기 | 앞으로가기 |
| CTRL + Z | CTRL + Y |
이제 텍스틀 바꿔줄 함수를 하나 만든다
함수에 대해 전에도 설명했지만
다시한번 설명하자면
특정 기능을 반복적으로 사용하거나
특정한 상황 혹은 다양한 상황에 사용하기 위해
코드를 뭉쳐놓고 작성해둔 모음집 같은거라 보면 된다
함수를 하나 만들었다
changeText1()
함수를 다시 설명하자면
void는 반환하는게 없을때 사용한다
여기서 반환이란
예를 들어 함수가 어떤 계산을 하고 값을 다른데 줘야할때 반환한다 라고 한다
예를 들어
1+1의 결과를 반환해야한다면 void를 적지 않는다
지금처럼 뭔가 계산하거나 다른 함수에 돌려줘야할게 없는 함수는
void를 사용해 반환할게 없다고 명시해주는게 좋다
changeText1 이건 함수 이름이다
함수 이름을
a , b , c , d 이런식으로 만들 수도 있는데
변수도 그렇고 함수도 그렇고 그렇게 만들지 마라
나중에 유지보수할때도 힘들고
오류를 수정할때도 힘들다
함수나 변수를 만들땐
알아볼 수 있게 만들자
혼자 연습할거니까 a , b , c , i ,. j 이런거 쓰겠다고?
써라 상관없다
다만 현업에서 저렇게 쓰면
내일은 침대로 출근할지도 모른다
앞서 내가 화면의 갱신을 요구하려면 setState 같은걸 써야한다고 했었다
다른 패키지 설치하는건 나중에 어차피 알려줄테니
지금은 플러터 기본 탑재기능인 SetState를 사용해준다
이때 명심할게 있다
전에도 설명했지만
플러터에는 Stateless 위젯과 Stateful 위젯이 있다
화면을 갱신하거나 해야한다면 Stateful 위젯을 사용하자
Stateless 위젯은 SetState를 사용할 수 없다
함수를 요악하면 이렇다
changeText1() 함수가 실행되면
text 변수의 내용을 '텍스트 바뀜?' 으로 대입해라
즉 text 변수의 내용을 바꾸고 화면을 갱신하라고 플러터한테 명령하는거다
자 이제 함수를 만들었으니
버튼에 연결해보자
버튼에 보면 onPressed 가 있는데
이건 버튼이 눌렸을때
: 뒤에 있는걸 실행하라는 얘기다
지금은 () {} 가 있는데
이걸 바꿔준다
아까 만들어둔
changeText1 을
onPressed 에 작성한다
이러면 버튼이 눌렸을때 함수가 작동할것이다
텍스트가 바뀌는 것을 볼 수 있다
이제 함수를 복사하고 이름을 바꾼다음
다른 버튼 두개에도 연결해보자
코드 첨부는 안한다
그정도는 알아서 하자
끝내며
여기까지 따라왔다면 박수를 쳐주고 싶다
간단하게 생각해도 여간 어려운게 아니다
그리고 지금 만들어보는 기능들이 결국 어디에 쓰이냐고?
나중에 당신이 앱 만들때 하나의 기능으로 사용될 수도 있다
아님말고
다음 포스팅에서 보자
시리즈 목록
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 1 바로가기
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 2 현재 포스트
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 3 바로가기
[플러터] 비 전공자도 텍스트 컨트롤 할 수 있다 - 4 바로가기