CODEWITHSUNDEEP
flutterdartsvgbackground
M Sohaib Arshad
M Sohaib Arshad

Reputation: 31

How to use svg image as background image in Circle Avatar in flutter

I've tried these line of code but did'nt work for me,

CircleAvatar(
                backgroundImage: Image(image: SvgPicture.asset("assetName")) as ImageProvider,
                backgroundColor: Colors.red,
                radius: 4,
              ),

And also tried this

backgroundImage: SvgPicture.asset("assetName"),

the error I'm facing is "The argument type 'SvgPicture' can't be assigned to the parameter type 'ImageProvider?'."

Upvotes: 3

Views: 5097

Answers (2)

JFX
JFX

Reputation: 1

You can also do this (flutter 3, flutter_svg: ^1.1.6)

CircleAvatar(
  backgroundColor: Colors.red,
  radius: 4,
  child: SvgPicture.asset("assetName"),
),

Upvotes: 0

Mohamed Ahmed
Mohamed Ahmed

Reputation: 63

There are two options:

First:

backgroundImage: SvgPicture.asset("assetName") as ImageProvider,

Second: use another packacge on top of svg_flutter package:

import 'package:flutter_svg_provider/flutter_svg_provider.dart';

Image(
  width: 32,
  height: 32,
  image: Svg('assets/my_icon.svg'),
)

Upvotes: -1

Related Questions