팁: 이 Codelab은 첫 번째 Flutter 앱을 작성하는 과정을 안내합니다. 웹에서 첫 번째 Flutter 앱을 작성하는 것을 선호할 수도 있습니다.
이 Codelab의 강사 주도 버전을 선호하는 경우 다음 워크숍을 확인하세요:
https://www.youtube.com/watch?v=Z6KZ3cTGBWw&t=1s
첫 번째 Flutter 앱을 만들기 위한 가이드입니다. 개체 지향 코드와 변수, 루프 및 조건과 같은 기본 프로그래밍 개념에 익숙하다면 이 자습서를 완료할 수 있습니다. Dart, 모바일, 데스크톱 또는 웹 프로그래밍에 대한 이전 경험이 필요하지 않습니다.
이 Codelab은 두 부분으로 구성된 Codelab의 1부입니다. Google Developers Codelab에서 2부(및 이 Codelab의 1부 사본)를 찾을 수 있습니다.
1부에서 빌드할 항목
스타트업 회사에 대해 제안된 이름을 생성하는 간단한 앱을 구현합니다. 사용자는 이름을 선택하거나 선택 취소하여 가장 좋은 이름을 저장할 수 있습니다. 이 코드는 한 번에 10개의 이름을 느리게 생성합니다. 사용자가 스크롤하면 더 많은 이름이 생성됩니다. 사용자가 스크롤할 수 있는 범위에는 제한이 없습니다.
애니메이션 GIF는 1부 완료 시 앱이 어떻게 작동하는지 보여줍니다.
1부에서 배울 내용
- iOS, Android, 데스크톱(예: Windows) 및 웹에서 자연스럽게 보이는 Flutter 앱을 작성하는 방법입니다.
- 스크린 리더(TalkBack 및 VoiceOver)와 함께 Flutter 앱을 사용하는 방법입니다. 이것들
기술을 사용하면 시각 장애가 있는 사용자가 앱 콘텐츠에 대한 음성 피드백을 받을 수 있습니다. - Flutter 앱을 구성하는 방법.
- 패키지를 찾고 사용하여 기능을 확장하는 방법.
- 더 빠른 개발 주기를 위해 핫 리로드를 사용하는 방법.
이 Codelab의 2부에서는 상호작용을 추가하고, 앱의 테마를 수정하고, 새 화면(Flutter에서는 경로라고 함)으로 이동하는 기능을 추가합니다.
당신이 사용할 것
이 실습을 완료하려면 Flutter SDK와 편집기라는 두 가지 소프트웨어가 필요합니다.
다음 기기 중 하나를 사용하여 이 Codelab을 실행할 수 있습니다:
- 컴퓨터에 연결되고 개발자 모드로 설정된 물리적 장치(Android 또는 iOS)
- 물리적 장치에서 활성화된 스크린 리더(Android의 TalkBack, iPhone의 VoiceOver)
- iOS 시뮬레이터(Xcode 도구 설치 필요)
- Android 에뮬레이터(Android Studio에서 설정 필요)
- 브라우저(디버깅하려면 Chrome 브라우저가 필요함)
- Windows, Linux 또는 macOS 데스크톱 애플리케이션
여러분이 만드는 모든 Flutter 앱은 웹용으로도 컴파일됩니다. devices 풀다운 아래의 IDE에서 또는 flutter devices를 사용하는 명령줄에서 이제 Chrome 및 웹 서버가 나열되어 있어야 합니다. Chrome 기기가 자동으로 Chrome을 시작합니다. 웹 서버는 모든 브라우저에서 앱을 로드할 수 있도록 앱을 호스팅하는 서버를 시작합니다. DevTools를 사용할 수 있도록 개발 중에는 Chrome 기기를 사용하고 다른 브라우저에서 테스트하고 싶을 때는 웹 서버를 사용하세요. 자세한 내용은 Flutter로 웹 애플리케이션 빌드 및 웹에서 첫 번째 Flutter 앱 작성을 참조하세요.
또한 Flutter 앱은 데스크톱용으로 컴파일할 수 있습니다. devices (예: Windows(데스크톱) 또는 명령줄에서 flutter devices 사용) 아래의 IDE에 나열된 운영 체제를 볼 수 있습니다. 데스크톱용 앱 빌드에 대한 자세한 내용은 Flutter 데스크톱 애플리케이션 작성을 참조하세요.
시작하기-첫 Flutter 앱 작성-part1-1단계
1단계: 스타터 Flutter 앱 만들기 첫 번째 Flutter 앱 시작하기의 지침을 사용하여 간단한 템플릿 Flutter 앱을 만듭니다. 프로젝트 이름을 startup_namer(flutter_app 대신)로 지정합니다. 팁: IDE에서 옵션으로
fmcho.tistory.com
'Flutter3 Docs 번역' 카테고리의 다른 글
시작하기-첫 Flutter 앱 작성-part1-2단계 (0) | 2022.12.19 |
---|---|
시작하기-첫 Flutter 앱 작성-part1-1단계 (0) | 2022.12.17 |
시작하기 - 테스트 드라이브 - 터미널과 에디터 (0) | 2022.12.14 |
시작하기 - 테스트 드라이브 - Android Studio and IntelliJ (0) | 2022.12.13 |
시작하기 - 테스트 드라이브 - Visual Studio Code (0) | 2022.12.11 |
댓글