Monday, June 5, 2023

How to make Gradient in app bar for Flutter

Gradient app bar for Flutter

Flutter is now days popular platform for creating mobile and desktop applications.In their docs We can customize the content inside the appbars but only problem is very difficult to make gradient color in app bar .So in this article we discuss about how to create gradient effect in app bar using a external library.

Love the material AppBar? Do you want to add more color to the appbar? Here’s a gradientAppBar.

It works just like the normal AppBar. Also with actions, back buttons, titles. So it’s just your normal AppBar, but with a twist.

image image

Getting Started

  1. Depend on it by adding this to your pubspec.yaml file: gradient_app_bar: ^0.1.3
  2. Import it: import 'package:gradient_app_bar/gradient_app_bar.dart'
  3. Replace your current AppBar (In the scaffold) to GradientAppBar.
appBar: GradientAppBar(
    title: Text('Flutter'),
    gradient: LinearGradient(colors: [Colors.blue, Colors.purple, Colors.red])
  ),