Flutter，如何获取小部件的大小？

Question

I came across this example to get the Size/Position of a widget: https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407

what is wrong with my code?

I get the error:

The following NoSuchMethodError was thrown while handling a gesture:
I/flutter ( 8566): The method 'findRenderObject' was called on null.
I/flutter ( 8566): Receiver: null
I/flutter ( 8566): Tried calling: findRenderObject()

void main() {
      runApp(new MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(home: MyWidgetSizeTMP());
      }
    }

    class MyWidgetSizeTMP extends StatefulWidget{
      @override
      MyWidgetSizeTMPState createState() {
        return new MyWidgetSizeTMPState();
      }
    }

    class MyWidgetSizeTMPState extends State<MyWidgetSizeTMP> {

      //creating Key for red panel
      GlobalKey _keyRed = GlobalKey();

      _getSizes() {
        final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
        final sizeRed = renderBoxRed.size;
        print("SIZE of Red: $sizeRed");
      }

      _getPositions() {
        final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
        final positionRed = renderBoxRed.localToGlobal(Offset.zero);
        print("POSITION of Red: $positionRed ");
      }

      _afterLayout(_) {
        _getSizes();
        _getPositions();
      }

      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
          ),
          body: Column(
            children: <Widget>[
              Flexible(
                flex: 2,
                child: Container(
                  color: Colors.red,
                ),
              ),
              Flexible(
                flex: 1,
                child: Container(
                  color: Colors.purple,
                ),
              ),
              Flexible(
                flex: 3,
                child: Container(
                  color: Colors.green,
                ),
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    MaterialButton(
                      elevation: 5.0,
                      padding: EdgeInsets.all(15.0),
                      color: Colors.grey,
                      child: Text("Get Sizes"),
                      onPressed: _getSizes,
                    ),
                    MaterialButton(
                      elevation: 5.0,
                      color: Colors.grey,
                      padding: EdgeInsets.all(15.0),
                      child: Text("Get Positions"),
                      onPressed: _getPositions,
                    )
                  ],
                ),
              )
            ],
          ),
        );
      }
    }

Answer 1

You can wrap in LayoutBuilder:

return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
//      height: constraints.maxHeight,
//      width: constraints.maxWidth
        return YourWidget();
    }
);

Answer 2

This is because the _keyRed is not attached to Context in your code.

to fix it -

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _keyRed,  //Add this.
      appBar: AppBar(

Answer 3

In the link you referred to, after creating the GlobalKey it is assigned to the red container

but in your code you haven't assigned it to the container so it can be referred to from the _getSizes() and _getPositions() , _keyRed have to be attached to a Context in your code before you use it.

//creating Key for red panel
GlobalKey _keyRed = GlobalKey();
    ...
    //set key
        Flexible(
                 flex: 2,
                 child: Container(
                   key: _keyRed, // assigned as a key of the red container.
                   color: Colors.red,
                 ),
         ),

Answer 4

There is no direct way to calculate the size of the widget, so to find that we have to take the help of the context of the widget.

Calling context.size returns us the Size object, which contains the height and width of the widget. context.size calculates the render box of a widget and returns the size.

Checkout https://medium.com/flutterworld/flutter-how-to-get-the-height-of-the-widget-be4892abb1a2