Complete Code:
import 'package:flutter/material.dart';
class SizePositionPage extends StatefulWidget {
@override
_SizePositionPageState createState() => _SizePositionPageState();
}
class _SizePositionPageState extends State {
final GlobalKey _cardKey = GlobalKey();
Size cardSize;
Offset cardPosition;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) => getSizeAndPosition());
}
getSizeAndPosition() {
RenderBox _cardBox = _cardKey.currentContext.findRenderObject();
cardSize = _cardBox.size;
cardPosition = _cardBox.localToGlobal(Offset.zero);
print(cardSize);
print(cardPosition);
setState(() {});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Size Position"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Welcome to FlutDev",
key: _cardKey,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Find Size & Position of a Widget",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.red),
),
),
],
),
),
Text("Size - $cardSize"),
Text("Position - $cardPosition "),
],
),
);
}
}
Now
first, we create a global key for a widget (widget, which size and offset we want to know.).
then we create a function getSizeAndPosition() which we called after building widgets.
WidgetsBinding.instance.addPostFrameCallback((_) => getSizeAndPosition());
getSizeAndPosition() { RenderBox _cardBox = _cardKey.currentContext.findRenderObject(); cardSize = _cardBox.size; cardPosition = _cardBox.localToGlobal(Offset.zero); print(cardSize); print(cardPosition); setState(() {}); }