Flutter SVG 렌더링

내 flutter 응용 프로그램에 SVG 소스가있는 이미지를 추가해 보았습니다.

new AssetImage("assets/images/candle.svg"))

하지만 시각적 인 피드백을받지 못했습니다. Flutter에서 SVG 그림을 어떻게 렌더링 할 수 있습니까?

Flutter는 현재 SVG를 지원하지 않습니다. 업데이트는 1831 호 를 따르십시오 .

벡터 드로잉이 절대적으로 필요한 경우 API를 사용하여 그리는 방법의 예로 Flutter 로고 위젯 을 Canvas보거나 네이티브 측에서 이미지를 래스터 화하여 Flutter에 비트 맵으로 전달할 수 있지만, 현재로서는 가장 좋은 방법은 다음과 같습니다. 고해상도 래스터 화 된 자산 이미지를 포함합니다.

글꼴은 많은 경우에 훌륭한 옵션입니다.

캔버스에 SVG를 렌더링하는 라이브러리 작업을 해왔습니다. 여기에서 사용할 수 있습니다. https://github.com/dnfield/flutter_svg

현재 API는 다음과 같습니다.

new SvgPicture.asset('asset_name.svg')

asset_name.svg를 렌더링합니다 (예 : a SizedBox). 당신은 또한 지정할 수 있습니다 color및 blendMode자산 염색에 대한 ..

이제 펍에서 사용할 수 있으며 최소 Flutter 버전 0.3.6에서 작동합니다. 모든 경우는 아니지만 많은 경우를 처리합니다. 업데이트 및 파일 문제는 GitHub 저장소를 참조하세요.

Colin Jackson이 참조한 원래 GitHub 문제는 실제로 Flutter의 SVG에 주로 초점을 맞추려는 것이 아닙니다. 여기에 또 다른 문제를 열었습니다 : https://github.com/flutter/flutter/issues/15501

Flutter 커뮤니티의 개발자는 svg 파일을 처리하기 위해 lib를 만들었습니다. 우리는 그것을 다음과 같이 사용할 수 있습니다.

new SvgPicture.asset(
  'assets/images/candle.svg',
  height: 20.0,
  width: 20.0,
  allowDrawingOutsideViewBox: true,
),

여기 에서 SVG 구현 의 작은 예를 찾았 습니다 .

현재 해결 방법은 글꼴을 사용하는 것입니다.

https://icomoon.io/

  fonts:
   - family: icomoon
     fonts:
       - asset: assets/fonts/icomoon.ttf

사용법

  static const IconData TabBarHome= const IconData(0xe906, fontFamily: 'icomoon');
  static const IconData TabBarExplore= const IconData(0xe902, fontFamily: 'icomoon');

### 교체 예 : (906)

당신은 단계 아래를 따를 수
- 방문 http://fluttericon.com을
- 당신의 SVG 아이콘을 업로드
- 다운로드 버튼을 클릭
- 당신이 두 개의 파일 얻을 것이다
1. iconname.dart
2. iconname.ttf 글꼴 파일
- 플러터에서이 파일을 사용을 & import iconname.dart

플레어를 사용하여 애니메이션을 만들고 .flr을 자산으로 가져올 수 있습니다.

import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
  }
}

flare_flutter https://pub.dev/packages/flare_flutter 방문

SVG 이미지 렌더링에이 라이브러리를 사용할 수 있습니다-https: //pub.dev/packages/flutter_svg

예 -

Container(
    child: SvgPicture.asset("assets/images/yourImage.svg")
)