How to add a asset images using Image_stack package - flutter

Question

I am trying to add a asset images using image_stack package. I can't add images to a list in image_stack. I can only add a network images. I can't add a asset image.

Answer 1

Yes, you can not add any asset image because image_stack doesn't support that.
But you create your own widget and use it. Something like below.
custom_image_stack.dart
import 'package:flutter/material.dart';
class CustomImageStack extends StatelessWidget {
final List<String> imageList;
final double imageRadius;
final int imageCount;
final int totalCount;
final double imageBorderWidth;
final Color imageBorderColor;
final TextStyle extraCountTextStyle;
final Color backgroundColor;
CustomImageStack({
Key key,
#required this.imageList,
this.imageRadius = 25,
this.imageCount = 3,
this.totalCount,
this.imageBorderWidth = 2,
this.imageBorderColor = Colors.grey,
this.extraCountTextStyle = const TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
),
this.backgroundColor = Colors.white,
}) : assert(imageList != null),
assert(extraCountTextStyle != null),
assert(imageBorderColor != null),
assert(backgroundColor != null),
assert(totalCount != null),
super(key: key);
#override
Widget build(BuildContext context) {
var images = List<Widget>();
int _size = imageCount;
if (imageList.isNotEmpty) images.add(circularImage(imageList[0]));
if (imageList.length > 1) {
if (imageList.length < _size) {
_size = imageList.length;
}
images.addAll(imageList
.sublist(1, _size)
.asMap()
.map((index, image) => MapEntry(
index,
Positioned(
left: 0.8 * imageRadius * (index + 1.0),
child: circularImage(image),
),
))
.values
.toList());
}
return Container(
child: Row(
children: <Widget>[
images.isNotEmpty
? Stack(
overflow: Overflow.visible,
textDirection: TextDirection.rtl,
children: images.reversed.toList(),
)
: SizedBox(),
Container(
margin: EdgeInsets.only(left: imageRadius / 2 * imageCount + 5),
child: totalCount - images.length > 0
? Container(
constraints: BoxConstraints(minWidth: imageRadius),
padding: EdgeInsets.all(3),
height: imageRadius,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(imageRadius),
border: Border.all(color: imageBorderColor, width: imageBorderWidth),
color: backgroundColor),
child: Center(
child: Text(
'+${totalCount - images.length}',
textAlign: TextAlign.center,
style: extraCountTextStyle,
),
),
)
: SizedBox(),
),
],
),
);
}
Widget circularImage(String imageUrl) {
return Container(
height: imageRadius,
width: imageRadius,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: imageBorderWidth,
),
),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
image: DecorationImage(
image: isLink(imageUrl) ? NetworkImage(imageUrl) : AssetImage(imageUrl),
fit: BoxFit.cover,
),
),
),
);
}
bool isLink(String str) {
var regex = RegExp('^(http|https):.*\.(co|org|in)');
return regex.hasMatch(str);
}
}
main.dart
import 'package:flutter/material.dart';
import 'custom_image_stack.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> images = [
"assets/ajay.png",
"https://i.stack.imgur.com/IJ8Ep.jpg?s=48&g=1",
"assets/ajay.png",
"https://i.stack.imgur.com/IJ8Ep.jpg?s=48&g=1",
"assets/ajay.png",
"https://i.stack.imgur.com/IJ8Ep.jpg?s=48&g=1",
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: CustomImageStack(
imageList: images,
imageCount: 3,
imageBorderWidth: 3,
totalCount: images.length,
)),
);
}
}
Hope it helps :)