I have this app but I want to set the Background color of the entire scaffold as a linear Gradient (0xffF6FECE and 0xffB6C0C8) instead of the typical one color that you can achieve by doing

backgroundColor: Color(0xffF6FECE).

I want a linear Gradient like this:

The first lines of my code are as follows:

import 'dart:ui';

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        leading: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(13.0),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                      color: Colors.grey, spreadRadius: 0.5, blurRadius: 1.0)
                ]),
            child: Center(
              child: Image.asset(
                "assets/menu.png",
                height: 25.0,
                width: 25.0,
              ),
            ),
          ),
        ), ...etc

CodePudding user response：

Try this example:

class TestingDesign2 extends StatefulWidget {
  const TestingDesign2({super.key});

  @override
  State<TestingDesign2> createState() => _TestingDesign2State();
}

class _TestingDesign2State extends State<TestingDesign2> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: const Text('Test Alert'),
        actions: [
          IconButton(
            icon: const Icon(Icons.power_settings_new),
            color: Colors.white,
            onPressed: () async {
              setState(() {});
            },
          )
        ],
        elevation: 0,
        backgroundColor: Colors.transparent,
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.yellow, Colors.green],
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
              tileMode: TileMode.clamp),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 200,
            ),
            Container(
              width: double.infinity,
              height: 200,
              color: Colors.red,
              margin: EdgeInsets.all(16),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

to achieve what you want, you can't do it with a Scaffold, instead try this

 Scaffold(
  body: Stack(
    children: [
      Positioned(
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
        child: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.red,
                Colors.green,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        ),
      ),

      YourScreenWidgets(),
    ],
  ),
);

replace YourScreenWidgets() with you screen widgets

CodePudding user response：

Container(
          width: MediaQuery.of(context).size.width,
          height: 200,
          decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10),
                topRight: Radius.circular(80),
              ),
              gradient: LinearGradient(
                colors: [
                  color.AppColor.gradientFirst.withOpacity(0.8),
                  color.AppColor.gradientSecond.withOpacity(0.9),
                ],
                begin: Alignment.bottomLeft,
                end: Alignment.centerRight,
              ),
              boxShadow: [
                BoxShadow(
                    offset: Offset(5, 10),
                    blurRadius: 20,
                    color: color.AppColor.gradientSecond.withOpacity(0.2)),
              ]),