How to get height of a Widget?
To get the size/position of a widget on screen, you can use GlobalKey
to get its BuildContext
to then find the RenderBox
of that specific widget, which will contain its global position and rendered size.
Just one thing to be careful of: That context may not exist if the widget is not rendered. Which can cause a problem with ListView
as widgets are rendered only if they are potentially visible.
Another problem is that you can't get a widget's RenderBox
during build
call as the widget hasn't been rendered yet.
But I need to the size during the build! What can I do?
There's one cool widget that can help: Overlay
and its OverlayEntry
.They are used to display widgets on top of everything else (similar to stack).
But the coolest thing is that they are on a different build
flow; they are built after regular widgets.
That have one super cool implication: OverlayEntry
can have a size that depends on widgets of the actual widget tree.
Okay. But don't OverlayEntry requires to be rebuilt manually?
Yes, they do. But there's another thing to be aware of: ScrollController
, passed to a Scrollable
, is a listenable similar to AnimationController
.
Which means you could combine an AnimatedBuilder
with a ScrollController
, it would have the lovely effect to rebuild your widget automatically on a scroll. Perfect for this situation, right?
Combining everything into an example:
In the following example, you'll see an overlay that follows a widget inside ListView
and shares the same height.
import 'package:flutter/material.dart';import 'package:flutter/scheduler.dart';class MyHomePage extends StatefulWidget { const MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { final controller = ScrollController(); OverlayEntry sticky; GlobalKey stickyKey = GlobalKey(); @override void initState() { if (sticky != null) { sticky.remove(); } sticky = OverlayEntry( builder: (context) => stickyBuilder(context), ); SchedulerBinding.instance.addPostFrameCallback((_) { Overlay.of(context).insert(sticky); }); super.initState(); } @override void dispose() { sticky.remove(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: ListView.builder( controller: controller, itemBuilder: (context, index) { if (index == 6) { return Container( key: stickyKey, height: 100.0, color: Colors.green, child: const Text("I'm fat"), ); } return ListTile( title: Text( 'Hello $index', style: const TextStyle(color: Colors.white), ), ); }, ), ); } Widget stickyBuilder(BuildContext context) { return AnimatedBuilder( animation: controller, builder: (_,Widget child) { final keyContext = stickyKey.currentContext; if (keyContext != null) { // widget is visible final box = keyContext.findRenderObject() as RenderBox; final pos = box.localToGlobal(Offset.zero); return Positioned( top: pos.dy + box.size.height, left: 50.0, right: 50.0, height: box.size.height, child: Material( child: Container( alignment: Alignment.center, color: Colors.purple, child: const Text("^ Nah I think you're okay"), ), ), ); } return Container(); }, ); }}
Note:
When navigating to a different screen, call following otherwise sticky would stay visible.
sticky.remove();
This is (I think) the most straightforward way to do this.
Copy-paste the following into your project.
UPDATE: using RenderProxyBox
results in a slightly more correct implementation, because it's called on every rebuild of the child and its descendants, which is not always the case for the top-level build() method.
NOTE: This is not exactly an efficient way to do this, as pointed by Hixie here. But it is the easiest.
import 'package:flutter/material.dart';import 'package:flutter/rendering.dart';typedef void OnWidgetSizeChange(Size size);class MeasureSizeRenderObject extends RenderProxyBox { Size oldSize; final OnWidgetSizeChange onChange; MeasureSizeRenderObject(this.onChange); @override void performLayout() { super.performLayout(); Size newSize = child.size; if (oldSize == newSize) return; oldSize = newSize; WidgetsBinding.instance.addPostFrameCallback((_) { onChange(newSize); }); }}class MeasureSize extends SingleChildRenderObjectWidget { final OnWidgetSizeChange onChange; const MeasureSize({ Key key, @required this.onChange, @required Widget child, }) : super(key: key, child: child); @override RenderObject createRenderObject(BuildContext context) { return MeasureSizeRenderObject(onChange); }}
Then, simply wrap the widget whose size you would like to measure with MeasureSize
.
var myChildSize = Size.zero;Widget build(BuildContext context) { return ...( child: MeasureSize( onChange: (size) { setState(() { myChildSize = size; }); }, child: ... ), );}
So yes, the size of the parent cannot can depend on the size of the child if you try hard enough.
Personal anecdote - This is handy for restricting the size of widgets like Align
, which likes to take up an absurd amount of space.
Let me give you a widget for that
class SizeProviderWidget extends StatefulWidget { final Widget child; final Function(Size) onChildSize; const SizeProviderWidget( {Key? key, required this.onChildSize, required this.child}) : super(key: key); @override _SizeProviderWidgetState createState() => _SizeProviderWidgetState();}class _SizeProviderWidgetState extends State<SizeProviderWidget> { @override void initState() { ///add size listener for first build _onResize(); super.initState(); } void _onResize() { WidgetsBinding.instance?.addPostFrameCallback((timeStamp) { if (context.size is Size) { widget.onChildSize(context.size!); } }); } @override Widget build(BuildContext context) { ///add size listener for every build uncomment the fallowing ///_onResize(); return widget.child; }}
EDITJust wrap the SizeProviderWidget
with OrientationBuilder
to make it respect the orientation of the device