Flutter background is stuck on the image and not covering the whole screen

Question

This is my first time using flutter and when I added background it worked fine with this:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const darkBlueColor = const Color(0xff131f40);
    const lightBlueColor = const Color(0xff445c9e);
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                darkBlueColor,
                lightBlueColor,
              ],
              stops: [0.5, 1],
              begin: const FractionalOffset(0.5, 0.2),
              end: const FractionalOffset(1, 1),
            ),
          ),
        ),
      ),
    );
  }
}

but when I added Column so i can have more child functions the background only showed on my added photo:

Here is my code using Column:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const darkBlueColor = const Color(0xff131f40);
    const lightBlueColor = const Color(0xff445c9e);
    return Scaffold(
      body: Column(
        children: [
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  darkBlueColor,
                  lightBlueColor,
                ],
                stops: [0.5, 1],
                begin: const FractionalOffset(0.5, 0.2),
                end: const FractionalOffset(1, 1),
              ),
            ),
            child: LppImage(),
          ),
        ],
      ),
    );
  }
}

So if anyone knows how to resolve this issue please help. Thank you:)

Answer 1

You'd better to use Stack instead Column if you want to place other ui elements above the background. To make background fill full screen use Positioned.fill inside Stack :

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    const darkBlueColor = const Color(0xff131f40);
    const lightBlueColor = const Color(0xff445c9e);
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    darkBlueColor,
                    lightBlueColor,
                  ],
                  stops: [0.5, 1],
                  begin: const FractionalOffset(0.5, 0.2),
                  end: const FractionalOffset(1, 1),
                ),
              ),
              child: LppImage(),
            ),
          ),
        ],
      ),
    );
  }
}