How do i make background images in container widget change in flutter - flutter

Question

I am a newbie to flutter, i am building a website with flutter, i want my container background image to be changing like a carousel. i have tried the carousel widget it works, but it doesnt allow my images to be full width and height. if i can get a way i can make the background image change while maintaining the full screen size, ill appreciate. thanks
here is my code.
import 'dart:ui';
//import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hexcolor/hexcolor.dart';
void main() {
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Udos Computers',
home: Scaffold(
extendBodyBehindAppBar: true,
appBar: PreferredSize(
preferredSize: Size(double.infinity, 70.0),
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: AppBar(
toolbarHeight: 70,
backgroundColor: Colors.black87.withOpacity(0.4),
leading: Image(
image: AssetImage('images/udx.jpg'),
),
title: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextButton(
onPressed: () {},
child: Text(
'PC BUILDER',
style: GoogleFonts.lato(
fontWeight: FontWeight.w800,
color: Colors.white70,
),
),
),
SizedBox(
width: 24,
),
TextButton(
onPressed: () {},
child: Text(
'SHOP',
style: GoogleFonts.lato(
fontWeight: FontWeight.w800,
color: Colors.white70,
),
),
),
SizedBox(
width: 24,
),
TextButton(
onPressed: () {},
child: Text(
'ABOUT US',
style: GoogleFonts.lato(
fontWeight: FontWeight.w800,
color: Colors.white70,
),
),
),
SizedBox(
width: 24,
),
TextButton(
onPressed: () {},
child: Text(
'CONTACT',
style: GoogleFonts.lato(
fontWeight: FontWeight.w800,
color: Colors.white70,
),
),
),
SizedBox(
width: 24,
),
],
),
),
),
),
),
// backgroundColor: Colors.red,
body: Container(
// width: double.infinity,
decoration: BoxDecoration(
color: Colors.black,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.dstATop),
image: AssetImage('images/udx.jpeg'),
fit: BoxFit.cover,
),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'We Build Customized Gaming\n computers',
textAlign: TextAlign.center,
style: GoogleFonts.lato(
fontWeight: FontWeight.w900,
fontStyle: FontStyle.normal,
fontSize: 74,
color: Colors.white,
letterSpacing: -2,
),
),
Padding(
padding: const EdgeInsets.only(top: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ButtonBar(
alignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 50,
width: 150,
child: ElevatedButton(
style: TextButton.styleFrom(
backgroundColor: HexColor('#D91702'),
),
onPressed: () {},
child: Text(
'PC Builder',
style: GoogleFonts.lato(
fontSize: 16,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal,
letterSpacing: 0.3),
),
),
),
SizedBox(
height: 50,
width: 150,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
// backgroundColor: Colors.red
side: BorderSide(color: Colors.white),
),
onPressed: () {},
child: Text(
'Learn More',
style: GoogleFonts.lato(
fontWeight: FontWeight.w500,
fontSize: 16,
fontStyle: FontStyle.normal,
letterSpacing: 0.3,
color: Colors.white70,
),
),
),
),
],
)
],
),
)
],
),
),
),
),
);
}
}

Answer 1

Here you go, I think this is how you wanted it to be. All you have to do is, instead of using one Container() you need two Containers Stacked on top of each other using Stack() and the top container needs to be transparent with the Column() data and the bottom Container() can be a Carousel Slider with DecorationImage and colorFilter. I completed the code for you, you can test it out.
import 'dart:ui';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hexcolor/hexcolor.dart';
void main() {
runApp(
const MyApp(),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Udos Computers',
home: Scaffold(
extendBodyBehindAppBar: true,
appBar: PreferredSize(
preferredSize: const Size(double.infinity, 70.0),
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: AppBar(
toolbarHeight: 70,
backgroundColor: Colors.black87.withOpacity(0.4),
leading: const Image(
image: AssetImage('images/udx.jpg'),
),
title: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextButton(
onPressed: () {},
child: Text(
'PC BUILDER',
style: GoogleFonts.lato(
fontWeight: FontWeight.w800,
color: Colors.white70,
),
),
),
const SizedBox(
width: 24,
),
TextButton(
onPressed: () {},
child: Text(
'SHOP',
style: GoogleFonts.lato(
fontWeight: FontWeight.w800,
color: Colors.white70,
),
),
),
const SizedBox(
width: 24,
),
TextButton(
onPressed: () {},
child: Text(
'ABOUT US',
style: GoogleFonts.lato(
fontWeight: FontWeight.w800,
color: Colors.white70,
),
),
),
const SizedBox(
width: 24,
),
TextButton(
onPressed: () {},
child: Text(
'CONTACT',
style: GoogleFonts.lato(
fontWeight: FontWeight.w800,
color: Colors.white70,
),
),
),
const SizedBox(
width: 24,
),
],
),
),
),
),
),
body: Stack(children: [
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
height: double.infinity,
viewportFraction: 1.0,
enlargeCenterPage: false,
),
items: [
Container(
decoration: BoxDecoration(
color: Colors.grey[900],
image: DecorationImage(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.dstATop),
image: const AssetImage('images/udx.jpg'),
fit: BoxFit.cover,
),
),
)
]),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'We Build Customized Gaming\n computers',
textAlign: TextAlign.center,
style: GoogleFonts.lato(
fontWeight: FontWeight.w900,
fontStyle: FontStyle.normal,
fontSize: 74,
color: Colors.white,
letterSpacing: -2,
),
),
Padding(
padding: const EdgeInsets.only(top: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ButtonBar(
alignment: MainAxisAlignment.center,
children: [
SizedBox(
height: 50,
width: 150,
child: ElevatedButton(
style: TextButton.styleFrom(
backgroundColor: HexColor('#D91702'),
),
onPressed: () {},
child: Text(
'PC Builder',
style: GoogleFonts.lato(
fontSize: 16,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal,
letterSpacing: 0.3),
),
),
),
SizedBox(
height: 50,
width: 150,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
// backgroundColor: Colors.red
side: const BorderSide(color: Colors.white),
),
onPressed: () {},
child: Text(
'Learn More',
style: GoogleFonts.lato(
fontWeight: FontWeight.w500,
fontSize: 16,
fontStyle: FontStyle.normal,
letterSpacing: 0.3,
color: Colors.white70,
),
),
),
),
],
)
],
),
)
],
),
),
]),
),
);
}
}