이전 주제에서 Flutter로 Crypto 앱 UI를 만들었습니다. 이번에는 코드를 웹용 Flutter로 마이그레이션하고 이를 수행하는 방법을 설명합니다.
구글 블로그에 따르면 구글은 Flutter 프레임 워크가 모바일을 넘어 설 것이라고 발표했습니다. 현재 Flutter를 사용하여 iOS 또는 Android 용 앱을 개발할 뿐만 아니라 웹, 데스크톱 및 임베디드용 애플리케이션도 개발할 수 있습니다.
우리에게는 단일 코드를 통해 (또는 거의 수정하지 않고) 모바일, 웹 또는 데스크톱에서 사용자에게 도달 할 수 있는 기능이 비용 및 시간 절약 측면에서 많은 도움이 될 것입니다.
이 주제에서는 웹용 Flutter에 초점을 맞출 것입니다.
Architecture
Flutter Architecture
Flutter for Web Architecture
전반적으로 웹 아키텍처 용 Flutter는 모바일 아키텍처와 매우 유사합니다. 프레임 워크 자체는 Dart 언어로 작성되었습니다. 테마, 위젯, 렌더링, 애니메이션, 페인팅, 제스처 및 UI 기반에 대한 추상화를 제공합니다. Flutter 앱의 코드를 작성 했었다면 이러한 개념에 매우 익숙할 것입니다.
시작하기
좋습니다. 기본적인 것부터 시작하겠습니다.
가장 먼저 해야 할 일은 flutter_web 빌드 도구를 설치하는 것입니다.
터미널에서 webdev 명령을 사용하려면 $ HOME / .pub-cache / bin 디렉토리가 경로에 있는지 확인하십시오. 우리의 경우 PATH를 .zshrc로 내 보냅니다.
다음으로 Flutter 업그레이드
Flutter 버전은 1.5 이상이어야 합니다.
Visual Studio Code에서 프로젝트 만들기
명령 팔레트에서 Flutter : New Web Project를 사용하고 새 프로젝트를 만듭니다.
Enter를 클릭하면 VS Code가 필요한 모든 파일과 폴더를 생성합니다.
다음으로 브라우저에서 미리보기를 위해 다음 명령을 실행하십시오.
이것은 디버깅 시작 또는 디버깅 하지 않고 시작을 선택해야 했던 Flutter 앱과 다릅니다.
이제 앱이 웹 브라우저에서 실행되고 있음을 알 수 있습니다.
Flutter 앱을 웹으로 마이그레이션
결국 우리는 다음과 같은 결과를 얻을 것입니다.
현재 이 Flutter for Web은 아직 개발 중이며 이전에 사용했던 플러그인이 아직 작동하지 않았음을 알 수 있습니다. 예 : flutter_sparkline 및 cupertino_icons가 작동하지 않아 스파크 라인 그래프를 제거하고 cupertino 아이콘을 머티리얼 아이콘으로 대체했습니다.
마이그레이션 가이드에 따라
1. pubspec.yaml 수정
name: appbar_for_web
description: A new Flutter project for Web.
version: 1.0.0
environment:
sdk: '>=2.3.0-dev.0.1 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
build_runner: ^1.4.0
build_web_compilers: ^2.0.0
pedantic: ^1.0.0
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui2. lib / 디렉토리의 애플리케이션 코드 전체에서 package : flutter를 package : flutter_web으로, dart : ui를 package : flutter_web_ui / ui.dart로 바꿉니다.
3. web / index.html 및 web / main.dart 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>// Copyright 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:appbar_for_web/main.dart' as app;
main() async {
await ui.webOnlyInitializePlatform();
app.main();
}4. 웹 내에서 자산 폴더 이동
기본적으로 웹용 Flutter가 웹 폴더에서 자산을 찾는 것처럼 보입니다. 그래서 우리는 그것을 여기로 옮겨야 했습니다. 하지만 좋은 점은 더 이상 pubspec.yaml에서 자산을 정의 할 필요가 없다는 것입니다. 웹용 Flutter가 자동으로 인식합니다. 다음과 같은 방법으로 자산에 액세스 할 수 있습니다.
5. FontManifest.json
큐 퍼티 노 아이콘이 작동하지 않았기 때문에 FontManfest.json에서 정의하여 머티리얼 아이콘을 사용하고 (철자에 주의) 파일을 웹에 넣습니다.
[
{
"family": "MaterialIcons",
"fonts": [
{
"asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
}
]
}
]이러한 모든 수정이 끝나면 $webdev serve — auto restart를 실행합니다. 예, 웹 브라우저에서 실행됩니다.
결론
그렇지 않으면 소스 코드와 파일을 약간 수정해야 합니다. Flutter for Web이 마술처럼 작동했다고 말할 수 있습니다. 하나의 코드로 모바일 및 웹에서 애플리케이션을 실행할 수 있습니다.
소스 코드는 Github에서 찾을 수 있습니다.
https://medium.com/@joesithixaydouangchak/migrate-flutter-app-to-web-888738896091
등록된 댓글이 없습니다.
