我如何使容器小部件中的背景图像在颤动中发生变化

Question

我是 flutter 的新手，我正在用 flutter 构建一个网站，我希望我的容器背景图像像旋转木马一样变化。我已经尝试过它可以工作的旋转木马小部件，但它不允许我的图像是全宽和全高。如果我能找到一种方法可以在保持全屏尺寸的同时更改背景图像，我将不胜感激。谢谢

这是我的代码。

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

给你，我想这就是你想要的样子。您所要做的就是，不是使用一个 Container()，而是需要使用 Stack() 将两个 Container 堆叠在一起，并且顶部容器需要对 Column() 数据透明，而底部 Container() 可以是带有 DecorationImage 和 colorFilter 的 Carousel Slider。我给你完成了代码，你可以测试一下。

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

我如何使容器小部件中的背景图像在颤动中发生变化

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

dart

flutter

flutter-layout

flutter-web

dart-null-safety