I am trying to add NetworkImage inside Container but when I add .svg image I get error but it works for the other formats like .png, .jpeg, etc
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://upload.wikimedia.org/wikipedia/en/e/eb/Manchester_City_FC_badge.svg")
)
)
Error:
E/flutter (22336): [ERROR:flutter/lib/ui/painting/codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
Flutter Doesn't support svg format yet (issue).
You can use flutter_svg 0.13.0+2, a library to load and show svg files
another solution using flutter_svg package: info
final String assetName = 'assets/image.svg';
final Widget svg = SvgPicture.asset(
assetName,
semanticsLabel: 'Acme Logo'
);
For my case i was consuming an endpoint with Svgs :
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: countries.length,
physics: ScrollPhysics(),
itemBuilder: (context, index){
final Widget networkSvg = SvgPicture.network(
'${countries[index].flag}',
fit: BoxFit.fill,
semanticsLabel: 'A shark?!',
placeholderBuilder: (BuildContext context) => Container(
padding: const EdgeInsets.all(30.0),
child: const CircularProgressIndicator(
backgroundColor: Colors.redAccent,
)),);
return
Column(
children: [
ListTile(
title: Text('${countries[index].name}'),
leading: CircleAvatar(
backgroundColor: Colors.white,
child: networkSvg,
),
)
],
);
});
Related
This is my pubspec.yaml
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- images/img_rectangle1.jpg
I have established an assets folder and included it with my.png picture; but, I am experiencing difficulty with the widgets.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Korean vocabulary related to traits"),
centerTitle: false,
backgroundColor: const Color(0xFFEC74C8),
),
body: Row(
children: [
Expanded(
child: ListView.builder(
itemCount: koreanNameList.length,
itemBuilder: (context, index) {
KoreanItem item = koreanNameList[index];
return Draggable<KoreanItem>(
data: item,
dragAnchorStrategy: pointerDragAnchorStrategy,
feedback: KoreanNameCard(item: item),
child: KoreanNameCard(item: item));
},
)),
Expanded(
child: ListView.builder(
itemCount: englishanswers.length,
itemBuilder: (context, index) {
return buildEnglishanswerColumn(englishanswers[index]);
},
)),
],
),
);
}
Where exactly should the container that holds the background picture be placed, then?
I have tried to use
AssetImage
but it is not showing on my app.
You need to specify the assets on pubspec.yaml
Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.
Here is an example:
flutter:
assets:
- assets/images/background.png
To include all assets under a directory, specify the directory name with the / character at the end:
flutter:
assets:
- assets/
- assets/images/
sample using image asset
Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/splash/background.png"),
fit: BoxFit.cover,
),
),
child: const Center(
child: Text(
'Hello World!',
style: TextStyle(color: Colors.white),
),
),
);
Reference: Adding assets and images
For setting an image as the background, use this Container widget as the body of your Scaffold.
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image.jpg"),
fit: BoxFit.cover,
),
),
child: child
)
Replace image.jpg with your image name.
I am showing images on gridview but i have a problem. I want to make the image's height and width equal.
This is the picture and I want to make image on the right to the have same width and height like the left one.Or at least put a white cover to missing part.
This is my code:
child: Consumer<Images>(
builder: (ctx, titles, ch) => GridView.builder(
physics: ScrollPhysics(),
itemCount: titles.items.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: getSize(_currentSliderValue),
mainAxisSpacing: 50,
childAspectRatio: 115/162.05,
crossAxisSpacing: 5,
),
itemBuilder: (ctx, index) {
saveallimages(titles.items);
return GestureDetector(
onTap: () => add(titles.items[index].image),
//()=>add(titles.items[index].image),
child: selected.contains(titles
.items[index].image.path
.toString()) ?
Container(child: selectedimage(titles.items[index].image)) :
Container(child: nonselected(titles.items[index].image))
);
And this is my widget function:
Widget selectedimage(image) {
return Stack(children: <Widget>[
Image.file(image, fit: BoxFit.cover),
Positioned(
right: 12,
bottom: 10,
child: Image.asset("assets/images/selected.png", width: 26, height: 26),
)
]);
}
Widget nonselected(image) {
return Stack(children: <Widget>[
Image.file(image, fit: BoxFit.cover),
]);
}
selectedimage function is to put check icon when the image is selected.
Instead of use Image.file or Image.asset as a child you can try using AssetImage or FileImage inside Container decoration like :
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: FileImage(image),
fit: BoxFit.cover,
),
)
)
I've just implemented the Flutter package cached_network_image and I wonder how I can preload images so they're available later in an instant. I retrieve all image-urls that will be used later from the our server.
I've defined my custom cache manager getter:
class LocalCacheManager {
static const key = 'customCacheKey';
static CacheManager instance = CacheManager(
Config(
key,
stalePeriod: const Duration(days: 14),
maxNrOfCacheObjects: 200,
repo: JsonCacheInfoRepository(databaseName: key),
fileSystem: LocalCacheFileSystem(key),
fileService: HttpFileService(),
),
);
}
Here's how I currently try to preload the image:
LocalCacheManager.instance.downloadFile(MY_IMAGE_URL)),
And here's how I create the widget:
child: CachedNetworkImage(imageUrl: MY_IMAGE_URL, cacheManager: LocalCacheManager.instance),
But I can clearly see that files are always cached again as soon as I create the CachedNetworkImage.
You can use Flutter Cache Manager like this
DefaultCacheManager().downloadFile(MY_IMAGE_URL).then((_) {});
Later, just use your cached image like this
child: CachedNetworkImage(imageUrl: MY_IMAGE_URL,),
Simplest and workable way is to use precacheImage (flutter build-in function) with CachedNetworkImageProvider:
Image image = Image(
image: CachedNetworkImageProvider(/* url */),
fit: BoxFit.cover,
);
precacheImage(image.image, context);
return Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: image,
),
);
cached_network_image: ^2.0.0
CachedNetworkImage(
imageUrl: yoururl,
errorWidget: (context, url, error) => Text("error"),
imageBuilder: (context, imageProvider) => CircleAvatar(
radius: 120,
backgroundImage: imageProvider,
),
placeholder: (context, url) => CircularProgressIndicator(
backgroundColor: primary,
),
),
I am trying to create an app with a scroll view and the objects are clickable like the google news app. Can anyone answer how to animate the container to have a white glow on holding the tile?
Here is the list view builder I have for the app
Container(
padding: EdgeInsets.only(top: 16),
child: ListView.builder(
physics: ClampingScrollPhysics(),
itemCount: article.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
return news_tile(
imageurl: article[index].urlToimage,
news_title: article[index].title,
news_desc: article[index].description,
web_url: article[index].url
);
}),
)
and this is the contents of the tile which the list view builder calls
class news_tile extends StatelessWidget {
String imageurl, news_title, news_desc,web_url;
news_tile({this.imageurl, this.news_title, this.news_desc,this.web_url});
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(
builder: (context) => article_view(
web_url: web_url,
)
));
},
child: Container(
margin: EdgeInsets.only(bottom: 16),
child: Column(
children: <Widget>[
ClipRRect(borderRadius: BorderRadius.circular(6), child: Image.network(imageurl)),
SizedBox(
height: 8,
),
Text(news_title, style: TextStyle(fontSize: 17,fontWeight: FontWeight.w600)),
SizedBox(
height: 8,
),
Text(news_desc, style: TextStyle(color: Colors.black54))
],
),
),
);
}
}
You could go with the InkWell Widget. It provides a tapping/holding color effect similar to that. Have a look at the official docs here:
https://api.flutter.dev/flutter/material/InkWell-class.html
Note that you need a Material Widget as an ancestor of your InkWell, but the docs explain that more.
Hope it works for you!
Edit: Sorry, since you are working with a Container, Ink is also important for you:
https://api.flutter.dev/flutter/material/Ink-class.html
Check the docs section "The ink splashes aren't visible!" for why that is.
I am using flutter_swiper package in my app. I have following code:
Container(
height: size.getSizePx(200),
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return Align(
alignment: Alignment.topLeft,
child: Container(
height: size.getSizePx(200),
child: Image.network(imageList[index].thumb),
),
);
},
itemCount: imageList.length,
),
)
Image size that comes server is normally 370x276
Problem
Swiper works very well, but space between two images is very big. Is there any how I can control the spaces between Swiper slides (images)?
Thanks