为什么我的小部件 null 上的参数传递？

Question

I am new in Flutter. So, I created a class widget code below.

import 'package:flutter/material.dart';

class BoxBuilder extends StatefulWidget {
  BoxBuilder({Key key, @required this.text}): super(key: key);
  String text;

  @override
  _BoxBuilderState createState() => _BoxBuilderState();
}

class _BoxBuilderState extends State<BoxBuilder>  {
  _BoxBuilderState({this.text});

  String text;

  double getSize() {
    if (MediaQuery.of(context).orientation == Orientation.portrait) {
      return MediaQuery.of(context).size.width - 120;
    } else {
      return MediaQuery.of(context).size.height - 120;
    }
  }

  @override
  Widget build(BuildContext context) {
    double _width = getSize() / 2;
    double _height = getSize() / 3;
    return Container(
      width: _width,
      height: _height,
      child: Card(
        color: Colors.white,
        child: Center(
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Text(
              text==null? 'hello': text,   // LINE 1100
            ),
          ),
        ),
      ),
    );
  }
}

I have a list of strings from another class widget declared as

List<String> myFoos = [
    'one foo',
    'another foo',
    'more foo',
    'some foo',
    'next foo',
    'all foo'
  ];

passed each list as parameter to my class BoxBuilder widget

             Center(
                child: Container(
                  width: getSize(),
                  height: getSize(),
                  child: Wrap(
                    children: [
                      BoxBuilder(text:myFoos[0]),  //LINE 1001
                      BoxBuilder(text:myFoos[1]),  //LINE 1002
                      BoxBuilder(text:myFoos[2]),  //LINE 1003
                      BoxBuilder(text:myFoos[3]),  //LINE 1004
                      BoxBuilder(text:myFoos[4]),  //LINE 1005
                      BoxBuilder(text:myFoos[5]),  //LINE 1006
                    ],
                  ),
                ),
              ),

It seems that the parameters passed are null as I get this result

If I replace LINE 1100 from BoxBuilder widget class

            child: Text(
              text==null? 'hello': text,   // LINE 1100
            ),

with just

            child: Text(
              text,   // LINE 1100
            ),

I get this error

   A non-null String must be provided to a Text widget.

called from a LINE 1001, 1002, ... 1006.

I am scratching my head here, it's just passing parameters and why do I get a null value?

Answer 1

Since you're using a StatefulWidget then Try widget.text instead.

child: Text(
  widget.text ?? 'hello',   // LINE 1100
),

and also remove this lines as they are not needed

_BoxBuilderState({this.text});

  String text;

Answer 2

There is two problems here

1. you re declare variable text, so the new variable value is used which is null
2. since you are using StatefulWidget you use it's parameters by widget.param

Try this

import 'package:flutter/material.dart';

class BoxBuilder extends StatefulWidget {
  BoxBuilder({Key key, @required this.text}): super(key: key);
  String text;

  @override
  _BoxBuilderState createState() => _BoxBuilderState();
}

class _BoxBuilderState extends State<BoxBuilder>  {

  double getSize() {
    if (MediaQuery.of(context).orientation == Orientation.portrait) {
      return MediaQuery.of(context).size.width - 120;
    } else {
      return MediaQuery.of(context).size.height - 120;
    }
  }

  @override
  Widget build(BuildContext context) {
    double _width = getSize() / 2;
    double _height = getSize() / 3;
    return Container(
      width: _width,
      height: _height,
      child: Card(
        color: Colors.white,
        child: Center(
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Text(
              widget.text ?? 'hello',
            ),
          ),
        ),
      ),
    );
  }
}

Note: dart provide better way to check null data

widget.text ?? 'hello',