Flutter을 사용하여 앱을 만들다보면 가끔 Future 함수를 사용하여 외부와 통신할 때 하나의 FutureBuilder 내에서 여러개의 Future 함수를 사용할 때가 있다. 이럴 때 Future.wait를 사용하게 되는데 구글링을 통해 찾아볼 때 이를 실제로 활용하는 방법에 대한 소개가 많이 없어서 고생한 경험이 있었다. 이번 포스팅은 내가 사용한 기술, 내가 깨달은 방법을 잊지 않도록 적게 되어 문맥, 문법이 이상할 수도 있지만 이 방법은 실무에서도 유용하게 쓸 수 있을거라는 생각이 든다. 우선 구글링을 통해서 찾아본 방법들에 대해 이야기 해보면 main함수(혹은 다른 함수)에서 Future를 호출하는 예제를 보여줄 때 Future함수가 단순 리턴 함수를 사용하여 보여주는 경우가 많았다. 아래 ..

Flutter 2024. 2. 2. 15:15

Flutter에서 레이아웃을 구성할 때 유연성을 갖는 것은 중요합니다. 이때 Flexible 위젯이 유용하게 사용됩니다. Flexible 위젯을 사용하면 화면 공간을 동적으로 조절하여 다양한 화면 크기와 기기에 대응할 수 있습니다. Flexible 위젯의 개요 Flexible 위젯은 주로 Row 또는 Column 위젯 내에서 사용되며, 자식 위젯의 크기 및 가중치를 제어하는 데 사용됩니다. 이를 통해 다양한 화면 크기에서 레이아웃을 조절할 수 있습니다. Flexible 위젯 사용하기 Flexible 위젯으로 자식 위젯 설정 Flexible 위젯을 사용하려면 Row 또는 Column 위젯 내에 배치하고 Flexible 위젯의 flex 속성을 설정합니다. flex 값은 해당 위젯이 차지하는 비율을 나타냅니다..

Flutter 2023. 10. 5. 17:43

이전 포스팅에서 데이터 모델(DataModel)을 만들고 API 서비스(apiService)를 설정하여 데이터를 가져오는 작업을 마쳤습니다. 이제 이 데이터를 사용자에게 친숙한 방식으로 표시하기 위해 UI를 만들어야 합니다. 먼저, 이전 포스팅에서 설정한 apiService를 FutureBuilder 위젯에 연결해야 합니다. FutureBuilder(future: DataApiService().getData(),), FutureBuilder는 Flutter에서 비동기 작업의 결과를 기반으로 UI를 구축하는 데 사용되는 중요한 위젯 중 하나입니다. 주로 Future 객체와 함께 사용되며, Future 작업이 완료될 때 해당 결과를 기반으로 다양한 UI를 생성하도록 도와줍니다. 비동기 작업을 FutureBu..

Flutter 2023. 10. 1. 13:52

이전 포스팅에서 Data Model을 제작하는 방법에 대해 자세히 살펴보았습니다. 이번 포스팅에서는 이렇게 제작한 Data Model을 어떻게 화면에 표시하고 활용할지에 대해 다룰 예정입니다. 아직 이전 포스팅을 보지 못했다면 아래 링크를 이용해 확인할 수 있습니다. [Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (1) [Flutter] DataModel을 사용하여 api 데이터 화면에 보여주기 (1) Flutter을 사용하여 앱을 개발하거나 인터넷에서 데이터를 가져올 때, 중요한 단계 중 하나는 서버에서 데이터를 가져오는 과정입니다. 하지만 앱에서 서버로 직접 통신하는 것은 대부분 불가능 space-engineers-developer.tistory.com 이전 포스팅에서 ..

Flutter 2023. 10. 1. 12:58

Dart 언어는 객체 지향 프로그래밍 언어로, 클래스를 사용하여 객체를 생성하고 초기화할 수 있습니다. 이 포스팅에서는 Dart의 명명된 생성자(Named Constructor)에 대해 자세히 알아보겠습니다. 명명된 생성자는 특정 역할을 수행하는 생성자로, 객체 생성 및 초기화 과정을 보다 유연하게 제어할 수 있는 중요한 도구입니다. 명명된 생성자란 무엇인가요? 명명된 생성자는 클래스 내에서 특정한 역할을 하는 생성자입니다. 클래스 내에 여러 개의 생성자를 정의하고, 각 생성자에 이름을 붙여서 사용할 수 있습니다. 이렇게 명명된 생성자를 활용하면 객체 초기화에 관련된 여러 시나리오를 다룰 수 있습니다. 왜 명명된 생성자를 사용해야 할까요? 가독성 향상: 명명된 생성자는 생성자의 역할을 명확하게 표현할 수..

Flutter 2023. 10. 1. 11:57

Flutter을 사용하여 앱을 개발하거나 인터넷에서 데이터를 가져올 때, 중요한 단계 중 하나는 서버에서 데이터를 가져오는 과정입니다. 하지만 앱에서 서버로 직접 통신하는 것은 대부분 불가능합니다. 따라서 우리는 서버에서 웹에서 데이터를 앱에서 사용 가능한 형식으로 변환하고 전달해야 합니다. 이를 위해 JSON 파싱, XML 파싱 또는 웹 태그 파싱과 같은 다양한 방법을 사용할 수 있습니다. 이번 포스팅에서는 JSON 형식의 API 데이터를 Flutter 및 Dart로 파싱하는 방법에 대해 알아보겠습니다. 예를 들어, 아래 이미지와 같이 JSON 형식으로 인코딩된 API 데이터가 있다고 가정해 봅시다. (아래 이미지는 필자의 처음으로 개발한 JVAK-API로, JVAK의 모든 데이터를 관리하는데 사용됩니..

Flutter 2023. 10. 1. 11:42

앱 개발을 시작하려면 먼저 Flutter 개발 환경을 설정해야 합니다. Flutter를 아직 설치하지 않은 경우 Flutter 공식 웹사이트에서 설치 가이드를 참고하십시오. 1. Flutter 프로젝트 설정 Flutter 개발 환경을 설치하고, 다음과 같이 새로운 프로젝트를 생성합니다: flutter create countdown_timer_app 프로젝트를 생성한 후, 코드 편집기 (예: Visual Studio Code)를 열고 countdown_timer_app 폴더를 엽니다. 2. UI 디자인 앱의 기본 UI 디자인을 설정합니다. 이 앱은 버튼과 남은 시간을 표시할 화면으로 구성됩니다. UI를 다음과 같이 설계합니다: Scaffold( appBar: AppBar( title: Text('Count..

Flutter 2023. 9. 28. 21:01

Flutter는 모바일 앱 및 웹 앱 개발을 위한 인기 있는 오픈 소스 프레임워크 중 하나입니다. Flutter의 아이콘 라이브러리는 앱 디자인을 보완하고 사용자 경험을 향상시키는 중요한 도구 중 하나입니다. 이 라이브러리는 매우 다양한 내장 아이콘과 사용자 정의 아이콘을 제공하여 앱을 더 흥미롭고 유용하게 만들 수 있습니다. Flutter Icons 라이브러리 소개 Flutter Icons 라이브러리는 다음과 같은 특징을 가집니다: 다양한 내장 아이콘: Flutter Icons 라이브러리에는 다양한 내장 아이콘이 포함되어 있습니다. 예를 들어, 화살표, 휴지통, 별표, 플레이 버튼 등의 아이콘을 제공합니다. Custom 아이콘 지원: 사용자는 자신만의 커스텀 아이콘을 디자인하고 사용할 수 있습니다. 이..

Flutter 2023. 9. 27. 10:02