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

Issue

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,
                            ),
                          ),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            )
          ],
        ),
       ),
     ),
    ),
  );
 }
}

Solution

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,
                                ),
                              ),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ]),
      ),
    );
  }
}

Answered By – Priyansu Choudhury

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *