[英]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: AppBar(
title: Text('Flutter Demo'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[
Colors.red,
Colors.blue
],
),
),
),
),
您可以通過將AppBar
包裝在帶有漸變的Container
中來創建自己的可重用 appbar 小部件:
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);
}
截屏
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.