I simply want to set an SVG image as background of a Card.
My svg has dimensions 184 * 95 . I have tried multiple ways but none of it work
Some of my attempts are
1st
Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: SizedBox(
width: 184, // Set width to match the Figma design
height: 95, // Set height to match the Figma design
child: SvgPicture.asset(
'assets/svgs/all_plan_home.svg',
fit: BoxFit.cover, // Ensures the SVG covers the entire background
),
),
),
2nd
Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: SizedBox(
height: 120, // Set height to a larger value
child: Stack(
//fit: StackFit.expand, // Ensures the background covers the whole Card
children: [
Positioned.fill(
child: SvgPicture.asset(
'assets/svgs/all_plan_home.svg',
fit: BoxFit.cover, // Make sure the background fills the entire card
),
),
Center(
child: Text(
"All Plans",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
],
),
),
),
Svg image
<svg width="204" height="112" viewBox="0 0 204 112" fill="none" xmlns=";>
<g filter="url(#filter0_d_23053_30978)">
<mask id="mask0_23053_30978" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="6" width="184" height="95">
<rect x="10" y="6" width="184" height="95" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0_23053_30978)">
<path d="M194 6H10V101H194V6Z" fill="#BF0233"/>
<g opacity="0.2" clip-path="url(#clip0_23053_30978)">
<path d="M177.017 23.893V14.8789" stroke="#011235" stroke-miterlimit="10"/>
<path d="M171.977 19.3857H182.057" stroke="#011235" stroke-miterlimit="10"/>
<path d="M30.6228 22L34.0869 16" stroke="#011235" stroke-miterlimit="10"/>
<path d="M29 17.0625L35.7099 20.9365" stroke="#011235" stroke-miterlimit="10"/>
<path d="M40 80L51 70" stroke="#011235" stroke-miterlimit="10"/>
<path d="M40 70L51 80" stroke="#011235" stroke-miterlimit="10"/>
<path d="M177.017 92.1215V83.1074" stroke="#011235" stroke-miterlimit="10"/>
<path d="M171.977 87.6143H182.057" stroke="#011235" stroke-miterlimit="10"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_d_23053_30978" x="0" y="0" width="204" height="115" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_23053_30978"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_23053_30978" result="shape"/>
</filter>
<clipPath id="clip0_23053_30978">
<rect width="167.188" height="77.243" fill="white" transform="translate(14.8691 14.8789)"/>
</clipPath>
</defs>
</svg>
I didn't understand the issue . Whether my SVG is not in correct dimension or I ask designer to provide a specific ration SVG .
Or Am I not using the correct approach
Currently it is not rounded but I wanted to handle rounded as well as in some future screen it is rounded as well
I simply want to set an SVG image as background of a Card.
My svg has dimensions 184 * 95 . I have tried multiple ways but none of it work
Some of my attempts are
1st
Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: SizedBox(
width: 184, // Set width to match the Figma design
height: 95, // Set height to match the Figma design
child: SvgPicture.asset(
'assets/svgs/all_plan_home.svg',
fit: BoxFit.cover, // Ensures the SVG covers the entire background
),
),
),
2nd
Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: SizedBox(
height: 120, // Set height to a larger value
child: Stack(
//fit: StackFit.expand, // Ensures the background covers the whole Card
children: [
Positioned.fill(
child: SvgPicture.asset(
'assets/svgs/all_plan_home.svg',
fit: BoxFit.cover, // Make sure the background fills the entire card
),
),
Center(
child: Text(
"All Plans",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
],
),
),
),
Svg image
<svg width="204" height="112" viewBox="0 0 204 112" fill="none" xmlns="http://www.w3./2000/svg">
<g filter="url(#filter0_d_23053_30978)">
<mask id="mask0_23053_30978" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="6" width="184" height="95">
<rect x="10" y="6" width="184" height="95" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0_23053_30978)">
<path d="M194 6H10V101H194V6Z" fill="#BF0233"/>
<g opacity="0.2" clip-path="url(#clip0_23053_30978)">
<path d="M177.017 23.893V14.8789" stroke="#011235" stroke-miterlimit="10"/>
<path d="M171.977 19.3857H182.057" stroke="#011235" stroke-miterlimit="10"/>
<path d="M30.6228 22L34.0869 16" stroke="#011235" stroke-miterlimit="10"/>
<path d="M29 17.0625L35.7099 20.9365" stroke="#011235" stroke-miterlimit="10"/>
<path d="M40 80L51 70" stroke="#011235" stroke-miterlimit="10"/>
<path d="M40 70L51 80" stroke="#011235" stroke-miterlimit="10"/>
<path d="M177.017 92.1215V83.1074" stroke="#011235" stroke-miterlimit="10"/>
<path d="M171.977 87.6143H182.057" stroke="#011235" stroke-miterlimit="10"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_d_23053_30978" x="0" y="0" width="204" height="115" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_23053_30978"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_23053_30978" result="shape"/>
</filter>
<clipPath id="clip0_23053_30978">
<rect width="167.188" height="77.243" fill="white" transform="translate(14.8691 14.8789)"/>
</clipPath>
</defs>
</svg>
I didn't understand the issue . Whether my SVG is not in correct dimension or I ask designer to provide a specific ration SVG .
Or Am I not using the correct approach
Currently it is not rounded but I wanted to handle rounded as well as in some future screen it is rounded as well
Share Improve this question asked Feb 2 at 14:18 Taimoor KhanTaimoor Khan 6672 gold badges7 silver badges25 bronze badges 2 |1 Answer
Reset to default 1You can use flutter_svg package to add an SVG as a background:
Code Snippet:
Container(
width: 184,
height: 95,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red, width: 2),
),
child: Stack(
children: [
Positioned.fill(
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SvgPicture.asset(
'assets/svgs/bg.svg',
fit: BoxFit.cover,
),
),
),
const Center(
child: Text(
'All Plans',
style: TextStyle(color: Colors.black, fontSize: 12),
),
),
],
),
),
UPDATED:
I checked it is working fine:
Try once with this background: Background SVG
viewBox="0 0 204 112". In other words: the graphic has some padding. You can adjust the viewBox values for a tight bounding box like soviewBox="10 6 184 95"– herrstrietzel Commented Feb 3 at 20:58