How to create a gradient background AppBar in Flutter
Gradients help you display smooth transitions between two or more colors. The example below will show you how to create an app bar with a gradient background in Flutter. We can achieve the goal without using any third-party plugins.
Example
Screenshot:

The code:
// main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 'KindaCode.com',
home: HomePage());
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
// implement the app bar
appBar: AppBar(
title: const Text('KindaCode.com'),
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.red, Colors.orange, Colors.indigo]),
),
),
),
);
}
}
Our AppBar has both a gradient background color and the functionalities of a standard material AppBar.
Further reading:
- Flutter SliverAppBar Example (with Explanations)
- Flutter Autocomplete example
- Flutter: Add a Search Field to an App Bar (2 Approaches)
- Flutter: SliverGrid example
- Create a Custom NumPad (Number Keyboard) in Flutter
You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.
Loved it, simple and to the point!