How can I fix this SVG error ?
Also this is my Svg widget:
SvgPicture.asset(truckSVG,
width: 80,
height: 80,
color: ColorConstants.birincilRenk,
),
Unfortunately, flutter_svg don't support all svg feauters. Your svg file contains <style> tag that is unsupported by the library.
To solve it, you can use svgcleaner or any other tool to clean unnecessary data from svg image.
The error log clearly states, it doesn't accept "print" units like mm (most certainly the same for inch etc.).
To achieve a DIN A4 aspect ratio, you could fix your width and height values by using pixels or percentages:
width: 210px;
height: 297px;
width: 70.707%;
height: 100%;
width: 100%;
height: 141.4286%;
Related
The screenshot says it all.
On the left is flutter run -d chrome and the blue gradient, which is a result of BoxDecoration being added to a Container.
On the right is flutter build web followed by firebase deploy --only hosting. The build web command runs with no errors and the deploy command uploads with no errors, but the gradient, as you can see, is gone, resulting in a gray background.
Since flutter does not produce any typical html files or css that I can find it is pretty much impossible to inspect or find why the gradient is not working in the produced web files. Any thoughts on what I am missing with flutter build web considerations or is this a bug that needs to be reported to flutter?
/// In class "TopClipper"
static get gradient => const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xFF333F7A),
Color(0xFF9CBCD9),
],
),
);
/// This ClipPath and call to gradient is in another file
/// that is in a SliverPersistentHeader delegate.
ClipPath(
clipper: TopClipper(),
child: Container(
/// Calling static "gradient" above.
decoration: TopClipper.gradient,
width: double.infinity,
height: expandedHeight,
child: const Spacer(),
),
)
UPDATE and FIX
Thanks to #IvoBeckers comment regarding an unexpected gray background being indicative of an error, I checked the logs, which I should have paid more attention to, even though it did render, minus the gradient.
And sure enough there was an EXCEPTION CAUGHT BY WIDGETS LIBRARY pointing to my incorrect use of Spacer() as the only child of Container(). It was unnecessary as well because the container will grow to it's set width/height anyway.
Removing Spacer() removed all errors and now flutter run -d chrome --release displays the gradient.
ClipPath(
clipper: TopClipper(),
child: Container(
/// Calling static "gradient" above.
decoration: TopClipper.gradient,
width: double.infinity,
height: expandedHeight,
),
)
I wanna make a decorated border as in the image in scrollable widget
Your images dimension is 473 × 670. Corner decoration size 115 x 115. So you can use the centerSlice property to stretch your image according to your needs. Just like this...
Image.asset(
"images/decorated_image.png",
height: 1000, // device or widget height
width: 350, // device or widget height
centerSlice: const Rect.fromLTRB(115, 115, 358, 555),
)
Now you can use stack or any other of your prefered method to put this behind your scrollable list.
You can use Stack:
Stack(
children: [
Image(), // your border image
Container(margin: EdgeInsets.all(12)) // other widgets inside border
]
)
I am using ImageNetwork for loading the gif but its getting cropped after one complete circle .
The same gif working fine in android natively.
Here is the code i am using :
Image.file("gif_url",
height: ScreenUtil().setHeight(250),
width: ScreenUtil.screenWidthDp,
fit: BoxFit.fitHeight)
Below is the link of the result video of the gif i am getting.
With Flutter i am getting this result:
With Native i am getting this result:
I want the same result as in Native one.
Please let me know how can i achieve that
try Image.asset like following:
Image.asset(
AssetUtils.loader // path to gif file,
alignment: Alignment.center,
fit: BoxFit.scaleDown,
height: MediaQueryUtils(context).height * 0.1,
width: MediaQueryUtils(context).height * 0.1,
),
I want to have a line that has 100% parent height, the line should has a fluid height following it's parent's height. the parent's height would be dynamic because every content has it's own height. Just like in Path app.
This is my app, currently I'm setting the height as a constant, how to make it dynamic following it's parent's height? :
Container(
width: 1,
color: Colors. redAccent,
height: 300, // <-- this height
)
try to use the Expanded Widget which uses the available space. you just have to definewhat is the available space here
Expanded(
child: Container(
color: Colors.amber,
width: 100,
),
),
here, if you dont put something on top of the expanded, it will take all the screen
and if not on the bottom, it will reach the bottom of the screen.
it takes the whole free space.
I solved this by adding container and add border left :)
The flutter_web docos say to that dart:svg is ported, but how do you use that with the flutter asset / widget system?
Honestly the best solution I've found is to load the image over a network for the web. Store the asset on a CDN somewhere, get it from the CDN on the web version, and retrieve it from your assets locally on iOS/Android.
I've created a CrossPlatformSvg widget using this library: https://pub.dev/packages/flutter_svg, something like:
class CrossPlatformSvg {
static Widget asset(
String assetPath, {
double width,
double height,
BoxFit fit = BoxFit.contain,
Color color,
alignment = Alignment.center,
String semanticsLabel,
}) {
// `kIsWeb` is a special Flutter variable that just exists
// Returns true if we're on web, false for mobile
if (kIsWeb) {
return Image.network(
assetPath,
width: width,
height: height,
fit: fit,
color: color,
alignment: alignment,
);
} else {
return SvgPicture.network(
assetPath,
width: width,
height: height,
fit: fit,
color: color,
alignment: alignment,
placeholderBuilder: (_) => Container(
width: 30,
height: 30,
padding: EdgeInsets.all(30),
child: CircularIndicator(),
),
);
}
}
}
#aterenshkov's approach worked for me (see comments under Jack's answer). Here are the details to implement...
iOS / Android
child: SvgPicture.asset('assets/yourimage.svg')
Web
// remove assets folder reference
child: SvgPicture.asset('yourimage.svg')
Combine these 2 together...
import 'package:flutter/foundation.dart'; // provides kIsWeb property
...
child: kIsWeb ? SvgPicture.asset('yourimage.svg') : SvgPicture.asset('assets/yourimage.svg')
My Flutter web app would render SVGs in a desktop web browser but not a mobile web browser using flutter_svg. I found it necessary to build with canvaskit support in order for SVGs to render on mobile:
flutter build web --web-renderer canvaskit
However, the docs state that canvaskit adds about 2MB in download size, which was a dealbreaker for me. Sad to say, but I will be using raster images until this is resolved.
flutter_svg version 1.0.0 is out since Dec 2, 2021 including web support. So there is no longer a blocker to use svg images inside a Flutter project.
#RumbleFish has nicely but using ternary operation at many can make the code messy.
My approach to this is:
Create an Extension Function on String to replace assets/ from the path.
extension ForWeb on String {
String forWeb({required bool web}) => web ? this.replaceFirst('assets/','') : this;
}
Now in code:
SvgPicture.asset("assets/images/logo.png".forWeb(web: kIsWeb));