이번에는 Flexible을 살펴보겠습니다.
Flexible을 사용하면 부모를 기준으로, 자식들의 비율을 결정할 수 있습니다.
"자식들"이니까 children을 사용하겠죠?
그래서 지난번에 살펴본, children을 사용하는 Row 및 Column에 사용됩니다.
혹시 이해가 안되신다면 아래 사진을 봐주세요.
Column을 기준으로 1:2의 비율로 자식들을 배치했습니다.
Flexible 위젯의 flex 값을 기준으로 비율이 정해집니다.
위의 Flexible의 flex가 1,
아래의 Flexible의 flex가 2
그래서 1:2의 비율로 나누어 졌습니다.
Expanded 위젯은 Flexible을 상속받은 위젯인데, 남은 공간을 전부 차지한다고 합니다.
바로 써보겠습니다.
보아하니 1:2:1로 나뉜 것 같죠?
Flexible이 같이 있으면, 기본적으로 flex:1이 고정되어있는 느낌이네요.
그러면 위의두개의 flex를 8,8로 하면 8:8:1로 나뉠까요?
네, 8:8:1로 나뉜 것 같고, flex가 1로 고정되어 있는게 맞는 것 같습니다.
하지만 만약 Flexible이나 다른 Expanded가 없으면 말 그대로 남은 공간을 다 차지합니다.
꽤 유용해보이는게, 자주 쓰일 것 같네요.
이번에는 Stack 위젯을 사용해보겠습니다.
Stack 위젯은 자식 위젯들을 겹치는 것이 가능합니다.
겹치는 순서는 위젯을 넣은 순서대로 아래에 위치하게됩니다. 실제 스택구조처럼요.
가로세로 기준
(500,500)짜리가 가장 아래,
(400,200)이 그 위에,
(200,400)이 그 위에 위치하고 있습니다.
지금까지는 runApp() 안쪽에서 임의로 작성을 했었는데,
이 부분을 밖으로 뺴보겠습니다.
클래스를 선언하고 그 클래스를 runApp에 넣었습니다.
처음 실행할때, 이 화면이 처음에 나온다고 하는데,
나중에 onClick 메소드 같은거 작성할때, 이를 활용하면 다른 화면을 나오게 할 수 있을 것 같습니다.
클래스를 만들어도, runApp에 넣기 위해서는 특정 위젯을 상속받아야 하는데,
전 그중에서 StatelessWidget을 사용하였습니다.
그러면 반드시 구현을 해야하는 메소드가 있다고 빨간줄을 띄워주는데,
build 메소드를 구현해주면 됩니다.
가장 기본이 되는 Material App이랑 home:Scaffold까지는 그대로 작성해 주시고,
내부는 원하는대로 코딩해주시면 됩니다.
이번에는 이미지를 사용해보겠습니다.
먼저 좌측에 프로젝트 관련 폴더들이 있을텐데, 가장 상위의 프로젝트에 커서를 대고 우클릭을 해서
디렉토리를 추가해주세요. 이름은 assets으로 하겠습니다.
만드셨으면, 그곳에 이미지를 넣어주세요.
정상적으로 만드셨다면 android 폴더랑 build 폴더 사이에 디렉토리가 생겼을거에요.
이미지는 복사해서 assets 누른 후 붙여넣기하면 잘 들어갑니다.
그리고 pubspec.yaml이라는 파일을 아래서 찾아주세요.
찾으셨으면
해당 위치에
assets:
- assets/
를 작성해주세요.
(아래쪽에 있는 주석을 풀고 수정해서 작성하셔도 됩니다.)
하셨으면 위쪽에 nav바 처럼 생긴 곳에 Pub get이 있을 텐데 그걸 눌러주세요.
그러면 설정이 적용되고, 해당 위치를 이미지를 담을 폴더로 사용할 수 있습니다.
이미지는
Image.asset(
'assets/이미지 이름 및 확장자'
)
로 넣을 수 있습니다.
넣으셨으면 이제 위에 정지 버튼처럼 생긴 Stop버튼으로 한번 종료시켜주시고 다시 앱을 켜주세요.
잘 나옵니다.
그럼 이번글은 여기서 마치겠습니다.
감사합니다~