color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](In this tutorial, you will learn how to make gradient app bar in flutter ?
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](Before start anything, In every code we need a page for contain our whole source code. So let’s start…
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](import "package:flutter/material.dart";
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](class AppBar extends StatefulWidget {
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( @override
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( _AppBarState createState() => _AppBarState();
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](}
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](class _AppBarState extends State {
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( @override
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( Widget build(BuildContext context) {
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( return Scaffold(
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( appBar: AppBar(
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( title: Text("Flutter Demo Appbar"),
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( ),
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( body: Text("XXXXXXX"));
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( }
box-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](}color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](We have used the `jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](AppBar`color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( in our code above, just a simple one. It will show an app bar with a title. It is easy to use. It usually uses with the `jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](appBar`color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( parameter of the `jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](Scaffold.`color: rgba(0, 0, 0, 0.84); font-family: Menlo, Monaco, "Courier New", Courier, monospace; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](
`jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](
``jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](in klbox-sizing: inherit; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700; font-size: 21px; font-style: italic; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);](Now the quetion arises is it possible to convert a simple appbar in gradient appbar ??
``jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](in klbox-sizing: inherit; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700; font-size: 21px; font-style: italic; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);](
``jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](in klbox-sizing: inherit; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700; font-size: 21px; font-style: italic; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);](font-style: normal; font-weight: 400; letter-spacing: -0.084px;](Here in the appbar there is simple property which is flexibleSpace. In that flexibleSpace we can use a widget. So now we simply use a Container and gives a gradient layout using linear or any other gradient method.
``jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](in klbox-sizing: inherit; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700; font-size: 21px; font-style: italic; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);](font-style: normal; font-weight: 400; letter-spacing: -0.084px;](
``jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](in klbox-sizing: inherit; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700; font-size: 21px; font-style: italic; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](appBar: AppBar(
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( centerTitle: true,
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( title: Text(widget.title),
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( flexibleSpace: Container(
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( decoration: BoxDecoration(
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( gradient: LinearGradient(
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( begin: Alignment.topLeft,
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( end: Alignment.bottomRight,
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( colors: [
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( Colors.red,
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( Colors.blue
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( ])
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( ),
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( ),
box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);](font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.352px; white-space: pre-wrap; background-color: rgba(0, 0, 0, 0.05);]( ),font-style: normal; font-weight: 400; letter-spacing: -0.084px;](
`letter-spacing: -0.004em; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; color: rgba(0, 0, 0, 0.84);](
letter-spacing: -0.004em; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; color: rgba(0, 0, 0, 0.84);](In this above code, we use gradient method for colour and that’s solve..
letter-spacing: -0.004em; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; color: rgba(0, 0, 0, 0.84);](
letter-spacing: -0.004em; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; color: rgba(0, 0, 0, 0.84);](Here is my medium link: [https://medium.com/me/stories/publicfont-size: 1rem;](https://medium.com/me/stories/public)letter-spacing: -0.004em; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; color: rgba(0, 0, 0, 0.84);](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](Here is my whole code : [https://github.com/Shubham-Narkhede?tab=repositoriesfont-size: 1rem;](https://github.com/Shubham-Narkhede?tab=repositories)letter-spacing: -0.004em; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; color: rgba(0, 0, 0, 0.84);](
`jo ke kf kg ka bbox-sizing: inherit; background-color: rgba(0, 0, 0, 0.05); font-family: Menlo, Monaco, "Courier New", Courier, monospace; padding: 2px 4px; font-size: 15.75px; color: rgba(0, 0, 0, 0.84); letter-spacing: -0.084px;](in klbox-sizing: inherit; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700; font-size: 21px; font-style: italic; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);](
`