시작하기-첫 Flutter 앱 작성-part1-2단계

시작하기-첫 Flutter 앱 작성-part1-1단계

시작하기-첫 Flutter 앱 작성-part1-1단계

 

2 단계 : 외부 패키지 사용

이 단계에서는 가장 많이 사용되는 수천 개의 영어 단어와 일부 유틸리티 기능이 포함된 오픈 소스 패키지인 english_words를 사용하기 시작합니다.

pub.dev에서 english_words 패키지와 다른 많은 오픈 소스 패키지를 찾을 수 있습니다.

pubspec.yaml 파일은 Flutter 앱의 자산과 종속성을 관리합니다.

1. 다음과 같이 프로젝트에 english_words 패키지를 추가합니다.
   IDE에서 cupertino_icons 1.0.4 줄 바로 뒤에 english_words: ^4.0.0 줄을 추가하고 파일을 저장합니다.
   파일을 저장하면 종속성을 가져옵니다. 동등한 명령줄 프롬프트는 다음과 같습니다.

$ `flutter pub add english_words`

출력은 다음과 같이 표시됩니다.

Resolving dependencies...
+ english_words 4.0.0
Downloading english_words 4.0.0...

Changed 1 dependency!

종속 항목을 가져오면 프로젝트에 가져온 모든 패키지 목록과 해당 버전 번호가 포함된 pubspec.lock 파일도 자동으로 생성됩니다.

pubspec.yaml 파일은 Flutter 앱의 자산과 종속성을 관리합니다. pubspec.yaml에서 english_words 종속성이 추가된 것을 볼 수 있습니다.

pubspec.yaml

IDE의 편집기 보기에서 pubspec.yaml 파일을 보는 동안 Pub get을 클릭하십시오. 패키지를 프로젝트로 가져옵니다. 동등한 명령줄 프롬프트는 다음과 같습니다.

 

2. "Hello World" 문자열을 사용하는 대신 영어 단어 패키지를 사용하여 텍스트를 생성합니다.

영어 단어 패키지를 사용하기 위한 텍스트 변경

참고: "Pascal case"("upper camel case"라고도 함)는 첫 번째 단어를 포함하여 문자열의 각 단어가 대문자로 시작함을 의미합니다. 따라서 "uppercamelcase"는 "UpperCamelCase"가 됩니다.

 

중요: 대문자 카멜 케이스를 사용하면 화면 판독기가 합성어의 개별 단어를 식별하는 데 도움이 되며 시각 장애가 있는 사용자에게 더 나은 경험을 제공합니다.

 

3. 앱이 실행 중인 경우 실행 중인 앱을 업데이트하기 위해 핫 리로드합니다. 핫 리로드를 클릭하거나 프로젝트를 저장할 때마다 실행 중인 앱에서 무작위로 선택된 다른 단어 쌍을 볼 수 있습니다. 이는 MaterialApp이 렌더링을 요구할 때마다 또는 Flutter Inspector에서 Platform을 토글할 때 실행되는 빌드 메서드 내에서 단어 쌍이 생성되기 때문입니다.

핫 리로드 결과

스크린 리더로 앱을 사용해 볼 수 있습니다. 장치에서 스크린 리더를 켜려면 다음 단계를 완료하십시오:

Android의 음성 안내 지원

1. On your device, open Settings.
2. Select Accessibility and then TalkBack.
3. Turn ‘Use TalkBack’ on or off.
4. Select Ok.

iPhone의 VoiceOver

1. 기기에서 Settings > Accessibility > VoiceOver를 엽니다.
2. VoiceOver 설정을 켜거나 끕니다.

iOS 접근성 기능을 찾고 사용자 지정하는 방법을 알아보려면 이 비디오를 보십시오.

https://www.youtube.com/watch?v=qDm7GiKra28 

오류?

앱이 올바르게 실행되지 않는 경우 오타를 찾으십시오. Flutter의 디버깅 도구를 사용해보고 싶다면 DevTools 디버깅 및 프로파일링 도구 제품군을 확인하세요. 필요한 경우 다음 링크의 코드를 사용하여 다시 시작하십시오.

• pubspec.yaml
• lib/main.dart

 

 

https://fmcho.tistory.com/entry/flutter3-%EC%B2%AB-Flutter-%EC%95%B1-%EC%9E%91%EC%84%B1-part1-3%EB%8B%A8%EA%B3%84

시작하기-첫 Flutter 앱 작성-part1-3단계

 

 

---

Copy icons created by Anditii Creative - Flaticon