Background decoration Widget covering other elements

Question

I'm new to flutter (and programming in general) and I'm experiencing the following problem:

I tried to turn the decoration I was applying to the background of my screen into a Widget. It apparently worked, because the effects are being applied to the Container, but also caused it to completely cover all other elements.

This is the code (the result is just the gradient covering all the screen):

import 'package:flutter/material.dart';
import 'widgets/background.dart';
import 'widgets/getCPF.dart';
import 'widgets/loginButton.dart';

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}
//Login Page
class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Material(
    //Calling the Widget to decorate the background Container
      child: background(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Image.asset(
              'lib/assets/images/logo.png',
              color: const Color.fromARGB(255, 255, 255, 255),
            ),
            const Text(
              'Login',
              style: TextStyle(
                color: Colors.white,
                fontSize: 30,
                fontWeight: FontWeight.bold,
              ),
            ),
            getCPF(),
            loginButton()
          ],
        ),
      ),
    );
  }
}


import 'package:flutter/material.dart';
//Background decoration Widget
Widget background({required Column child}) {
  return Container(
    padding: const EdgeInsets.all(20),
    alignment: Alignment.topCenter,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          Color(0xff0b4257),
          Color(0xcc0b4257),
          Color(0x990b4257),
          Color(0x660b4257),
        ],
      ),
    ),
  );
}

When I put the content of background() Widget instead of calling it, it works just as intended, with the getCPF() text input and the loginButton() over the background.

Result

Answer 1

just pass the child constructor in your background Widget, in your code you are not using it and change the constructor to this required Widget child

  Widget background({required Column child}) {
  return Container(
    padding: const EdgeInsets.all(20),
    alignment: Alignment.topCenter,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          Color(0xff0b4257),
          Color(0xcc0b4257),
          Color(0x990b4257),
          Color(0x660b4257),
        ],
      ),
    ),
   child: child  // here is the line you need to add
  );
}