如何在 App Bar Flutter 中创建线性渐变?
How to create Linear Gradient in App Bar Flutter?
我正在尝试在 appBar 中添加线性渐变,但到目前为止我还没有设法做到这一点。
有人知道如何在我的 appBar 中添加它吗?谢谢
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [const Color(0xFFF06292), const Color(0xff2A75BC)]),
我的代码是这样的
class RegisterAgree extends StatefulWidget {
@override
_RegisterAgreeState createState() => _RegisterAgreeState();
}
class _RegisterAgreeState extends State<RegisterAgree> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,
title: Row(
children: <Widget>[
Image.asset(
'assets/images/logox.png',
fit: BoxFit.cover,
height: 45.0,
)
],
),
),
);
}
}
您可以通过将 AppBar
包装在具有渐变的 Container
中来创建您自己的可重复使用的应用栏小部件:
class GradientAppBar extends StatelessWidget with PreferredSizeWidget {
static const _defaultHeight = 56.0;
final double elevation;
final Gradient gradient;
final Widget title;
final double barHeight;
GradientAppBar(
{this.elevation = 3.0,
this.gradient,
this.title,
this.barHeight = _defaultHeight});
@override
Widget build(BuildContext context) {
return Container(
height: 56.0,
decoration: BoxDecoration(gradient: gradient, boxShadow: [
BoxShadow(
offset: Offset(0, elevation),
color: Colors.black.withOpacity(0.3),
blurRadius: 3,
),
]),
child: AppBar(
title: title,
elevation: 0.0,
backgroundColor: Colors.transparent,
),
);
}
@override
Size get preferredSize => Size.fromHeight(barHeight);
}
Try the full example on DartPad
截图
你也可以使用这个:
appBar: AppBar(
title: Text('Flutter Demo'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[
Colors.red,
Colors.blue
],
),
),
),
),
我正在尝试在 appBar 中添加线性渐变,但到目前为止我还没有设法做到这一点。 有人知道如何在我的 appBar 中添加它吗?谢谢
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [const Color(0xFFF06292), const Color(0xff2A75BC)]),
我的代码是这样的
class RegisterAgree extends StatefulWidget {
@override
_RegisterAgreeState createState() => _RegisterAgreeState();
}
class _RegisterAgreeState extends State<RegisterAgree> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pink,
title: Row(
children: <Widget>[
Image.asset(
'assets/images/logox.png',
fit: BoxFit.cover,
height: 45.0,
)
],
),
),
);
}
}
您可以通过将 AppBar
包装在具有渐变的 Container
中来创建您自己的可重复使用的应用栏小部件:
class GradientAppBar extends StatelessWidget with PreferredSizeWidget {
static const _defaultHeight = 56.0;
final double elevation;
final Gradient gradient;
final Widget title;
final double barHeight;
GradientAppBar(
{this.elevation = 3.0,
this.gradient,
this.title,
this.barHeight = _defaultHeight});
@override
Widget build(BuildContext context) {
return Container(
height: 56.0,
decoration: BoxDecoration(gradient: gradient, boxShadow: [
BoxShadow(
offset: Offset(0, elevation),
color: Colors.black.withOpacity(0.3),
blurRadius: 3,
),
]),
child: AppBar(
title: title,
elevation: 0.0,
backgroundColor: Colors.transparent,
),
);
}
@override
Size get preferredSize => Size.fromHeight(barHeight);
}
Try the full example on DartPad
截图
你也可以使用这个:
appBar: AppBar(
title: Text('Flutter Demo'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[
Colors.red,
Colors.blue
],
),
),
),
),