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.....

After googling I can add it by implementing "import 'package:flutter/scheduler.dart';" Now playing with your answer :) Let me try it by my self — iPatel, Jan 11 '19 at 11:56
What do you mean with `when it doesn't render`? Perhaps you want to use Offstage widget. — Günter Zöchbauer, Jan 12 '19 at 12:34
It means, Widget not visible initially, It depends upon response of FutureBuilder. Any Idea still i'm not sure about it how can we achieve! — iPatel, Jan 12 '19 at 12:56

Omatt · Answer 1 · 2020-11-02T21:08:30.643

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

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

1 Answers1

Linked