Flutter custom background does not display after updating to null safety

Question

I recently upgraded my flutter project to null safety and my page stopped showing the body of the scaffold. I think the problem is with the Mediaquery even tho I am not sure about it.

I am using a custom background to design my page, the background:

import 'package:flutter/material.dart';
class Background extends StatelessWidget {
final Widget? child;

const Background({
Key? key,
@required this.child,
}) : super(key: key);

@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;

return Container(
  width: size.width,
  height: size.height,
  child: Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Positioned(
        top: 0,
        right: 0,
        left: 0,
        child: Image.asset("assets/top1.png", width: size.width),
      ),
      Positioned(
        top: 0,
        right: 0,
        child: Image.asset("assets/top2.png", width: size.width),
      ),
      Positioned(
        top: 30,
        //left: 20,
        right: -60,
        child: Image.asset("assets/logo.png", width: size.width * 0.60),
      ),
      Positioned(
        bottom: 0,
        right: 0,
        child: Image.asset("assets/bottom1.png", width: size.width),
      ),
      Positioned(
        bottom: 0,
        right: 0,
        child: Image.asset("assets/bottom2.png", width: size.width),
      ),
    ],
  ),
);
}
}

and this is how my login page is set:

@override
Widget build(BuildContext context) {
final bloc = Provider.of(context);
Size size = MediaQuery.of(context).size;

return Scaffold(
  body: Background(
    child: SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _title(),
          SizedBox(height: size.height * 0.03),
          _email(bloc),
          SizedBox(height: size.height * 0.03),
          _password(bloc),
          Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
            child: TextButton(
                onPressed: () async {
                  Navigator.push<Widget>(
                    context,
                    MaterialPageRoute(
                        builder: (BuildContext context) => ResetScreen()),
                  );
                },
                child: Text(
                  "Passwort vergessen?",
                  style: TextStyle(
                    fontSize: 12,
                    color: Color(0XFF2661FA),
                    fontWeight: FontWeight.bold,
                  ),
                )),
          ),
          SizedBox(height: size.height * 0.05),
          _boton(size, context, bloc),
          Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
            child: GestureDetector(
              onTap: () => {
                Navigator.pushReplacementNamed(context, "register"),
              },
              child: Text(
                "Sie haben noch kein Konto? Registrieren",
                style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF2661FA)),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);
}

I can see the custom background but I am not able to see the actual widget inside the column:

I experienced this issue after migrating to null safety and I really think it has something to do with it, because if I take the background out and I use the SingleChildScrollView as the main widget for the body, everything in the column appears again.

Dan James · Accepted Answer · 2021-12-19T00:09:04.910

@required has been changed to required in null safe dart. You can also remove the "?" from Background.child if it is required as it will never be null.

class Background extends StatelessWidget {
  final Widget child;

  const Background({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

    return Container(
      width: size.width,
      height: size.height,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          // add the child somewhere in the build function
          child,
          Positioned(
            top: 0,
            right: 0,
            left: 0,
            child: Image.asset("assets/top1.png", width: size.width),
          ),
          Positioned(
            top: 0,
            right: 0,
            child: Image.asset("assets/top2.png", width: size.width),
          ),
          Positioned(
            top: 30,
            //left: 20,
            right: -60,
            child: Image.asset("assets/logo.png", width: size.width * 0.60),
         ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Image.asset("assets/bottom1.png", width: size.width),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Image.asset("assets/bottom2.png", width: size.width),
          ),
        ],
      ),
    );
  }
}

thanks for taking the time to look at the code, I just did the changes but it did not solve the issue — ANDREW EBARE, Dec 18 '21 at 22:27
No problem :) Is `child` being used in your `Background` widget? I can't see it anywhere in the `Background`? — Dan James, Dec 18 '21 at 23:57
no, child is being used in the login page. in this case it is the SingleChildScrollView — ANDREW EBARE, Dec 18 '21 at 23:59
You seam to be passing the `SingleChildScrollView` to the `Background` widget as a child. But then in the `Background` widget you are not using it (or at least I can't see where). I will update my answer with an example of using the child. — Dan James, Dec 19 '21 at 00:04
you are right I solved it by adding the child before closing the stack. thanks a lot for the time and spotting that mistake — ANDREW EBARE, Dec 19 '21 at 00:08

Flutter custom background does not display after updating to null safety

1 Answers1