16.8 C
New York
Tuesday, September 27, 2022

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.



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);
  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);
  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:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.Advertisements


Related Articles


Please enter your comment!
Please enter your name here

Latest Articles