Flutter best way to get size/position of widget when it doesn't render

Question

I know, How to get size/position of the widget. But question is If we want to get size/position of widget that will be shown after success of FutureBuilder then how can we get?

For more clear:

I have below hierarchy of the widget.

• CustomScrollView
  • SliverAppBar
  • SliverToBoxAdapter
    • SingleChildScrollView
      • Column
      • Container // Covered full Scree
      • Button
        || <-- based on button Click *//My own code*
        Container
        Child ~> null OR FutureBuilder *//My own code*

This FutureBuilder covered under Container widget. And I want to get size/position of this Container widget.

I did it but not proper way.

child: FutureBuilder<MealModelData>(
          future: _futureForMealList,
          builder:
              (BuildContext context, AsyncSnapshot<MealModelData> snapshot) {

                if (snapshot.data != null) {
                  MealModelData mealMdl = snapshot.data;
                  List<MealList> mealList = mealMdl.mealList;

                  if (mealMdl != null)
                    return ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: mealList.length,
                      itemBuilder: (BuildContext context, int index) {

                        if (index == mealList.length - 1 && !isGotPos{
                          isGotPos= true;
                          _callBackForGetTopPosition();
                        }

                       .
                       .                       .
                       .                       .
                       .                       .
                       .                       .
                       .                       .

And method code is:

_callBackForGetTopPosition() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final RenderBox renderBoxRed =
          _keyForListView.currentContext.findRenderObject();
      final positionRed = renderBoxRed.localToGlobal(Offset.zero);
      print('X = ${positionRed.dx} and Y = ${positionRed.dy}')

    });
  }             

I found this one How to get a height of a Widget?

But can't able to declare SchedulerBinding.instance.....

Answer 1

You can use LayoutBuilder to determine the widget's size. Here's a sample to demonstrate how the widget works.

One of the use case of the LayoutBuilder widget is determining the dimension of where widgets can be displayed and adapt their size to it.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  var dimension = 40.0;

  increaseWidgetSize() {
    setState(() {
      dimension += 20;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(children: <Widget>[
          Text('Dimension: $dimension'),
          Container(
            color: Colors.teal,
            alignment: Alignment.center,
            height: dimension,
            width: dimension,
            // LayoutBuilder inherits its parent widget's dimension. In this case, the Container in teal
            child: LayoutBuilder(builder: (context, constraints) {
              debugPrint('Max height: ${constraints.maxHeight}, max width: ${constraints.maxWidth}');
              return Container(); // create function here to adapt to the parent widget's constraints
            }),
          ),
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: increaseWidgetSize,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Demo

Logs

I/flutter (26712): Max height: 40.0, max width: 40.0
I/flutter (26712): Max height: 60.0, max width: 60.0
I/flutter (26712): Max height: 80.0, max width: 80.0
I/flutter (26712): Max height: 100.0, max width: 100.0