How to Set Gradient Background Color for a Screen in Flutter

There are many different ways to customize the appearance of your Flutter app, and one method that is particularly effective is setting a gradient background color for your entire screen. This helps to create a dynamic and visually interesting experience for users, while also highlighting important elements like buttons or content blocks within the interface.

To set a gradient background color in Flutter, simply wrap your Scaffold with a Container widget then choose a base color using the provided palette tool, or by inputting RGB values manually for its decoration.

import 'package:anime_timer/constant/theme.dart';
import 'package:anime_timer/ui/common/appbar.dart';
import 'package:flutter/material.dart';

class MyScaffold extends StatelessWidget {
  final Widget? child;
  final List<Widget>? action;
  final Widget? floatingActionButton;

  const MyScaffold({Key? key, this.child, this.action, this.floatingActionButton}) : super(key: key);

  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Colors.orangeAccent, Colors.deepOrange],
      child: Scaffold(
        appBar: MainAppBar(action: action ?? []),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                child: child!,
        floatingActionButton: floatingActionButton,
Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.