반응형

Flutter/Flutter 강좌 5

Flutter 프로젝트에 이미지 파일 추가하여 사용하기

Flutter 프로젝트에 이미지 파일을 추가하여 사용하는 방법을 다루고 있습니다. 2022. 7.23 최초작성 프로젝트 이름을 선택하고 마우스 우클릭하여 메뉴에서 New > Directory를 선택합니다. assets를 입력한 후, 엔터키를 누릅니다. 프로젝트 창에 assets 디렉토리가 추가되었습니다. assets 디렉토리가 선택된 상태에서 마우스 우클릭하여 메뉴에서 New > Directory를 선택합니다. images를 입력하고 엔터를 누릅니다. assets 디렉터리 아래에 images 디렉토리가 생성되었습니다. 이미지를 준비하고 프로젝트 창의 images 디렉토리에 이미지 파일을 드래그앤 드랍합니다. 다음 창이 보이면 Refactor 버튼을 클릭합니다. assets > images 디렉토리에 이미..

Flutter 강좌 04 - 레이아웃

Flutter의 레이아웃에 대해 다루고 있습니다. 2022. 9. 25 최초작성 다음 글을 바탕으로 작성되었습니다. https://docs.flutter.dev/development/ui/layout 관련 포스트 MacBook M1에 iOS와 Android를 위한 Flutter 개발 환경 만들기 https://webnautes.tistory.com/2027 Windows에서 Flutter 개발환경 만들기 https://webnautes.tistory.com/2057 레이아웃을 사용하면 위젯을 구성하여 더 복잡한 위젯을 만들 수 있습니다. 예를 들어 아래의 첫번째 스크린샷은 3개의 아이콘 아래에 레이블을 배치했습니다. 두 번째 스크린샷은 레이아웃을 사용하여 어떻게 아이콘과 레이블을 구성했는지를 보여줍니다...

Flutter 강좌 03 - 위젯 간단히 살펴보기

Flutter의 위젯에 대해 간단히 다루고 있습니다. 2022. 7. 7 최초작성 다음 글을 바탕으로 작성되었습니다. https://docs.flutter.dev/development/ui/widgets-intro 본 포스트를 읽어보기 전에 다음 포스트에서 StatefulWidget과 StatelessWidget의 차이를 확인하세요. Flutter 강좌 02 - Flutter에서 StatefulWidget과 StatelessWidget의 차이 정리 https://webnautes.tistory.com/2061 관련 포스트 MacBook M1에 iOS와 Android를 위한 Flutter 개발 환경 만들기 https://webnautes.tistory.com/2027 Windows에서 Flutter 개발환..

Flutter 강좌 02 - Flutter에서 StatefulWidget과 StatelessWidget의 차이 정리

Flutter에서 StatefulWidget과 StatelessWidget의 차이를 정리 했습니다. 2022. 5. 21 최초작성 2022. 6. 6 StatefulWidget과 State 역할 관련 내용 설명 수정 다음 웹문서들을 참고하여 작성했습니다. https://www.geeksforgeeks.org/what-is-widgets-in-flutter/?ref=lbp https://itwise.tistory.com/29 https://docs.flutter.dev/development/ui/interactive https://www.geeksforgeeks.org/flutter-stateful-vs-stateless-widgets/ https://www.geeksforgeeks.org/differen..

Flutter 강좌 01 - 첫번째 앱 작성하기

스타트업 회사의 이름을 랜덤으로 생성하여 제안해주는 첫번째 Flutter 앱을 작성해봅니다. 개념적인 부분은 제외하고 따라하며 앱을 완성하는 과정을 다루고 있습니다. 개념적인 부분은 이후 다룰 예정입니다. 먼저 랜덤으로 선택한 두 개의 단어를 결합하여 만든 스타트업 회사 이름을 보여주는 앱을 작성하고 이후 스타트업 회사 이름들을 리스트뷰에 보여주도록 개선해봅니다. 참고 https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0 본 포스트에서는 비주얼 스튜디오 코드를 사용하여 Flutter 프로젝트를 생성하여 진행합니다. Windows에서 Flutter 개발환경 만들기 https://webnautes.tistory.com/2057 20..

반응형