How to create Linear Gradient in App Bar Flutter?
606
Solution 1
You could create your own reusable appbar widget by wrapping an AppBar
inside a Container
with a gradient:
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
Screenshot
Solution 2
You can also use this :
appBar: AppBar(
title: Text('Flutter Demo'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: <Color>[
Colors.red,
Colors.blue
],
),
),
),
),
Author by
power941
Updated on December 06, 2022Comments
-
power941 over 1 year
I am trying to add a linear gradient in the appBar, but so far i didnt managed how to do it. Does anybody know how can i add this in my appBar? Thank you
decoration: BoxDecoration( gradient: LinearGradient( colors: [const Color(0xFFF06292), const Color(0xff2A75BC)]),
my code looks like this
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, ) ], ), ), ); } }