본문 바로가기

Flutter20

[Flutter] Dart 비동기 처리, Future 사용하기 Dart의 비동기 처리 1탄으로 Future 사용법에 대해 알아보도록 하겠습니다. 동기식 코드를 살펴보고 Future를 이용해서 동기식을 비동기 처리로 바꿔보겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. 동기식 코드 살펴보기 Future 란? Future 사용해 비동기 처리로 바꿔보기 Future의 상태 반환 값이 있는 Future 동기식 코드 살펴보기 아래 코드를 보고 호출 순서를 생각해보세요. main 메소드에서 비동기 처리로 바꿔야 할 세 개의 메소드를 호출하고 있습니다. mockFileIO, mockHttpRequest, mockDBQuery는 실제 처리를 하는 메소드는 아니지만 실제로 파일 입출력, http리퀘스트, 디비 쿼리를 수행하는 처리 시간이 오래 걸리는 메서드라고 정의하겠습니다.. 2022. 5. 7.
[Flutter Layout] 8. Row, Column 위젯 순서 정렬, Expanded와 flex Row, Column의 자식 요소의 순서 정렬에 대해 알아보고, Expanded 위젯과 flex 속성에 대해 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. verticalDirection, Column의 자식 순서 바꾸기 textDirection, Row 자식 순서 바꾸기 Expanded 위젯 flex, Expanded 공간 나누기 연습에서 사용할 화면과 코드는 아래와 같은 상태입니다. creatBox는 가로, 세로 50px 사이즈의 container의 리스트를 반환하는 메소드 입니다. verticalDirection, Column의 자식 순서 바꾸기 Column 위젯에는 열의 자식 순서를 결정하는 verticalDirection이라는 속성이 있습니다. VerticalDirectio.. 2022. 3. 24.
[Flutter Layout] 6. 플러터 Container, 이미지 넣기 플러터 레이아웃 Container 위젯에 대해 알아보고 있습니다. 컨테이너에 이미지를 넣어보고 프로퍼티와 사용하는 클래스를 알아보도록 하겠습니다. 컨테이너에 이미지 넣기 fit 사용해 이미지 키우거나 늘리기 FlutterLogo Container에 이미지를 포함시켜 보겠습니다. 이미지를 사용한 프로토타입 인터페이스를 만들 때 이미지를 넣는 매우 쉬운 방법은 FlutterLogo 위젯을 사용하는 것입니다. Container의 child 속성에 FlutterLogo를 설정해 주었습니다. 컨테이너의 색상 위에 이미지가 표시된다는 점 이외에 특이한 사항은 없는 것 같습니다. 컨테이너에 이미지 넣기(DecorationImage, NetworkImage) FlutterLogo 위젯을 제거하고 실제 이미지를 추가해 .. 2022. 3. 18.
[Flutter Layout] 4. 플러터 Container, margin, decoration Container 위젯에서 배치를 쉽게 할 수 있는 마진을 알아보고, decoration을 사용해서 모양을 바꾸거나 모서리를 둥글게 하는 법에 대해 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. margin, EdgeInsets.all, EdgeInsets.only, EdgeInsets.symmetric BoxDecoration, shape, borderRadius 아래 코드와 화면을 살펴보겠습니다. 사각형 컨테이너가 scaffold의 왼쪽 상단에 위치해 있습니다. 컨테이너를 이동하기 위해선 어떻게 해야 될까요? 가장 쉬운 해결책은 마진 속성을 추가하는 것입니다. margin margin 프로퍼티에 const EdgeInsets.all(15)를 설정하였고 예상대로 사각형이 움직였습니.. 2022. 3. 16.