아직 플러터 개발환경 설정이 다 끝나지 않았다면? -> 개발환경 설정하러 가기!
반갑습니다 여러분! 코딩백조입니다🦢
플러터 개발 환경 설정이 끝났다면!!
드디어 실제로 앱을 만들 수 있게 되었습니다! (짝짝~~)🙌
앞으로 몇 개의 포스트와 간단한 프로젝트들을 통해 다트 언어와 플러터 사용법을 알려드릴 예정입니다.
이해가 되지 않는 부분은 언제든 댓글로 달아주시기 바랍니다.ㅎㅎ
자, 그러면 시작해볼까요?
위젯이란?
앱을 하나 열어볼까요? 무엇이 보이나요?
여러 사진, 엄청나게 많은 글자들, 아이콘, 버튼, 입력 창 ... 굉장히 다양한 요소가 존재합니다.
이 모든 것은 플러터에서 "위젯" 이라 불립니다.
위젯은 주어진 데이터를 통해 화면이 어떻게 그려질 지 알려준다.
심지어는 빈 앱 자체도 하나의 위젯이라는 사실!
그러면 위젯의 종류가 어엄청 많겠죠?👀
위젯 분류하는 법!
우리는 앞으로 다양한 위젯을 사용해서 앱을 만들게 될 겁니다. 그런데 어떤 위젯이 있는 지 모른다면 참 곤란하겠죠?
오늘은 플러터에 어떤 종류의 위젯이 있는지 알아보는 시간을 가지도록 하겠습니다.
단순하지만 중요한 기준 하나를 제시해 드릴게요.
이 위젯, 눈에 보여요?
플러터에는 보이는 위젯과 보이지 않는 위젯이 나눠져 있습니다.
그게 뭐냐구요?🤔
보이는 위젯은 사용자에게 정보를 보여주는, 글씨와 사진 같은 것입니다!😎
보이지 않는 위젯은 숨어서 다른 위젯의 크기나 배치, 여백 등을 정해줍니다.🔲
결론! 보이지 않는 위젯으로 모양을 잡고, 그 안에 보이는 위젯을 넣어주는 식으로 화면을 그릴 수 있습니다.
설명은 여기까지만 하고, 예시를 통해서 배워볼까요?ㅎㅎ
보이는 위젯
AppBar
앱바 가 뭐지? 라고 생각하실 거에요.
사진을 보면 이해가 잘 되실 겁니다!
앱바는 이런 식으로 앱의 맨 위에 있는 '상단바' 를 의미합니다!
보통은 이 앱에 대한 설명을 제공하거나 추가적인 동작을 제어할 수 있게 도와주는 역할을 하죠.
이 친구는 title이라는 속성을 필요로 합니다. (지금은 읽고 넘어가도 돼요!😉) 말 그대로 제목을 지어줘야 하는 것이죠! 사진에서는 제목이 그냥 "Title"이네요ㅎㅎ
Elevated Button
버튼은 버튼인데.. elevated 는 무슨 뜻이지?! 영어가 너무 많아..
버튼 중에서도 화면에 '떠' 있어서 뾱 하고 누를 수 있게 생긴 것을 말합니다!
그렇다면 당연히 화면에 붙어있게 생긴 버튼도 있겠죠?ㅎㅎ
이런 식으로 딱 봐도 아 얘 눌러야겠다! 하게 생긴 것들을 의미합니다.
이 친구는 child 와 onPressed 라는 값을 필수로 요구합니다.
child에는 버튼에 들어갈 글씨를 넘겨주고,💌
onPressed에는 버튼을 눌렀을 때 어떤 행동을 할 지 알려줘야 합니다!💨
Text
간단하게 이 친구로 보이는 위젯을 마무리 해보겠습니다.
놀랍게도! 플러터에서는 글씨마저도 하나의 위젯 취급을 받습니다(두둥)👀
아까 버튼에 child로 글씨를 넣어줘야 한다고 했는데, 바로 이런 텍스트 위젯을 넘겨주어야 합니다! 앱바의 title에도 역시 텍스트 위젯을 넘겨주어야 합니다.
구현과 관련된 부분은 잠시 잊어주세요. 다음 시간에 더 자세히 설명해 드리겠습니다!
자, 이렇게 보이는 위젯 세 가지를 알아보았습니다.
어떤가요? 버튼과 글씨만으로도 만들 수 있는 것들이 막 떠오르지 않나요?!
이제 이 위젯들을 화면에 안착 시켜줄, 보이지 않는 위젯 네 가지를 소개해드리겠습니다!😊
보이지 않는 위젯
Scaffold
또 어려운 영어 단어가 나왔습니다. ㅋㅋㅋ
정확한 사전적 뜻은 "비계"인데(고기 지방 아님), 쉽게 번역하면 '골격'이라고 말할 수 있을 것 같네요!
공사장에 철근으로 건물 옆에 간이 발판이 있는 걸 보실 수 있으실 거에요. ⛓⛓ 그런 것들을 비계라고 부릅니다.
이 위젯은 무슨 역할을 할 지 감이 오시나요?
앱 화면의 구조를 잡아주는 위젯입니다!
와우 이게 뭐람..
바로 스캐폴드가 잡아줄 수 있는 구조들이랍니다! (무시해요 무시..🤐)
익숙한 이름이 보이지 않나요?
네, appBar과 button이 있네요!
눈치 채신 분들이 계실 것 같은데, 스캐폴드 안에 앱바를 넣어줄 수 있어요!!
나중에 샘플 앱을 만들면서 여기에 나와있는 속성들을 하나씩 써보도록 해요ㅎㅎ
스캐폴드에는 대부분 appBar과 body를 넣어줍니다.
바디는 앱바를 제외한 공간을 의미합니다! 바디에 우리가 원하는 화면을 그리면 되겠죠?
Row, Column
로우, 그리고 컬럼은 방향만 다르고 기능은 비슷한 친구들이랍니다!
한글로 열과 행이라고 생각하면 됩니다.ㅎㅎ
로우는 하위 위젯들을 가로로 나열하는 것, ➡
컬럼은 하위 위젯들을 세로로 나열하는 것을 말합니다! ⬇
이 위젯을 쓰기 위해서는 child에 하위 위젯을 넣어주어야 합니다. 그런데 이 위젯들은 여러 하위 위젯이 들어가야 하겠죠? 그래서 로우와 컬럼은 필수적으로 child가 아닌 children 이라는 요소에 하위 위젯을 넣어줍니다ㅋㅋㅋ 개인적으로 귀여워하는 표현입니다ㅎㅋ
Container
마지막! 컨테이너는 음.. 우리가 생각하는 그런 컨테이너와 비슷한 역할을 합니다. 📦
특정한 사이즈에 위젯을 담고, 원한다면 색도 칠해주는, 그런 역할을 하는 위젯이라고 생각하면 될 것 같습니다.
컨테이너는 어떨 때 쓰냐고 물어보신다면, 무궁무진하다고 말씀 드릴 것 같습니다.
사이즈를 정할 수 있기 때문에 사이즈가 너무 작거나 큰 위젯에게 적당한 크기를 부여할 수도 있고,
색을 칠할 수 있기 때문에 단순 꾸미기 용도로도 사용할 수 있고,
화면에서의 위치도 지정할 수 있기 때문에 레이아웃에도 용이하답니다!
이렇게 세 종류의 보이는 위젯과, 네 종류의 보이지 않는 위젯에 대해 조금 알아보았습니다! 어떠셨나요? 조금은 플러터와 친숙해지셨나요?ㅎㅎ😊
플러터에는 정말 여러 종류의 위젯이 존재합니다. 공식문서에 나와있는 것 뿐만 아니라, 추가적인 패키지를 활용할 수도 있다는 사실! 아마 모든 위젯을 다 설명할 수 없을 것입니다.
다음 시간에는 오늘 배운 위젯들을 조합해서 하나의 간단한 앱을 만들어 볼 예정입니다.
실습을 위해서는 플러터와 안드로이드 스튜디오가 깔려있어야 합니다! 꼭 준비해 오시길!
그럼, 다음 수업때 봐요!🥰
