0

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:

enter image description here

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.

1 Answer 1

1

@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),
          ),
        ],
      ),
    );
  }
}
5
  • thanks for taking the time to look at the code, I just did the changes but it did not solve the issue Dec 18, 2021 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, 2021 at 23:57
  • no, child is being used in the login page. in this case it is the SingleChildScrollView Dec 18, 2021 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, 2021 at 0: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 Dec 19, 2021 at 0:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.