Emmanuel Ekpenyong
Reputation: 53
How do i make background images in container widget change in flutter
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,
),
),
),
),
],
)
],
),
)
],
),
),
),
),
);
}
}
Upvotes: 1
Views: 715
Answers (1)
Priyansu Choudhury
Reputation: 230
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,
),
),
),
),
],
)
],
),
)
],
),
),
]),
),
);
}
}
Upvotes: 1
Related Questions
- How to add background image for widget in flutter
- How do I Set Background image in Flutter?
- How to add background image to flutter
- Changing Background Color Of Image in Flutter
- how to use a picked image as background image in flutter?
- Fill background color of Image in flutter
- How to set background image in flutter?
- How can i fit an image as background image for a container widget?
- Add background image in flutter
- Image in widget [flutter]