분류 전체보기19 Flutter 공부 기록 13 이번에는 StatefulWidget에 대해 알아보겠습니다. 지금까지 사용하던 StatelessWidget은 위젯의 속성을 변경할 수 없는데, StatefulWidget을 사용하면 변경시킬 수 있다고 합니다. 실시간으로 상태가 변하는 복잡한 앱에 반드시 쓰일 것 같습니다. 내용이 좀 어렵지만, 이해한대로 간단히 설명해본다면, 기본적으로 State가 dirty 상태일때 build가 실행된 후 clean 상태가됩니다. 그런데 StatefulWidget은 State를 변경 시킬 수 있어서 setState를 사용하면 State가 dirty로 변하면서 반복.. 즉, 이걸 이용하면 build를 여러번 실행시킬 수 있는겁니다. (StatelessWidget은 한번) 이번에는 이미지 슬라이딩을 해볼건데, assets에 .. 2023. 6. 25. Flutter 공부 기록 12 저번에는 웹뷰를 사용해 보았는데, 거기에 AppBar도 추가해보겠습니다. 배경색과 제목을 설정 했습니다. 제목이 좌측에 있는 것도 나쁘진 않지만, 중앙에도 놓아보고 싶죠? centerTitle의 속성을 true로 주시면 됩니다. 추가로 높이도 바꿀 수 있나 궁금해서 알아보니 AppBar 위젯 내부에서는 안되는 것 같고, PreferredSize를 사용하여 설정했습니다. preferredSize: const Size.fromHeight() 를 사용하시면 됩니다. 그런데, 높이가 증가하니 제목이 위쪽에 쏠린 느낌이 들죠? toolbarHeight를 사용하면 높이를 직접 설정할 수 있습니다. 이제 appBar에 제 기본 페이지인 https://riddleuscode.tistory.com/로 갈 수 있는 홈 버.. 2023. 6. 24. Flutter 공부 기록 11 지난번에 이미지를 넣어보았었는데, 이미지 아래에 로딩 효과를 넣어보도록 하겠습니다. 사진상으로는 잘 안느껴지지만, 원형으로 돌아가는 효과가 있습니다. 그리고 여러 위젯을 넣기 위해서 구조를 바꾸었습니다. Column으로 바꾼 후 children을 사용했습니다. 여기서 복습겸 퀴즈를 내보겠습니다. 둘다 중앙에 위치시키려면 어떻게 할까요? 타이밍이 안좋아 로딩 효과가 더 잘리긴 했지만, 중앙에 위치하도록 바꾸었습니다. column이나 row처럼 축을 기반으로 정렬시켜야 하는 것은 mainAxisAlignment 혹은 crossAxisAlignment를 사용하면 됩니다. 다시 퀴즈를 내보겠습니다. 로딩 효과를 붉은색으로 넣고, 검은 바탕을 가진 위젯의 높이를 400으로 설정하고, 이미지 위쪽과 효과의 아래쪽 .. 2023. 6. 23. Flutter 공부 기록 10 이번에는 Flexible을 살펴보겠습니다. Flexible을 사용하면 부모를 기준으로, 자식들의 비율을 결정할 수 있습니다. "자식들"이니까 children을 사용하겠죠? 그래서 지난번에 살펴본, children을 사용하는 Row 및 Column에 사용됩니다. 혹시 이해가 안되신다면 아래 사진을 봐주세요. Column을 기준으로 1:2의 비율로 자식들을 배치했습니다. Flexible 위젯의 flex 값을 기준으로 비율이 정해집니다. 위의 Flexible의 flex가 1, 아래의 Flexible의 flex가 2 그래서 1:2의 비율로 나누어 졌습니다. Expanded 위젯은 Flexible을 상속받은 위젯인데, 남은 공간을 전부 차지한다고 합니다. 바로 써보겠습니다. 보아하니 1:2:1로 나뉜 것 같죠? .. 2023. 6. 22. 이전 1 2 3 4 5 다음
