Flutter custom background does not display after updating to null safety

Issue

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.

Solution

@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),
          ),
        ],
      ),
    );
  }
}

Answered By – Dan James

Answer Checked By – Cary Denson (FlutterFixes Admin)