Mixing
Flutter: determine the size of placeholder to match the actual size of the image
Im trying to load images from internet but i want to show a placeholder till load finishes.
How can i determine the size of placeholder to match the actual size of the image?
The width and height of the image from the api are 2000, 3000 respectively, how can i convert these values?
flutter flutter-layout asked Nov 20 '18 at 16:01
M.AliM.Ali
288112
add a comment |
Im trying to load images from internet but i want to show a placeholder till load finishes.
How can i determine the size of placeholder to match the actual size of the image?
The width and height of the image from the api are 2000, 3000 respectively, how can i convert these values?
flutter flutter-layout asked Nov 20 '18 at 16:01
M.AliM.Ali
288112
Do you know the size before hand? I do not think you can figure out the size of the image before you are able to load it
– user1462442
Nov 20 '18 at 17:09
The api provides the image width and height for example 2000w, 3000h
– M.Ali
Nov 20 '18 at 17:13
I dont know how to use these values
– M.Ali
Nov 20 '18 at 17:13
Ok, I will try to answer the question. Do you need sample code? I can tell you the needed classes
– user1462442
Nov 20 '18 at 17:15
It doesn't matter
– M.Ali
Nov 20 '18 at 17:24
add a comment |
Im trying to load images from internet but i want to show a placeholder till load finishes.
How can i determine the size of placeholder to match the actual size of the image?
The width and height of the image from the api are 2000, 3000 respectively, how can i convert these values?
flutter flutter-layout asked Nov 20 '18 at 16:01
M.AliM.Ali
288112
Im trying to load images from internet but i want to show a placeholder till load finishes.
How can i determine the size of placeholder to match the actual size of the image?
The width and height of the image from the api are 2000, 3000 respectively, how can i convert these values?
flutter flutter-layout flutter flutter-layout asked Nov 20 '18 at 16:01
M.AliM.Ali
288112
asked Nov 20 '18 at 16:01
M.AliM.Ali
288112
asked Nov 20 '18 at 16:01
M.AliM.Ali
288112
asked Nov 20 '18 at 16:01
M.AliM.Ali
288112
asked Nov 20 '18 at 16:01
M.AliM.Ali
288112
288112
Do you know the size before hand? I do not think you can figure out the size of the image before you are able to load it
– user1462442
Nov 20 '18 at 17:09
The api provides the image width and height for example 2000w, 3000h
– M.Ali
Nov 20 '18 at 17:13
I dont know how to use these values
– M.Ali
Nov 20 '18 at 17:13
Ok, I will try to answer the question. Do you need sample code? I can tell you the needed classes
– user1462442
Nov 20 '18 at 17:15
It doesn't matter
– M.Ali
Nov 20 '18 at 17:24
add a comment |
Do you know the size before hand? I do not think you can figure out the size of the image before you are able to load it
– user1462442
Nov 20 '18 at 17:09
The api provides the image width and height for example 2000w, 3000h
– M.Ali
Nov 20 '18 at 17:13
I dont know how to use these values
– M.Ali
Nov 20 '18 at 17:13
Ok, I will try to answer the question. Do you need sample code? I can tell you the needed classes
– user1462442
Nov 20 '18 at 17:15
It doesn't matter
– M.Ali
Nov 20 '18 at 17:24
Do you know the size before hand? I do not think you can figure out the size of the image before you are able to load it
– user1462442
Nov 20 '18 at 17:09
Do you know the size before hand? I do not think you can figure out the size of the image before you are able to load it
– user1462442
Nov 20 '18 at 17:09
The api provides the image width and height for example 2000w, 3000h
– M.Ali
Nov 20 '18 at 17:13
The api provides the image width and height for example 2000w, 3000h
– M.Ali
Nov 20 '18 at 17:13
I dont know how to use these values
– M.Ali
Nov 20 '18 at 17:13
I dont know how to use these values
– M.Ali
Nov 20 '18 at 17:13
Ok, I will try to answer the question. Do you need sample code? I can tell you the needed classes
– user1462442
Nov 20 '18 at 17:15
Ok, I will try to answer the question. Do you need sample code? I can tell you the needed classes
– user1462442
Nov 20 '18 at 17:15
It doesn't matter
– M.Ali
Nov 20 '18 at 17:24
It doesn't matter
– M.Ali
Nov 20 '18 at 17:24
add a comment |
1 Answer
1
active
oldest
votes
There are a few parts to the question,
First, you should download an image the from the web through one of many methods.
https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html
https://docs.flutter.io/flutter/widgets/Image/Image.network.html
get the bytes and convert to an image with this https://docs.flutter.io/flutter/widgets/Image/Image.memory.html
Here are the widgets you should use.
You should use this widget as a sized placeholder.
https://docs.flutter.io/flutter/widgets/SizedBox-class.html
Here is a possible child to show a loading animation
https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html
To display it, you can either complete the FutureBuilder or
Image im = null;
Map imageDimensions = null;
initState(){
fetchImageDimension.fetch().then((imageD) => setState(){imageDimensions = imageD;})
somefuntion.fetch().then((image) => setState(){im = image;})
}
Widget build(buildContext context){
var width = imageDimensions["width"];
var height = imageDimensions["height"];
var placeholderColor = imageDimensions["color"];
var dimensionsLoaded = imageDimensions != null;
var imageLoaded = im != null;
return if(imageLoaded)
Image.....
else {
if(dimensionsLoaded) {
SizedBox(
width: width,
height: height,
child: const Card(child: Container(color: Color(placeholderColor)),
)
} else {
//neigher image or dimensions are Loaded. Nothing you can do
}
}
}
}
This code is not meant to be compiled but it is meant to show the possible options to answer the question.
answered Nov 20 '18 at 17:30
user1462442user1462442
1,141817
Which part? You are asking how to make a placeholder widget. You provided no information on the api etc
– user1462442
Nov 20 '18 at 17:41
"width": 5245, "height": 3497, "color": "#60544D", this is part of the API response, i need a way to utilize these values
– M.Ali
Nov 20 '18 at 17:42
ok I will edit my response. Most of my answer will be the same
– user1462442
Nov 20 '18 at 17:47
Man!, i can not use the width and height of 5245,3497 inside flutter, i`m asking for a way to convert these values to be able to use them
– M.Ali
Nov 20 '18 at 17:54
Dude, you keep making revisions to your question. Sized box should accept doubles and floating point numbers
– user1462442
Nov 20 '18 at 17:56
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396921%2fflutter-determine-the-size-of-placeholder-to-match-the-actual-size-of-the-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There are a few parts to the question,
First, you should download an image the from the web through one of many methods.
https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html
https://docs.flutter.io/flutter/widgets/Image/Image.network.html
get the bytes and convert to an image with this https://docs.flutter.io/flutter/widgets/Image/Image.memory.html
Here are the widgets you should use.
You should use this widget as a sized placeholder.
https://docs.flutter.io/flutter/widgets/SizedBox-class.html
Here is a possible child to show a loading animation
https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html
To display it, you can either complete the FutureBuilder or
Image im = null;
Map imageDimensions = null;
initState(){
fetchImageDimension.fetch().then((imageD) => setState(){imageDimensions = imageD;})
somefuntion.fetch().then((image) => setState(){im = image;})
}
Widget build(buildContext context){
var width = imageDimensions["width"];
var height = imageDimensions["height"];
var placeholderColor = imageDimensions["color"];
var dimensionsLoaded = imageDimensions != null;
var imageLoaded = im != null;
return if(imageLoaded)
Image.....
else {
if(dimensionsLoaded) {
SizedBox(
width: width,
height: height,
child: const Card(child: Container(color: Color(placeholderColor)),
)
} else {
//neigher image or dimensions are Loaded. Nothing you can do
}
}
}
}
This code is not meant to be compiled but it is meant to show the possible options to answer the question.
answered Nov 20 '18 at 17:30
user1462442user1462442
1,141817
Which part? You are asking how to make a placeholder widget. You provided no information on the api etc
– user1462442
Nov 20 '18 at 17:41
"width": 5245, "height": 3497, "color": "#60544D", this is part of the API response, i need a way to utilize these values
– M.Ali
Nov 20 '18 at 17:42
ok I will edit my response. Most of my answer will be the same
– user1462442
Nov 20 '18 at 17:47
Man!, i can not use the width and height of 5245,3497 inside flutter, i`m asking for a way to convert these values to be able to use them
– M.Ali
Nov 20 '18 at 17:54
Dude, you keep making revisions to your question. Sized box should accept doubles and floating point numbers
– user1462442
Nov 20 '18 at 17:56
|
show 2 more comments
There are a few parts to the question,
First, you should download an image the from the web through one of many methods.
https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html
https://docs.flutter.io/flutter/widgets/Image/Image.network.html
get the bytes and convert to an image with this https://docs.flutter.io/flutter/widgets/Image/Image.memory.html
Here are the widgets you should use.
You should use this widget as a sized placeholder.
https://docs.flutter.io/flutter/widgets/SizedBox-class.html
Here is a possible child to show a loading animation
https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html
To display it, you can either complete the FutureBuilder or
Image im = null;
Map imageDimensions = null;
initState(){
fetchImageDimension.fetch().then((imageD) => setState(){imageDimensions = imageD;})
somefuntion.fetch().then((image) => setState(){im = image;})
}
Widget build(buildContext context){
var width = imageDimensions["width"];
var height = imageDimensions["height"];
var placeholderColor = imageDimensions["color"];
var dimensionsLoaded = imageDimensions != null;
var imageLoaded = im != null;
return if(imageLoaded)
Image.....
else {
if(dimensionsLoaded) {
SizedBox(
width: width,
height: height,
child: const Card(child: Container(color: Color(placeholderColor)),
)
} else {
//neigher image or dimensions are Loaded. Nothing you can do
}
}
}
}
This code is not meant to be compiled but it is meant to show the possible options to answer the question.
answered Nov 20 '18 at 17:30
user1462442user1462442
1,141817
Which part? You are asking how to make a placeholder widget. You provided no information on the api etc
– user1462442
Nov 20 '18 at 17:41
"width": 5245, "height": 3497, "color": "#60544D", this is part of the API response, i need a way to utilize these values
– M.Ali
Nov 20 '18 at 17:42
ok I will edit my response. Most of my answer will be the same
– user1462442
Nov 20 '18 at 17:47
Man!, i can not use the width and height of 5245,3497 inside flutter, i`m asking for a way to convert these values to be able to use them
– M.Ali
Nov 20 '18 at 17:54
Dude, you keep making revisions to your question. Sized box should accept doubles and floating point numbers
– user1462442
Nov 20 '18 at 17:56
|
show 2 more comments
There are a few parts to the question,
First, you should download an image the from the web through one of many methods.
https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html
https://docs.flutter.io/flutter/widgets/Image/Image.network.html
get the bytes and convert to an image with this https://docs.flutter.io/flutter/widgets/Image/Image.memory.html
Here are the widgets you should use.
You should use this widget as a sized placeholder.
https://docs.flutter.io/flutter/widgets/SizedBox-class.html
Here is a possible child to show a loading animation
https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html
To display it, you can either complete the FutureBuilder or
Image im = null;
Map imageDimensions = null;
initState(){
fetchImageDimension.fetch().then((imageD) => setState(){imageDimensions = imageD;})
somefuntion.fetch().then((image) => setState(){im = image;})
}
Widget build(buildContext context){
var width = imageDimensions["width"];
var height = imageDimensions["height"];
var placeholderColor = imageDimensions["color"];
var dimensionsLoaded = imageDimensions != null;
var imageLoaded = im != null;
return if(imageLoaded)
Image.....
else {
if(dimensionsLoaded) {
SizedBox(
width: width,
height: height,
child: const Card(child: Container(color: Color(placeholderColor)),
)
} else {
//neigher image or dimensions are Loaded. Nothing you can do
}
}
}
}
This code is not meant to be compiled but it is meant to show the possible options to answer the question.
answered Nov 20 '18 at 17:30
user1462442user1462442
1,141817
There are a few parts to the question,
First, you should download an image the from the web through one of many methods.
https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html
https://docs.flutter.io/flutter/widgets/Image/Image.network.html
get the bytes and convert to an image with this https://docs.flutter.io/flutter/widgets/Image/Image.memory.html
Here are the widgets you should use.
You should use this widget as a sized placeholder.
https://docs.flutter.io/flutter/widgets/SizedBox-class.html
Here is a possible child to show a loading animation
https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html
To display it, you can either complete the FutureBuilder or
Image im = null;
Map imageDimensions = null;
initState(){
fetchImageDimension.fetch().then((imageD) => setState(){imageDimensions = imageD;})
somefuntion.fetch().then((image) => setState(){im = image;})
}
Widget build(buildContext context){
var width = imageDimensions["width"];
var height = imageDimensions["height"];
var placeholderColor = imageDimensions["color"];
var dimensionsLoaded = imageDimensions != null;
var imageLoaded = im != null;
return if(imageLoaded)
Image.....
else {
if(dimensionsLoaded) {
SizedBox(
width: width,
height: height,
child: const Card(child: Container(color: Color(placeholderColor)),
)
} else {
//neigher image or dimensions are Loaded. Nothing you can do
}
}
}
}
This code is not meant to be compiled but it is meant to show the possible options to answer the question.
answered Nov 20 '18 at 17:30
user1462442user1462442
1,141817
edited Nov 20 '18 at 17:54
answered Nov 20 '18 at 17:30
user1462442user1462442
1,141817
answered Nov 20 '18 at 17:30
user1462442user1462442
1,141817
answered Nov 20 '18 at 17:30
user1462442user1462442
1,141817
1,141817
Which part? You are asking how to make a placeholder widget. You provided no information on the api etc
– user1462442
Nov 20 '18 at 17:41
"width": 5245, "height": 3497, "color": "#60544D", this is part of the API response, i need a way to utilize these values
– M.Ali
Nov 20 '18 at 17:42
ok I will edit my response. Most of my answer will be the same
– user1462442
Nov 20 '18 at 17:47
Man!, i can not use the width and height of 5245,3497 inside flutter, i`m asking for a way to convert these values to be able to use them
– M.Ali
Nov 20 '18 at 17:54
Dude, you keep making revisions to your question. Sized box should accept doubles and floating point numbers
– user1462442
Nov 20 '18 at 17:56
|
show 2 more comments
Which part? You are asking how to make a placeholder widget. You provided no information on the api etc
– user1462442
Nov 20 '18 at 17:41
"width": 5245, "height": 3497, "color": "#60544D", this is part of the API response, i need a way to utilize these values
– M.Ali
Nov 20 '18 at 17:42
ok I will edit my response. Most of my answer will be the same
– user1462442
Nov 20 '18 at 17:47
Man!, i can not use the width and height of 5245,3497 inside flutter, i`m asking for a way to convert these values to be able to use them
– M.Ali
Nov 20 '18 at 17:54
Dude, you keep making revisions to your question. Sized box should accept doubles and floating point numbers
– user1462442
Nov 20 '18 at 17:56
Which part? You are asking how to make a placeholder widget. You provided no information on the api etc
– user1462442
Nov 20 '18 at 17:41
Which part? You are asking how to make a placeholder widget. You provided no information on the api etc
– user1462442
Nov 20 '18 at 17:41
"width": 5245, "height": 3497, "color": "#60544D", this is part of the API response, i need a way to utilize these values
– M.Ali
Nov 20 '18 at 17:42
"width": 5245, "height": 3497, "color": "#60544D", this is part of the API response, i need a way to utilize these values
– M.Ali
Nov 20 '18 at 17:42
ok I will edit my response. Most of my answer will be the same
– user1462442
Nov 20 '18 at 17:47
ok I will edit my response. Most of my answer will be the same
– user1462442
Nov 20 '18 at 17:47
Man!, i can not use the width and height of 5245,3497 inside flutter, i`m asking for a way to convert these values to be able to use them
– M.Ali
Nov 20 '18 at 17:54
Man!, i can not use the width and height of 5245,3497 inside flutter, i`m asking for a way to convert these values to be able to use them
– M.Ali
Nov 20 '18 at 17:54
Dude, you keep making revisions to your question. Sized box should accept doubles and floating point numbers
– user1462442
Nov 20 '18 at 17:56
Dude, you keep making revisions to your question. Sized box should accept doubles and floating point numbers
– user1462442
Nov 20 '18 at 17:56
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396921%2fflutter-determine-the-size-of-placeholder-to-match-the-actual-size-of-the-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do you know the size before hand? I do not think you can figure out the size of the image before you are able to load it
– user1462442
Nov 20 '18 at 17:09
The api provides the image width and height for example 2000w, 3000h
– M.Ali
Nov 20 '18 at 17:13
I dont know how to use these values
– M.Ali
Nov 20 '18 at 17:13
Ok, I will try to answer the question. Do you need sample code? I can tell you the needed classes
– user1462442
Nov 20 '18 at 17:15
It doesn't matter
– M.Ali
Nov 20 '18 at 17:24