Explore Size & Position Widget In Flutter
Once in a while, you might have to know the size and position of a widget rendered on the screen automatically. For instance, if you need to control child widget dependent on the parent’s size and location. In Flutter, that data can be gotten from the RenderBox of the individual widget.
In this blog, we will be Explore Size & Position Widget In Flutter. We will see how to implement a demo program of the size & position widget and how to get the size and position of a widget in your flutter applications.
Table Of Contents::
Flutter:
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
It is free and open-source. It was at first evolved from Google and is presently overseen by an ECMA standard. Flutter applications utilize the Dart programming language for making an application. The dart programming shares a few same highlights as other programming dialects, like Kotlin and Swift, and can be trans-arranged into JavaScript code.
If you want to explore more about Flutter, please visit Flutter’s official website to get more information.
Flutter Is Proudly Entrusted By These Organizations For their Products : — Flutter Showcase
Demo Module :
This demo video shows how to get the size and position of a widget in a flutter. It shows how the size and position widget will work in your flutter applications. It shows when the user taps on the button, then the size of the animated container will be changed. It will be shown on your device.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called size_render_object.dart inside the lib folder.
The strategy expects you to return a RenderObject and you can make your own RenderObject by making a class that expands RenderProxyBox. You need to supersede the performLayout strategy for the RenderProxyBox to get the RenderBox which can be utilized to get the size of the child.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
typedef void OnWidgetSizeChange(Size size);
class SizeRenderObject extends RenderProxyBox {
final OnWidgetSizeChange onSizeChange;
Size? currentSize;
SizeRenderObject(this.onSizeChange);
@override
void performLayout() {
super.performLayout();
try {
Size? newSize = child?.size;
if (newSize != null && currentSize != newSize) {
currentSize = newSize;
WidgetsBinding.instance?.addPostFrameCallback((_) {
onSizeChange(newSize);
});
}
} catch (e) {
print(e);
}
}
}
There is a callback function passed to the RenderProxyBox. Inside the performLayout widget, you need to get the child’s size and call the callback if the current size is not quite the same as the past size.
Create a new dart file called size_offset_wrapper.dart inside the lib folder.
It very well may be finished by wrapping the widget as the child of another widget that expands SingleChildRenderObjectWidget. Extending out the class expects you to supersede the createRenderObject strategy.
import 'package:flutter/material.dart';
import 'package:flutter_size_position/size_render_object.dart';
class SizeOffsetWrapper extends SingleChildRenderObjectWidget {
final OnWidgetSizeChange onSizeChange;
const SizeOffsetWrapper({
Key? key,
required this.onSizeChange,
required Widget child,
}) : super(key: key, child: child);
@override
RenderObject createRenderObject(BuildContext context) {
return SizeRenderObject(onSizeChange);
}
}
Then, at that point, pass the widget to be estimated as the child of the SizeOffsetWrapper alongside a callback function that will be summoned when the size changes.
Create a new dart file called main.dart inside the lib folder.
We will create a double _size variable is equal to 250.
double _size = 250;
In the body, we will add the Stack widget. In this widget, we will add SizeOffsetWrapper(). In this method, we will add onSizeChange and add AnimatedContainer() with duration, width, height, and color.
Stack(
children: [
Center(
child: SizeOffsetWrapper(
onSizeChange: (Size size) {
print('Size: ${size.width}, ${size.height}');
},
child: AnimatedContainer(
duration: const Duration(seconds: 3),
width: _size,
height: _size,
color: Colors.cyan,
),
),
),
],
),
In Stack, we will also add a Container with decoration and text. It also wraps on its InkWell() method. In this method, we will add the setState() method. The whole widget will be a wrap on Positioned() widget. When the user presses the button, the container size was changed.
Positioned(
bottom: 100,
left: 70,
right: 70,
child: InkWell(
onTap: (){
setState(() {
_size = _size == 250 ? 50 : 250;
});
},
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.black
),
child: Text('Change size',style: TextStyle(color: Colors.white,
fontSize: 16),
),
),
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_size_position/size_offset_wrapper.dart';
import 'package:flutter_size_position/splash_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Splash(),
debugShowCheckedModeBanner: false,
);
}
}
class WidgetSizeAndPositionDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _WidgetSizeAndPositionDemoState();
}
}
class _WidgetSizeAndPositionDemoState extends State<WidgetSizeAndPositionDemo> {
double _size = 250;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text('Flutter Widget Size & Position Demo'),
backgroundColor: Colors.cyan,
),
body: Stack(
children: [
Center(
child: SizeOffsetWrapper(
onSizeChange: (Size size) {
print('Size: ${size.width}, ${size.height}');
},
child: AnimatedContainer(
duration: const Duration(seconds: 3),
width: _size,
height: _size,
color: Colors.cyan,
),
),
),
Positioned(
bottom: 100,
left: 70,
right: 70,
child: InkWell(
onTap: (){
setState(() {
_size = _size == 250 ? 50 : 250;
});
},
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
color: Colors.black
),
child: Text('Change size',style: TextStyle(color: Colors.white,
fontSize: 16),
),
),
),
),
],
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Size & Position Widget in a flutter; you can modify this code according to your choice. This was a small introduction to Size & Position Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Size & Position Widget in your flutter projects. That’s how to get the size and position of a widget rendered on the screen. Make a demo program for working Size & Position Widget and shows when the user taps on the button, then the size of the animated container will be changed. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
