Flutter 如何从 Firestore 获取 Positioned 中的图像？
Ber*_*kan 5 dart firebase flutter google-cloud-firestore
我已经从 Firestore 获取背景图像、标题数据，但无法在 Positioned 中获取图像。这就是我要的：
我已经有了final Query query = FirebaseFirestore.instance.collection("1doga");
这样的获取卡背景图像：
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
querySnapshot.docs[index].data()['image'],
maxHeight: 200,
maxWidth: 200),
),
),
重点是，我无法从 Firestore 添加图像：
Positioned(
bottom: 19.2,
left: 19.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.8),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaY: 19.2, sigmaX: 19.2),
child: Container(
height: 26,
padding: EdgeInsets.only(
left: 0.0, right: 0.0),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
SizedBox(
width: 9.52,
),
SvgPicture.asset(
'assets/svg/icon_location.svg'),
SizedBox(
width: 9.52,
),
SvgPicture.asset(
'assets/svg/icon_location.svg',
height: 50,
),
SizedBox(
width: 9.52,
),
SvgPicture.asset(
'assets/svg/icon_location.svg'),
SizedBox(
width: 9.52,
),
],
),
),
),
),
),
我需要更改"SvgPicture.asset( 'assets/svg/icon_location.svg')"此设置并添加来自 Firestore 的图像，但我不知道如何操作。充满了我的代码：
Widget getImage(String urlFirebase, int? size) {
return Column(
children: [
CachedNetworkImage(
height: 40,
width: 40,
fit: BoxFit.cover,
imageUrl: urlFirebase,
placeholder: (context, url) => size != null?
SvgPicture.asset(
'assets/svg/icon_location.svg',
height: 60,
width: 60,
)
: SvgPicture.asset(
'assets/svg/icon_location.svg',
height: 60,
width: 60,
),
errorWidget: (context, url, error) => Center(
child: Image.asset(
'assets/images/img.png',
height: 60,
width: 60,
),
),
),
const SizedBox(width: 9.52),
]
);
}
/// Page Controller
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(Icons.arrow_back_ios_new_sharp),
),
title: SizedBox(
width: 170,
child: Image.network(
'https://i.hizliresim.com/sf4kbvu.jpg',
),
),
centerTitle: true,
actions: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.cloud_queue_outlined),
),
],
),
drawer: NavDrawer(),
body: SafeArea(
child: StreamBuilder(
stream: query.snapshots(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
} else if (snapshot.hasError) {
return const Center(
child: Icon(Icons.error),
);
}
final QuerySnapshot<Map<String, dynamic>> querySnapshot =
snapshot.data as QuerySnapshot<Map<String, dynamic>> ;
return ListView(
physics: const BouncingScrollPhysics(),
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 28.8, bottom: 16.8),
height: 724.8,
child: ListView.builder(
itemCount: querySnapshot.size,
padding: const EdgeInsets.only(left: 28.8, right: 12),
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 214.8,
width: 188.4,
margin: const EdgeInsets.only(right: 16.8, bottom: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9.6),
image: DecorationImage(
fit: BoxFit.cover,
image: CachedNetworkImageProvider(
querySnapshot.docs[index].data()['image'],
maxHeight: 200,
maxWidth: 200),
),
),
child: Stack(
children: <Widget>[
GestureDetector(
onTap: () => gotoPage(querySnapshot
.docs[index]
.data()['title'])),
/* Navigator.push(
context,
CupertinoPageRoute(
builder: (redContext) => MyApp()));*/
Positioned(
bottom: 19.2,
left: 19.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.8),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaY: 19.2, sigmaX: 19.2),
child: Container(
height: 26,
padding: const EdgeInsets.only(
left: 0.0, right: 0.0),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
getImage(firebaseUrl),
getImage(firebaseUrl, 50),
getImage(firebaseUrl, 50),
],
),
),
),
),
),
Align(
alignment: Alignment.center,
child: Container(
margin: const EdgeInsets.all(20),
child: Text(
querySnapshot.docs[index].data()['tr'],
style: const TextStyle(
fontSize: 35,
color: Colors.white,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
],
),
);
},
),
)
],
);
},
),
),
);
}
}
小智 5
使用 Elvis Salabarria 的响应，您可以在代码中执行类似的操作
Positioned(
bottom: 19.2,
left: 19.2,
child: ClipRRect(
borderRadius: BorderRadius.circular(4.8),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaY: 19.2, sigmaX: 19.2),
child: Container(
height: 26,
padding: EdgeInsets.only(
left: 0.0, right: 0.0),
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
getImage(firebaseUrl),
getImage(firebaseUrl, 50),
getImage(firebaseUrl, 50),
],
),
),
),
),
),
// 管理变更的方法
Widget getImage(String urlFirebase, int? size) {
return Column(
children: [
CachedNetworkImage(
height: 40,
width: 40,
fit: BoxFit.cover,
imageUrl: urlFirebase,
placeholder: (context, url) => size != null?
SvgPicture.asset(
'assets/svg/icon_location.svg',
height: size,
)
: SvgPicture.asset(
'assets/svg/icon_location.svg',
)
,
errorWidget: (context, url, error) => Center(
child: Image.asset(
'assets/images/img.png',
height: 60,
width: 60,
),
),
)),
SizedBox(width: 9.52),
]
)
}
| 归档时间： |
|
| 查看次数： |
434 次 |
| 最近记录： |