如何在颤动中更改容器小部件中的背景图像
Posted
技术标签:
【中文标题】如何在颤动中更改容器小部件中的背景图像【英文标题】：How do i make background images in container widget change in flutter 【发布时间】：2021-11-06 07:00:38 【问题描述】：我是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,
),
),
),
),
],
)
],
),
)
],
),
),
),
),
);
【问题讨论】：
请试试PageView，如果你想自动滚动试试这个解决方案：***.com/questions/56780188/…
【参考方案1】：
给你，我想这就是你想要的样子。您所要做的就是，您需要使用 Stack() 将两个 Container 堆叠在一起，而不是使用一个 Container()，并且顶部容器需要对 Column() 数据透明，底部 Container() 可以是带有装饰图像和颜色过滤器的轮播滑块。我为你完成了代码，你可以测试一下。
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,
),
),
),
),
],
)
],
),
)
],
),
),
]),
),
);
【讨论】：
以上是关于如何在颤动中更改容器小部件中的背景图像的主要内容，如果未能解决你的问题，请参考以下文章
请参阅附加的快照。我在颤动中通过容器创建了这样的圆形框。但我正在寻找小部件。颤振有一个小部件吗？