구글 떨리는 11개의 입문 팁

플리트는 이미 크로스플랫폼 분야의 주요 참여자가 되었다.지난 30일 동안 저는 떨림 앱을 개발해 왔습니다. 다음은 제가 배운 것들입니다.

트레일링 쉼표는 선택 사항이 아닙니다.

키보드 단축키는 작업 효율을 높이는 데 도움이 된다. 내가 처음으로 Flatter를 사용하기 시작했을 때, 나는 스팸메일의 '포맷 코드' 키를 연결하는 경향이 있었다. 나는 왜 때때로 나의 코드가 스스로 정리되고, 때로는 혼란스러울지 곤혹스러웠다.꼬리표 쉼표를 사용할 때만 바이브레이션 포맷 프로그램이 유효합니다!
쉼표 없음

쉼표가 붙다

무상태

상태가 없는 작은 부품이 더 좋아요.어떤 경우, StatefulWidget을 사용해야 하지만, 가능한 한 무상태widget을 사용하십시오!다른 방식으로 상태를 처리하면 (아래의 "상태"알림 참조) 코드를 장래에 더욱 쉽게 유지보수할 수 있습니다.플랜트를 사용하면 무상태 소부품을 설정하는 데 도움을 줄 수 있습니다.구글의Firestore를 사용합니다. 공장을 제공하는 것은 강력한 유형의 대상에 데이터를 비추고 작은 위젯의 상태를 유지하는 좋은 방법입니다.
진동공장

유형 충돌 처리 방법

Dart는 가져오는 데 사용할 수 있는 모든 클래스를 공개합니다. 이것은 클래스의 정확한 이름을 잘 알지 못할 때 매우 편리하지만, 일부 중첩을 초래할 수 있습니다. 컴파일러가 어떤 클래스를 사용해야 하는지 이해할 수 없습니다.내가 개발하고 있는 프로그램은 많은 통용 용어/클래스를 사용하는데, 만약 flifter에 익숙하지 않다면, 보통 이런 중첩을 초래하고, 모호한 오류를 초래할 수 있습니다.
완전 수입

이런 상황을 피할 수 있는 몇 가지 방법이 있다.첫 번째도 내가 가장 좋아하는 것은 충돌을 숨기는 종류다.
숨겨진 클래스를 사용하여 가져오기

가져오는 데 필요한 모든 종류를 지정할 수 있습니다. 이것은 보통 저에게 유리하지만, 이 경우 좀 지루해질 수 있습니다.
특정 클래스를 사용하여 가져오기

마지막으로 실제로 두 개의 클래스가 같은 위치에 있어야 한다면, 필요한 내용에 접근하기 위해 접두사/별명을 제공해야 합니다.
별칭을 사용하여 가져오기

추악한 깃발을 숨기다

starter 프로그램을 실행할 때, 내가 하고 싶은 첫 번째 일은 Material 플래카드에서 추악한 디버그 플래카드를 삭제하는 것이다.debugshow Checked Mode Banner 로고를 material 프로그램에 추가할 수 있습니다.
배너 조정

debugShowCheckedModeBanner: false

Streams & Futures(비동기 데이터)

모든 응용 프로그램이 어디에 연결되어 있기 때문에 비동기적인 동작을 처리하는 것은 모든 프레임워크에서 가장 중요한 일 중 하나이다.Typescript에서 왔습니다. 저는 프로미스와 observable라는 두 용어에 더 익숙하지만 Flatter에서 미래와 흐름을 처리하는 가장 좋은 방법은Future Builder와Stream Builder를 사용하는 것입니다.이 작은 위젯들은 두 가지 주요 매개 변수가 있는데, 하나는 데이터를 불러오는 호출이고, 다른 하나는 생성기입니다. 이것은 무상태 위젯의 표준 구축 방법으로 사용되며, 요청이 완료될 때 업데이트됩니다.
미래 건설자

내 프로그램은 특이한 애니메이션을 불러올 필요가 없기 때문에, 스냅샷 해상도 클래스에 전역 불러오는 작은 위젯을 설정하기로 결정했습니다. 따라서 전체 프로그램에서 같은if/else 조합을 반복하지 않습니다.
스냅샷 파서

만약 응용 프로그램이 더 복잡한 사용자 정의 애니메이션을 필요로 한다면, 이것은 불러오는 내용에 달려 있다. 이 해상도 종류는 당신에게 적합하지 않지만, 보기에 똑같다. 스냅샷에 데이터, 오류가 있는지 확인하거나, 다른 방식으로 불러오는 작은 위젯을 되돌려줍니다.

작은 부품이 많을수록 좋다

처음 Flitter(2019년 초)를 시도했는데 금방 포기했어요. 왜냐하면 덧붙이는 구조를 별로 좋아하지 않기 때문이에요.만약 네가 조심하지 않는다면, 너는 내가 말한 삼각형 코드를 얻을 수 있을 것이다
삼각 부호

최근에 그것을 다시 본 후에, 나는 너의 작은 부품이 위에서 보여준 극한에 이르지 않을 것이라는 것을 깨달았다.작은 위젯을 사용자 정의 재사용 가능한 클래스에 추출하면 코드를 현저하게 정리할 수 있습니다!Flatter 도구는 작은 위젯 추출을 간단하게 합니다
위젯 추출

여기저기 테스트

이것은 듣기에는 매우 간단하지만, 일깨워 줄 수 있다.대량의 코드를 작성할 때, 나는 플래터 웹 deploy에서 테스트를 계속하고 싶다. 왜냐하면 노트북에서 브라우저를 실행하는 것이 시뮬레이터를 실행하거나 케이블에서 휴대전화를 걸는 것보다 쉽기 때문이다. 그러나 기본 재료 부품이라도 서로 다른 시스템에서 괴벽이 있기 때문이다.스크롤 막대와 같은 간단한 것들은 안드로이드와 네트워크에서 모두 정상적으로 작동하지만 iOS에서는 정확하게 위치를 정하지 못한다. (아래의 안전 구역 참조)

국가 관리

직접적으로 자신을 위해 기준을 설정하지 않는 어떤 틀에서도 국가 관리는 큰 논쟁이고 플리트도 예외가 아니다.무수한 조수 라이브러리가 있지만 getIt는 내가 발견한 각도 있는 웹 환경(소형 응용 프로그램에 대한) 전환이 가장 직접적인 것이다.getIt 단일 예시 서비스를 설정하고 전체 응용 프로그램에 주입할 수 있습니다. Angular와 같이 구성 요소의 구조 함수를 통해 단일 예시 서비스를 주입할 수 있습니다.
서비스 등록

서비스가 설정되면 다음과 같이 애플리케이션의 어느 곳에서든 액세스할 수 있습니다.
등록된 단일 서비스 액세스

보안 영역 사용

휴대전화가 다양한 모양과 사이즈로 발표됨에 따라 모든 장치에서 응용 프로그램이 예상대로 작동할 수 있도록 확보하기는 매우 어렵다.그 중 일부 문제를 해결하는 방법의 하나는 '안전 구역' 소부품을 사용하는 것이다.iOS 장치의 응용 프로그램에서 스크롤 바 문제에 부딪혔습니다. 위치 계산이 부족한 부분을 고려하지 않았기 때문입니다. (a bug issue 는 Github에 제출되었고 미래 버전에서 복구될 것입니다.) 그러나 제 작은 부품을 안전 구역에 포장하여 문제를 해결했습니다.의문이 있으면 안전구역을 사용하세요.

JSON 처리 방법

대부분의 데이터를 제공하는 서비스는 응용 프로그램 JSON에 서비스를 제공할 것입니다. 따라서 Google은 JSON을 가져오고 강력한 유형의 대상을 만드는 방법을 알아야 합니다.Flatter는 JSON을 사용하여 JSON을 번역하는 패키지를 제공합니다.(객체)를 문자열에서 동적 객체로의 매핑으로 디코딩합니다.그곳에서, 이 맵을 강력한 형식으로 바꾸는 공장을 만들어야 합니다.
JSON 페이지 공장

나의 예에서 나는 구글의Firestore에서 데이터를 얻었기 때문에 나는Firestore 문서의 스냅샷을 얻을 수 있는 공장을 한층 더 실현했다.
구글 Firestore 공장

Typescript와Angular에서 가져온 나쁜 습관 중 하나는 JSON 대상에 클래스 (인터페이스) 를 만들고 화면에 대상을 표시하거나 구축하는 데 사용할 단독 위젯 클래스를 만드는 것입니다.만약 당신의 대상이 화면에 있는 작은 위젯으로 직접 표시된다면, 당신은 계속해서 당신의 강력한 유형의 대상을 JSON 위젯에서 가져올 수 있습니다.

흔들림용 IDE 확장

분명히, 당신은Dart 언어 서비스와 떨림 확장을 설치해야 하지만, 떨림을 처리할 때, 다른 확장도 매우 유용하다는 것을 발견했습니다.

괄호 착색기 2

괄호 착색기 2는 작은 위젯에 끼워 넣은 것을 추적하는 데 도움이 된다.(VScode 대신 IntelliJ를 사용하는 경우 "무지개 괄호"플러그인도 이와 유사하게 작동할 수 있습니다)
괄호 착색기 2

다음은 제가 VS코드에서 무지개 폭발을 끄는 데 사용한 설정들입니다.이것은 기본 VScode 주제와 일치합니다.

    "bracket-pair-colorizer-2.colors": [],
    "bracket-pair-colorizer-2.scopeLineCSS": [
        "borderStyle : solid",
        "borderWidth : 2px",
        "borderColor : #6e5880",
        "opacity: 1"
    ]

무지개를 움츠리다

축소 무지개는 괄호 착색기 2와 비슷한 목표를 실현하지만, 축소를 추적할 수 있습니다.
무지개를 움츠리다

이것은 VScode 및 Intellij에서 모두 사용할 수 있습니다.무지개를 다시 닫는 설정이 있습니다.나는 이곳에서 불투명도를 사용하는데, 이것은 대부분의 주제에서 보기에 매우 좋을 것이다.

    "indentRainbow.colors": [
        "rgba(50,50,50,1.00)",
        "rgba(50,50,50,0.75)",
        "rgba(50,50,50,0.50)",
        "rgba(50,50,50,0.25)",
        "rgba(50,50,50,0.00)"
    ],

들여쓰기 블록 강조 표시

이것은 반복되는 테마입니다. 그러나 이것은 다른 확장자입니다. 사용 중인 작은 위젯을 추적하는 데 도움을 줄 수 있습니다.현재 코드 블록의 범위를 강조 표시합니다.(IntelliJ 가 이와 유사한 기능을 제공하는지 여부는 확실하지 않지만 설정을 통해 알 수 있습니다.)
들여쓰기 블록 강조 표시

구글의 떨림 프레임

전반적으로 말하자면, 나는 플리트의 성과에 대해 매우 인상적이다.모서리가 있는 개발자로서 나는 30여 일 동안 응용 프로그램에서 절약적으로 일한 후에 그것을 빨리 집어 들고 역할을 발휘할 수 있었다.그중의 몇 가지 기교가 매우 도움이 되는 것을 발견하고 계속 공부할 수 있기를 바랍니다!