Flutter SVG oluşturma

92

Flutter uygulamama SVG kaynağı olan bir resim eklemeyi denedim.

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

Ama görsel bir geri bildirim almadım. Flutter'da bir SVG resmini nasıl işleyebilirim?

dart flutter

— Arash
kaynak

4

kullanımı basit flutter_svg 0.14.0 paketi kullanmayı deneyin, cazibe gibi çalışır burada daha fazla bilgi pub.dev/packages/flutter_svg , hepsi chrome'un svg oluşturma mantığını dart'a taşıyan bu adama github.com/dnfield sayesinde

— maheshmnj

65

Flutter şu anda SVG'yi desteklemiyor. Güncellemeler için 1831 numaralı sorunu takip edin .

Vektör çizimine kesinlikle ihtiyacınız varsa , API kullanarak nasıl çizileceğine dair bir örnek olarak Flutter Logo widget'ını görebilir Canvasveya görüntünüzü yerel tarafta rasterleştirebilir ve bir bitmap olarak Flutter'a aktarabilirsiniz, ancak şimdilik en iyi seçeneğiniz muhtemelen yüksek çözünürlüklü rasterleştirilmiş varlık görüntüleri ekleyin.

— Collin Jackson
kaynak

Ayrıca renge ihtiyacınız yoksa, simge paketinin yaptığı gibi her zaman yazı tipi rotasına gidebilirsiniz.

— prodaea

her şeyden önce, herhangi bir svg kütüphanesinin bunu yapabileceği gibi basitçe bir svg görüntüsü oluşturması gerekiyor pub.dev/packages/flutter_svg

— maheshmnj

sorun 13 Şubat 2016'dan beri açık. ne kadar beklememiz gerekiyor?

— BloodLoss

@BloodLoss, Dan Field'ın cevabına bakın. Kullanıcı flutter_svgpaketi

— kovalyovi

75

Yazı tipleri, birçok durum için harika bir seçenektir.

SVG'leri tuval üzerinde işlemek için bir kitaplık üzerinde çalışıyorum, şu adresten ulaşılabilir: https://github.com/dnfield/flutter_svg

Şu an itibariyle API şuna benzeyecektir:

new SvgPicture.asset('asset_name.svg')

asset_name.svg (üstüne göre boyutlandırılmış, örneğin SizedBox ) oluşturmak için. Ayrıca varlığı renklendirmek için bir colorve belirtebilirsiniz blendMode..

Artık pub'da mevcut ve minimum Flutter sürüm 0.3.6 ile çalışıyor. Bir grup vakayı ele alıyor ancak her şeyi değil - güncellemeler ve dosya sorunları için GitHub deposuna bakın.

Colin Jackson tarafından atıfta bulunulan orijinal GitHub sorunu, aslında Flutter'daki SVG'ye odaklanmak için tasarlanmamıştır. Bunun için burada başka bir konu açtım: https://github.com/flutter/flutter/issues/15501

— Dan Field
kaynak

Biraz konu dışı ama bunun iOS desteği var mı? Bildiğim kadarıyla, iOS vektörleri PDF formatında destekliyor, bu yüzden bunun iOS'ta vektörleri

— işlemek

3

Flutter'ın desteklediği herhangi bir platformda çalışmalıdır. Hepsi Canvasyöntemler kullanılarak Dart'ta yazılmıştır .

— Dan Field

1

neden en son flutter kararlı önizlemeyi desteklemiyor?

— minigeek

Merhaba Dan, - dart: svg kitaplığı - api.dart.dev/stable/2.9.2/dart-svg/dart-svg-library.html için de destek ekleyebilir misiniz ? flutter'ın dart2 desteği var mı? Birden fazla SVGElement'ın büyük bir serileştirilmiş dizede birleştirilmesini ve ardından

— SVG'yi

dart: svg, HTML ve dart2js ile kullanılır. Bundan çok farklı.

— Dan Alan

25

Flutter topluluğundan geliştiriciler, svg dosyalarını işlemek için bir kitaplık oluşturdu. Olarak kullanabiliriz

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

Burada küçük bir SVG uygulaması örneği buldum .

— Sunil
kaynak

5

Bilginize - bu resmi / birinci taraf bir eklenti değil. Bununla birlikte, birçok yaygın kullanım durumunu desteklemesi gerekir.

— Dan Field

21

Şimdilik geçici çalışma fontları kullanmaktır

https://icomoon.io/

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

Kullanım oranı

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

### yazın, örneğin (906)

— Victor Tong
kaynak

Bunu nasıl kullanabilirim? Diyelim ki asset / svg / mysvg.svg'de bir svg dosyam var, hex'i yol ile değiştiremiyorum. 1. argüman bir int.

— FrontMobe

9

Aşağıdaki adımları takip edebilirsiniz
- http://fluttericon.com adresini ziyaret edin
- SVG simgelerinizi yükleyin
- indirme düğmesine tıklayın
- iki dosya alacaksınız
1. iconname.dart
2. iconname.ttf yazı tipi dosyası
- bu dosyayı flutter & iconname.dart dosyasını içe aktar

— Nandakishor Valakunde
kaynak

3

Flare kullanarak animasyonlar oluşturabilir ve .flr'yi varlık olarak içe aktarabilirsiniz

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'ı ziyaret edin https://pub.dev/packages/flare_flutter

— primeChandi
kaynak

2

Bu kitaplığı SVG Görüntülerini oluşturmak için kullanabilirsiniz - https://pub.dev/packages/flutter_svg

Misal -

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

— Robin
kaynak