I have generated an image using the Flutter camera plugin.
I am trying to display it.
My path looks like:
/data/user/0/com.example.myapp/app_flutter/picture2.jpg
How should I load it ?
I tried :
new Image.network("file:///"+imagePath)
but I get the error :
Another exception was thrown: Invalid argument(s): No host specified in URI file:////data/user/0/com.example.myapp/app_flutter/picture2.jpg
The way is to use :
new Image.file(File(imagePath))
see stackoverflow questions
Use FileImage like below. It takes the File as the parameter.
_image = File(path);
Container(
padding: const EdgeInsets.all(1.0),
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: FileImage(_image), fit: BoxFit.cover)),
)
Related
I'm creating a native app where I'm using image URI instead of png or jpg image just to reduce the size. But the issue is that the image URI is not loading/showing in ios. I tried on android and the web it's working.
Here is the code
//Image URI
var _hello_Image_Uri = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ5NS45NCA0OTUuOTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTQxNC43MzcgNTkuOThjLTkuNTA2IDM1LjQ4NS0zNy43MzEgMTQwLjgyOS00Ny45MSAxNzguODIgNy45MTYgNy45MTYgMTcuNTA1IDE2Ljk3IDI1LjE0IDM0LjU2IDEwLjA3NCAyMy4wNzYgOCAzNS42ODkgOCA5MC41OCAwIDcyLjktNTkuMSAxMzItMTMyIDEzMmgtNTZjLTczLjA5IDAtMTMyLTU5LjI5OS0xMzItMTMyIDAtNjcuNDM5IDAgMTIyLjEwNSAwLTE2NCAwLTE3LjY3OSAxNC4zMTktMzIgMzItMzIgMTcuNjcgMCAzMiAxNC4zMyAzMiAzMnYtMjhjMC0yMy44OTQgMjIuODY4LTQxLjIzNCA0Ni4wNS0zNC41Ny0yMi4yNTktODMuMDU5LTE2Ljg0My02Mi44NDgtMjQuNjgtOTIuMS0yLjU3LTkuNi0xLjAxLTE5LjM0IDMuNTktMjcuMzIgMTUuOTU5LTI3LjU2NiA1Ny42NDUtMjIuMzE4IDY1Ljk2IDguNjggNC45NyAxOC41NTguMDQ5LjE5MiA0OC41OCAxODEuMzFoMTcuMDhjMi4wMzMtNy41ODUgNDEuOTktMTU2LjcwMyA0NC42NC0xNjYuNTkgNS4xNS0xOS4yMSAyNC44OS0zMC42IDQ0LjA5LTI1LjQ2IDE5LjE4NyA1LjEzNyAzMC42MTEgMjQuODUxIDI1LjQ2IDQ0LjA5eiIgZmlsbD0iI2Y5Y2ZhYyIgZGF0YS1vcmlnaW5hbD0iI2Y5Y2ZhYyIgc3R5bGU9IiI+PC9wYXRoPjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iI2ZmZTRjYyI+PHBhdGggZD0ibTIzMS45NjcgMTkxLjk0di0yMGMwLTE5LjQ2LTEwLjc0LTM2LjQ1LTI2LjYtNDUuMzZsLTMxLjktMTE0LjgzYzE4Ljc1NS0yMC43MjMgNTMuOTUxLTEyLjk2OCA2MS40MiAxNC44OCA2LjA1MSAyMi41OTYtMS42NjUtNi4yMDUgNDQuMjkgMTY1LjMxeiIgZmlsbD0iI2ZmZTRjYyIgZGF0YS1vcmlnaW5hbD0iI2ZmZTRjYyIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIGQ9Im00MTQuNzM3IDU5Ljk4Yy05LjY0OCAzNi4wMTItMzQuMjE4IDEyNy43MTYtNDMuMTMgMTYwLjk4LTEwLjA1My0xMC4wNjYtMjYuNDk4LTI5LjAyLTU4Ljg0LTI5LjAyaC03LjkzYzcuMjUxLTI3LjA2MSAzNS42NjUtMTMzLjEwNiA0MC4zNS0xNTAuNTkgNS4xNS0xOS4yMSAyNC44OS0zMC42IDQ0LjA5LTI1LjQ2IDE5LjE4NyA1LjEzNyAzMC42MTEgMjQuODUxIDI1LjQ2IDQ0LjA5eiIgZmlsbD0iI2ZmZTRjYyIgZGF0YS1vcmlnaW5hbD0iI2ZmZTRjYyIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIGQ9Im0xOTkuOTY3IDIyMy45NGMwIDE2LjU4IDUuNjQgMzEuODcgMTUuMSA0NC4wNi0zLjA4NiAxMy40NDUtMTMuNjQgMjMuOTktMjcuMSAyNy4wNS0xNi4wMy0zLjY0LTI4LTE3Ljk4LTI4LTM1LjExdi0xMTcuOTRjMjMuNTk5LTE1LjgwMiA1NiAuOTY3IDU2IDI5Ljk0djI0LjI5Yy05LjYwNiA1LjUyMy0xNiAxNS44NzctMTYgMjcuNzF6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdHlsZT0iIj48L3BhdGg+PHBhdGggZD0ibTE0My45NjcgMTk5Ljk0djcyYzAgMTQuODk2LTEwLjE4NSAyNy40NS0yNCAzMC45OS0xMy44LTMuNTUtMjQtMTYuMDgtMjQtMzAuOTl2LTk5LjcyYzIxLjE1OS0xMi4yMTggNDggMi45OTQgNDggMjcuNzJ6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdHlsZT0iIj48L3BhdGg+PHBhdGggZD0ibTM5OS45NjcgMzYzLjk0YzAgNDAuNjYtMTguMzggNzcuMDItNDcuMjkgMTAxLjI0LTE4LjE3IDkuNDMtMzguODIgMTQuNzYtNjAuNzEgMTQuNzZoLTU2Yy03Mi41NjIgMC0xMzItNTguNzgtMTMyLTEzMnYtMjguNjdjMTYuOTYgMi44NyAzNC4zMDItMy41MzkgNDUuMzYtMTcuMjIuMDc4LS4xMTYuMDU3LS4wNzIuMTItLjA0IDI2LjY5NSAxOS40NjkgNjQuODI0IDkuMjYzIDc4LjIxLTIxLjM2IDIyLjAzIDE3LjI4MyA0Mi4wNzQgMTUuMjkgNjIuMjggMTUuMjktNTAuMjM4IDE4LjA3LTg2LjIwMyA2NC41MDctODkuNjkgMTE5LjMtLjI3NSA0LjY2NCAzLjM3NCA4LjMzOSA3Ljc2IDguNDcgNC4zMi4xMyA3LjkzLTMuMjEgOC4yMS03LjUzIDMuNjY3LTU3LjE4MSA0Ny40MDktMTAzLjY2OSAxMDMuNzUtMTExLjE4IDAtOS4wNzEtMi45MS0xNy41NjEtNy43OC0yNC40MS0uNTktLjkyOCAzLjY1Ny0uNjUtNDAuMjItLjY1LTMxLjA2MiAwLTU2LTI1LjIwNy01Ni01NiAwLTguODUzIDcuMTYtMTYgMTYtMTZoODAuOGMxNC44NiAwIDI5LjEgNS45IDM5LjYgMTYuNCAxOS4zMjEgMTkuMzIxIDMwLjgwMiAyOC43NTIgMzkuNiA0OS4wMiAxMC4wNzQgMjMuMDc2IDggMzUuNjg5IDggOTAuNTh6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdHlsZT0iIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=";
Container(
width: 120,
height: 120,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
color: Colors.lightGreen,
),
child: Image.network(_hello_Image_Uri),
)
where
Image.network(_hello_Image_Uri),
Issue
════════ Exception caught by image resource service ════════════════════════════
The following ArgumentError was thrown resolving an image codec:
Invalid argument(s): No host specified in URI file:///PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ5NS45NCA0OTUuOTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTQxNC43MzcgNTkuOThjLTkuNTA2IDM1LjQ4NS0zNy43MzEgMTQwLjgyOS00Ny45MSAxNzguODIgNy45MTYgNy45MTYgMTcuNTA1IDE2Ljk3IDI1LjE0IDM0LjU2IDEwLjA3NCAyMy4wNzYgOCAzNS42ODkgOCA5MC41OCAwIDcyLjktNTkuMSAxMzItMTMyIDEzMmgtNTZjLTczLjA5IDAtMTMyLTU5LjI5OS0xMzItMTMyIDAtNjcuNDM5IDAgMTIyLjEwNSAwLTE2NCAwLTE3LjY3OSAxNC4zMTktMzIgMzItMzIgMTcuNjcgMCAzMiAxNC4zMyAzMiAzMnYtMjhjMC0yMy44OTQgMjIuODY4LTQxLjIzNCA0Ni4wNS0zNC41Ny0yMi4yNTktODMuMDU5LTE2Ljg0My02Mi44NDgtMjQuNjgtOTIuMS0yLjU3LTkuNi0xLjAxLTE5LjM0IDMuNTktMjcuMzIgMTUuOTU5LTI3LjU2NiA1Ny42NDUtMjIuMzE4IDY1Ljk2IDguNjggNC45NyAxOC41NTguMDQ5LjE5MiA0OC41OCAxODEuMzFoMTcuMDhjMi4wMzMtNy41ODUgNDEuOTktMTU2LjcwMyA0NC42NC0xNjYuNTkgNS4xNS0xOS4yMSAyNC44OS0zMC42IDQ0LjA5LTI1LjQ2IDE5LjE4NyA1LjEzNyAzMC42MTEgMjQuODUxIDI1LjQ2IDQ0LjA5eiIgZmlsbD0iI2Y5Y2ZhYyIgZGF0YS1vcmlnaW5hbD0iI2Y5Y2ZhYyIgc3R5bGU9IiI+PC9wYXRoPjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iI2ZmZTRjYyI+PHBhdGggZD0ibTIzMS45NjcgMTkxLjk0di0yMGMwLTE5LjQ2LTEwLjc0LTM2LjQ1LTI2LjYtNDUuMzZsLTMxLjktMTE0LjgzYzE4Ljc1NS0yMC43MjMgNTMuOTUxLTEyLjk2OCA2MS40MiAxNC44OCA2LjA1MSAyMi41OTYtMS42NjUtNi4yMDUgNDQuMjkgMTY1LjMxeiIgZmlsbD0iI2ZmZTRjYyIgZGF0YS1vcmlnaW5hbD0iI2ZmZTRjYyIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIGQ9Im00MTQuNzM3IDU5Ljk4Yy05LjY0OCAzNi4wMTItMzQuMjE4IDEyNy43MTYtNDMuMTMgMTYwLjk4LTEwLjA1My0xMC4wNjYtMjYuNDk4LTI5LjAyLTU4Ljg0LTI5LjAyaC03LjkzYzcuMjUxLTI3LjA2MSAzNS42NjUtMTMzLjEwNiA0MC4zNS0xNTAuNTkgNS4xNS0xOS4yMSAyNC44OS0zMC42IDQ0LjA5LTI1LjQ2IDE5LjE4NyA1LjEzNyAzMC42MTEgMjQuODUxIDI1LjQ2IDQ0LjA5eiIgZmlsbD0iI2ZmZTRjYyIgZGF0YS1vcmlnaW5hbD0iI2ZmZTRjYyIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIGQ9Im0xOTkuOTY3IDIyMy45NGMwIDE2LjU4IDUuNjQgMzEuODcgMTUuMSA0NC4wNi0zLjA4NiAxMy40NDUtMTMuNjQgMjMuOTktMjcuMSAyNy4wNS0xNi4wMy0zLjY0LTI4LTE3Ljk4LTI4LTM1LjExdi0xMTcuOTRjMjMuNTk5LTE1LjgwMiA1NiAuOTY3IDU2IDI5Ljk0djI0LjI5Yy05LjYwNiA1LjUyMy0xNiAxNS44NzctMTYgMjcuNzF6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdHlsZT0iIj48L3BhdGg+PHBhdGggZD0ibTE0My45NjcgMTk5Ljk0djcyYzAgMTQuODk2LTEwLjE4NSAyNy40NS0yNCAzMC45OS0xMy44LTMuNTUtMjQtMTYuMDgtMjQtMzAuOTl2LTk5LjcyYzIxLjE1OS0xMi4yMTggNDggMi45OTQgNDggMjcuNzJ6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdHlsZT0iIj48L3BhdGg+PHBhdGggZD0ibTM5OS45NjcgMzYzLjk0YzAgNDAuNjYtMTguMzggNzcuMDItNDcuMjkgMTAxLjI0LTE4LjE3IDkuNDMtMzguODIgMTQuNzYtNjAuNzEgMTQuNzZoLTU2Yy03Mi41NjIgMC0xMzItNTguNzgtMTMyLTEzMnYtMjguNjdjMTYuOTYgMi44NyAzNC4zMDItMy41MzkgNDUuMzYtMTcuMjIuMDc4LS4xMTYuMDU3LS4wNzIuMTItLjA0IDI2LjY5NSAxOS40NjkgNjQuODI0IDkuMjYzIDc4LjIxLTIxLjM2IDIyLjAzIDE3LjI4MyA0Mi4wNzQgMTUuMjkgNjIuMjggMTUuMjktNTAuMjM4IDE4LjA3LTg2LjIwMyA2NC41MDctODkuNjkgMTE5LjMtLjI3NSA0LjY2NCAzLjM3NCA4LjMzOSA3Ljc2IDguNDcgNC4zMi4xMyA3LjkzLTMuMjEgOC4yMS03LjUzIDMuNjY3LTU3LjE4MSA0Ny40MDktMTAzLjY2OSAxMDMuNzUtMTExLjE4IDAtOS4wNzEtMi45MS0xNy41NjEtNy43OC0yNC40MS0uNTktLjkyOCAzLjY1Ny0uNjUtNDAuMjItLjY1LTMxLjA2MiAwLTU2LTI1LjIwNy01Ni01NiAwLTguODUzIDcuMTYtMTYgMTYtMTZoODAuOGMxNC44NiAwIDI5LjEgNS45IDM5LjYgMTYuNCAxOS4zMjEgMTkuMzIxIDMwLjgwMiAyOC43NTIgMzkuNiA0OS4wMiAxMC4wNzQgMjMuMDc2IDggMzUuNjg5IDggOTAuNTh6IiBmaWxsPSIjZmZlNGNjIiBkYXRhLW9yaWdpbmFsPSIjZmZlNGNjIiBzdHlsZT0iIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=
Image.network is for images obtained through a network as the name implies. If you look at the implementation of Image.network, you'll find that it will attempt to make a GET request with an HTTP client. Since there is no host in the URI string you show, this request fails as expected. Source.
There's a lot going wrong with what you're trying to do here. Reducing image size by using SVG is a good idea since I guess you had a vector source, but understand that Flutter does not native support for SVG. It may work on the web when using canvaskit, but not for other platforms. You will need to use the flutter_svg package and can follow this SO answer to find a way to make it work on web as well. I would use the SvgPicture.string or SvgPicture.asset constructors instead of what they show in their answer so that there are no unecessary network requests. This may be more trouble than it's worth and support will be more flakey than using a raster image, but that's up to you. Also be aware that using this package and the canvaskit renderer will increase overall application size, which may not be worth it for only a few images.
Code from linked answer:
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(),
),
);
}
}
}
Your current attempt also unnecessarily increases the amount of data that needs to be stored because you're using a base64 encoded string. Base64 encoding will increase the amount of data that needs to be stored by ~1.5 times, which goes against your intention of reducing size.
how to extract all the relations between classes from a flutter file?
for example, in the below code, The desired output should be
1- I have widget RotationTransition
2- RotationTransition has one child of type Stack
3- Stack has children (Positioned, Center)
4- Positioned has a child of type FlutterLogo
5- Center has one child of type FlutterLogo
(It would be better if it's represented in tree form :D) any ideas How can I get such output?
RotationTransition(
turns: animation,
child: Stack(
children: [
Positioned.fill(
child: FlutterLogo(),
),
Center(
child: Text(
'Click me!',
style: TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
You can use Dart DevTools. It provides all the widget tree like below.
You can use dart tools if you are using VSCode
click on this icon to open dart
and than this will open
here all the widgets will be shown in tree form with there details too
the title might be a bit confusing but i'll try to explain it better with an example.
I am using the widget
Image.asset(
'assets/images/${object.name}.jpg',
),
but i want to show a default image (from assets or network) if the selected one is not available.
Is this possible?
Thanks.
You can use the errorBuilder function to return another widget if the asset loading fails.
Widget createImage(String iconName) {
return Image.asset('assets/icons/${iconName}.png',
errorBuilder: (context, object, stacktrace) =>
Image.asset('assets/icons/default.png'));
}
If you are looking for a placeholder you could use the following package here.
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: new CircularProgressIndicator(),
errorWidget: new Icon(Icons.error),
),
I am trying to implement flutter scrollGallery in my app like this.
ScrollGallery(
<ImageProvider>[
AssetImage('images/y1.jpg'),
AssetImage('images/z3.jpg'),
AssetImage('images/z7.jpg'),
],
fit: BoxFit.contain,
),
But i need click from large image. ie from AssetImage. it will not allow wrap any other widget as imageprovider. how can i get that click?. Is ImageProvider an option? From where i get help for that?
Ever since I updated Flutter for Android Studio, I have been getting this fatal crash everytime I try to run a hot reload:
Initializing hot reload...
I/flutter (20514): [INFO:engine.cc(582)] Could not configure asset bundle at path: /data/user/0/com.natech.flutterlaunch/cache/flutter_launchZTLJVC/flutter_launch/build/flutter_assets
D/MALI (20514): osup_destructor:170: osup_destructor
Lost connection to device.
After this error, my code changes do not bother reflecting on the app even when I run a full restart. Even if I remove all the widgets from the screen in hope it shows a blank space, the app remains the same. Here is my code:
class SplashScreen extends StatelessWidget{
#override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(
image: splashBackgroundImage
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
width: 200.0,
height: 200.0,
alignment: Alignment.center,
decoration: new BoxDecoration(
image: logoImage
),
)
,/*new CircularProgressIndicator(
value: null,
strokeWidth: 1.0,
valueColor: new AlwaysStoppedAnimation<Color>(
Colors.blue
),
)*/
],
),
);
}
}
As you can see I commented out the CircularProgressIndicator but it still shows on the app even after a full restart. Anyone know what might be the issue?
This is very likely due to tracking the master branch, which has had a little instability in the last week or so around hot reloading and asset bundles.
You can try doing a flutter upgrade to see if the latest work in master will resolve your issues; it's more likely that you should be tracking beta (flutter channel beta) instead (or deal with hot reload not working until some more things are ironed out in master).