Flutter 프로젝트에 이미지 파일을 추가하여 사용하는 방법을 다루고 있습니다. 2022. 7.23 최초작성 프로젝트 이름을 선택하고 마우스 우클릭하여 메뉴에서 New > Directory를 선택합니다. assets를 입력한 후, 엔터키를 누릅니다. 프로젝트 창에 assets 디렉토리가 추가되었습니다. assets 디렉토리가 선택된 상태에서 마우스 우클릭하여 메뉴에서 New > Directory를 선택합니다. images를 입력하고 엔터를 누릅니다. assets 디렉터리 아래에 images 디렉토리가 생성되었습니다. 이미지를 준비하고 프로젝트 창의 images 디렉토리에 이미지 파일을 드래그앤 드랍합니다. 다음 창이 보이면 Refactor 버튼을 클릭합니다. assets > images 디렉토리에 이미..
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의 위젯에 대해 간단히 다루고 있습니다. 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에서 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 앱을 작성해봅니다. 개념적인 부분은 제외하고 따라하며 앱을 완성하는 과정을 다루고 있습니다. 개념적인 부분은 이후 다룰 예정입니다. 먼저 랜덤으로 선택한 두 개의 단어를 결합하여 만든 스타트업 회사 이름을 보여주는 앱을 작성하고 이후 스타트업 회사 이름들을 리스트뷰에 보여주도록 개선해봅니다. 참고 https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0 본 포스트에서는 비주얼 스튜디오 코드를 사용하여 Flutter 프로젝트를 생성하여 진행합니다. Windows에서 Flutter 개발환경 만들기 https://webnautes.tistory.com/2057 20..
윈도우 10에서 Flutter 프로그래밍을 위한 개발환경을 만들고 에뮬레이터를 사용하여 실행시켜 보았습니다. 참고 https://flutter-ko.dev/docs/get-started/install/windows 2020. 4. 15 최초작성 2022. 5. 12 관련 포스트 MacBook M1에 iOS와 Android를 위한 Flutter 개발 환경 만들기 https://webnautes.tistory.com/2027 1. 다음 링크의 Stable Channel (Windows) 항목에서 최신 버전의 Flutter를 다운로드합니다. 글 작성 시점에서 최신버전은 3.0.0입니다. https://docs.flutter.dev/development/tools/sdk/releases 2. 다운로드 받은 압축..
Flutter를 사용하여 MacOS Desktop 애플리케이션 개발 환경을 만드는 방법을 다루고 있습니다. 2022. 7. 24 최초작성 아래 포스트에 기록한 대로 MacBook M1에 iOS와 Android를 위한 Flutter 개발 환경을 만든 후, 추가로 MacOS Desktop 애플리케이션을 만들기 위해 필요한 작업을 진행해보았습니다. MacBook M1에 iOS와 Android를 위한 Flutter 개발 환경 만들기 https://webnautes.tistory.com/2027 우선 터미널에서 다음 명령으로 Flutter를 최신 버전으로 업그레이드 후, MacOS Desktop 개발을 활성화합니다. flutter channel dev flutter upgrade flutter config --e..
MacBook M1에서 iOS와 Android를 위해 Flutter 개발 환경을 만든 과정을 다루고 있습니다. 2022. 5. 29 최초작성 1. Android Studio를 설치합니다. MacBook M1에 Android Studio 설치하기 https://webnautes.tistory.com/2026 2. Xcode를 설치합니다. MacBook M1에 Xcode 설치하기 https://webnautes.tistory.com/2024 3. Chrome 웹브라우저를 설치합니다. https://www.google.co.kr/chrome/ 4. Macbook M1은 Rossetta 2부터 설치해야 합니다. % sudo softwareupdate --install-rosetta --agree-to-licen..