i was new on flutter coding and i'm still learning, i tried to coding the design i found in internet but now i'm stuck on how to make background change depend on what image in front of it. the front image is like using carousel slider so it will change the image when i slide so i want make change it change the background image too corresponding the front image
here my source code:
class _MainCafeProfileState extends State<MainCafeProfile> {
int _current = 0;
final CarouselController _controller = CarouselController();
final List<Widget> ImgList = [
HeaderCafeProfileWidget(imageUrl: 'assets/images/images_equipment_1.png'),
HeaderCafeProfileWidget(imageUrl: 'assets/images/images_equipment_2.png'),
HeaderCafeProfileWidget(imageUrl: 'assets/images/images_equipment_1.png'),
];
@override
Widget HeaderImageCard() {
return Align(
alignment: Alignment.topCenter,
child: Stack(
children: [
Column(
children: [
CarouselSlider(
options: CarouselOptions(
initialPage: 0,
enableInfiniteScroll: false,
viewportFraction: 1,
height: 280,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
},
),
items: ImgList,
),
// SLIDER INDICATOR
Container(
transform: Matrix4.translationValues(0, -40, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: ImgList.asMap().entries.map((entry) {
return GestureDetector(
onTap: () => _controller.animateToPage(entry.key),
child: Container(
width: _current == entry.key ? 18 : 4,
height: 4,
margin: EdgeInsets.symmetric(
vertical: 8.0, horizontal: 4.0),
decoration: BoxDecoration(
color: whiteColor,
borderRadius: BorderRadius.all(
Radius.circular(2),
),
),
),
);
}).toList(),
),
),
],
),
],
),
);
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: whiteColor,
body: Stack(
children: [
Container(
margin: EdgeInsets.only(bottom: 8),
width: double.infinity,
height: 297,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/images_equipment_1.png'),
fit: BoxFit.fill,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5,
sigmaY: 5,
),
child: Container(
decoration: BoxDecoration(
color: Neutral10.withOpacity(0.2),
),
),
),
),
SingleChildScrollView(
child: Column(
children: [
// HeaderCafeProfile(),
HeaderImageCard(),
TitleCafeProfile(
title: 'Rivarno Kopi',
rating: 4.8,
price: '\$\$',
),
MainContent(),
ReviewCafeProfile(
imageUrl: 'assets/images/1.jpg',
title: 'A Review: Ancala Coffee & Bistro',
desc:
'Description container, where you can spoil about the review',
),
],
),
),
BackButtonWidget(),
],
),
);
}
}
[
]
i was try making the background change depend on the image front of it, so when the front image was slide the background image will change to
[
]
[
]
