프론트 엔드 웹 개발자를위한 플러터

프론트 엔드 웹 개발에서 플러터 개발을 전환합니까? 이 기사는 내 경험을 공유하여 전환을 쉽게 할 수 있도록 도와줍니다. 나는 플러터에서 배울 수있는 새로운 개념과 새로운 개념에 공통적 인 개념을 지적하므로 더 이상 어떤 생태계를 선택할 수 있는지 걱정할 필요가 없습니다.

일반적인 개념

이 섹션에는 프론트 엔드 웹 개발과 플러터 사이의 유사성과 마스터 한 기술이 더 빠르게 시작하는 데 도움이 될 수 있습니다.

1. UI (User Interface) 구현

프론트 엔드 웹 개발에서는 UI를 구축하고 CSS로 스타일을 지정합니다. Flutter에서는 위젯을 사용하여 UI를 구축하고 속성으로 스타일링합니다.

color 클래스

dart는 CSS와 마찬가지로 "rgba"및 "hex"색상 값을 지원합니다. Flutter는 또한 CSS와 같은 공간 및 크기 단위로 픽셀을 사용합니다.

Flut

…

Flutter의 열 및 Row 위젯은 디스플레이와 동일합니다 : CSS의 Flex . MainaxisAlignment 및 crossaxisalignment 속성은 정당화-콘텐츠 및 align-items 스타일에 해당합니다. flex-grow 스타일을 조정하려면 확장 또는 flexible 로 해당 하위 위젯을 랩핑 할 수 있습니다.

복잡한 UI의 경우 Flutter는 custompaint 클래스를 제공하며 웹 개발의 canvas API와 같습니다. customPaint 를 사용하면 UI 그리기를 사용자 정의 할 수 있습니다. customPaint 는 일반적으로 매우 복잡한 UI 또는 위젯 조합으로 달성 할 수없는 효과를 구현해야 할 때 사용됩니다.

2. 개발 과정에서 플랫폼 차이를 고려해야합니다. 각 플랫폼은 다양한 방식으로 동일한 기능 (카메라, 위치, 알림 등)을 구현합니다.

웹 개발자는 웹 사이트 반응 형 디자인에 익숙하며 미디어 쿼리를 사용하여 다양한 화면 크기로 웹 사이트 디스플레이 효과를 처리합니다.

Flutter에서 mediaquery 클래스는 유사한 기능을 제공합니다. 장치 방향 (풍경 또는 초상화), 뷰포트 크기, devicepixelratio 와 같은 장치 정보를 얻을 수 있으며 다양한 화면 크기에 따라 응용 프로그램의 UI를 조정할 수 있습니다.

3. 디버그 도구 및 명령 라인 도구

검사관, 콘솔, 네트워크 모니터링 등을 포함한 개발자 도구가있어 웹 개발의 효율성을 향상시킵니다. Flutter에는 위젯 검사관, 디버거, 네트워크 모니터링 및 기타 기능을 포함한 자체 DevTool이 있습니다.

IDE 지원도 비슷합니다. Visual Studio Code는 많은 웹 관련 확장 기능을 갖춘 인기있는 웹 개발 IDE입니다. Flutter는 또한 Android Studio뿐만 아니라 VS 코드도 지원합니다. 둘 다 Flutter DevTools를 지원하여 Flutter의 툴체인을 매우 완벽하게 만듭니다.

대부분의 프론트 엔드 JavaScript 프레임 워크에는 다음과 같은 명령 줄 인터페이스 (CLI)가 함께 제공됩니다. Angular CLI, React App 만들기, Vue CLI 등. Flutter는 또한 코드 분석 및 테스트를 수행 할뿐만 아니라 플러터 프로젝트를 구축, 생성 및 개발하기위한 독점적 CLI를 보유하고 있습니다.

새로운 개념

이 섹션에서는 웹 개발에 존재하지 않거나 다른 방식으로 구현되는 Flutter의 고유 한 개념을 소개합니다.

1 스크롤 처리

웹 개발에서는 기본 스크롤 동작이 브라우저에서 처리되며 CSS를 사용하여 스크롤을 사용자 정의 할 수 있습니다 (예 : 오버 플로우> 속성).

그러나 플러터에서는 위젯 그룹이 기본적으로 스크롤하지 않습니다. 위젯 그룹이 오버 플로우를 할 수있는 경우 스크롤을 적극적으로 구성해야합니다.

플러터는 특수 위젯을 사용하여 다음과 같은 스크롤을 구성합니다. 이러한 스크롤 가능한 위젯은 스크롤 동작에 대한 세분화 제어를 제공합니다. CustomsCrollView 를 사용하면 복잡하고 전문적인 스크롤 메커니즘을 구성 할 수 있습니다.

Flutter에서 scrollview를 사용하는 것은 불가피합니다. Android와 iOS에는 <code> scrollview 및 uiscrollview 가 각각 스크롤링을 처리합니다. Flutter는 렌더링 및 개발자 경험을 통합하는 방법이 필요하므로 scrollview 도 사용합니다.

사고 방식을 바꾸고 문서 구조의 흐름에 대한 생각을 중단하지만 응용 프로그램을 장치의 기본 도면 메커니즘의 열린 캔버스로 생각하십시오.

2. 플러터는 훨씬 더 복잡합니다. Flutter SDK를 설치하고 테스트 장치의 Flutter를 구성해야합니다. Android 용 Flutter Apps를 개발하려면 Android SDK를 설정하고 하나 이상의 Android 장치 (에뮬레이터 또는 물리적 장치)를 구성해야합니다.

iOS 장치 (iOS 및 MacOS)에 대해서도 동일합니다. Mac에 Flutter를 설치 한 후 Xcode도 설정해야합니다. 플러터 앱을 테스트하려면 최소한 하나의 iOS 시뮬레이터 또는 iPhone도 필요합니다. 데스크탑 플러터의 설정도 매우 복잡합니다. Windows에서는 Visual Studio (대 코드가 아닌)를 사용하여 Windows Development SDK를 설정해야합니다. Linux에서는 더 많은 패키지를 설치해야합니다.

플러터는 추가 설정에 의존하지 않고 브라우저에서 실행됩니다. 따라서 대상 장치의 추가 설정을 무시할 수 있습니다. 그러나 대부분의 경우 모바일 앱 개발에 Flutter를 사용하므로 Android 또는 iOS 환경을 설정해야합니다. Flutter는 Flutter Doctor 명령을 제공하여 개발 환경의 설정 상태를보고하고 어떤 설정을 해야하는지 이해하는 데 도움이됩니다.

그러나 이것이 Flutter가 천천히 발달하고 있음을 의미하지는 않습니다. Flutter는 강력한 엔진을 가지고 있으며 Flutter Run 명령을 통해 인코딩 중에 테스트 장치에 핫로드를 할 수 있습니다. 그러나 핫 재 장전을 수행하려면 R을 누르야합니다. Flutter의 VS Code Extension을 사용하면 파일이 변경 될 때 자동 핫로드가 가능합니다.

3 포장 및 배포

웹 사이트 배포는 모바일 애플리케이션을 배포하는 것보다 더 저렴합니다. 웹 사이트를 배포 할 때는 웹 사이트를 통해 웹 사이트에 액세스 할 수 있습니다. 도메인 이름을 통해 액세스 할 수 있습니다. 도메인 이름은 일반적으로 연간 갱신이 필요하지만 필요하지 않습니다.

많은 플랫폼은 DigitalOcean과 같은 무료 호스팅 서비스를 제공합니다. 이러한 도메인 이름을 사용하여 브랜딩에 중점을 둔 문서 웹 사이트 또는 웹 사이트를 구축 할 수 있습니다.

Flutter의 모바일 애플리케이션 개발에서 일반적으로 앱을 두 개의 플랫폼에 배포해야합니다.

• App Store (iOS 장치)
• Google Play (Android 장치)

각 플랫폼에 개발자 계정을 등록해야합니다.

App Store는 Apple 개발자 프로그램에 가입하고 연간 $ 99의 구독비를 지불해야합니다. Google Play의 일회성 등록 수수료는 $ 25가 필요합니다.

이 앱 스토어는 앱이 온라인으로 진행되기 전에 검토됩니다.

또한 사용자는 자동으로 앱 업데이트를받지 않으므로 설치된 앱을 수동으로 업데이트해야합니다. 웹의 사용자가 웹 사이트의 최신 버전을 자동으로 볼 수있는 웹과 다릅니다.

배포 된 응용 프로그램 관리는 배포 된 사이트를 관리하는 것보다 비교적 힘들다. 그러나 결국이 상점에 수백만 개의 앱이 이미 배포되어 있지 않아야합니다.

플러터에 대한 추가 생각

Flutter는 데스크탑, 모바일 또는 웹 응용 프로그램을 구축하기위한 크로스 플랫폼 도구입니다. Flut

플러터는 효율적이며 다트를 사용하여 다트의 기능을 구축하고 활용하기 때문에 성능이 우수합니다.

많은 장점으로 Flutter는 많은 응용 프로그램에 이상적입니다. 크로스 플랫폼 응용 프로그램은 생산 및 유지 보수 중 비용과 시간을 절약합니다. 그러나 플러터 (및 크로스 플랫폼 솔루션)가 경우에 따라 최선의 선택이 아닐 수도 있습니다.

사용자가 플랫폼 개발자 도구를 사용하여 응용 프로그램과 상호 작용하려면 Flutter를 사용해서는 안됩니다. 여기에서 플랫폼 개발자 도구는 Android 개발자 옵션과 같은 장치 별 도구 및 브라우저 개발자 도구를 참조하십시오.

브라우저 확장이 웹 사이트와 상호 작용할 것으로 예상되는 경우 Flutter가 웹 개발에 사용해서는 안됩니다.

또한 컨텐츠가 풍부한 웹 사이트에는 플러터를 사용해서는 안됩니다.

결론

이 기사는 프론트 엔드 웹 개발에서 플러터 개발로의 기술 전송과 배우는 새로운 응용 프로그램 개발 개념을 검토합니다.

Flutter는 UI 구현이 포함되므로 웹 개발자가 시작하기가 비교적 쉽습니다. Flutter를 사용해 보면 좋은 개발자 경험을 제공합니다. Flutter와 함께 모바일 앱을 구축하고 결과를 보여주십시오!

위 내용은 프론트 엔드 웹 개발자를위한 플러터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!