CompositedTransformFollower In Flutter
In Flutter, By adding them to the overlay’s stack, you can print visual parts on top of different widgets. A widget is added to the overlay utilizing an OverlayEntry, and the passage’s situation inside the overlay is chosen to utilize Positioned and AnimatedPositioned.
Like the Stack widget, this is useful when you require a thing to show on top of another widget. Nonetheless, you might utilize this widget anyplace without changing your whole codebase. You can do this utilizing the CompositedTransformTarget, CompositedTransformWidget, LayerLink, Overlay, and OverlayEntry widgets.
This blog will explore the CompositedTransformFollower In Flutter. We will see how to implement a demo program. We are going to learn about how to use a CompositedTransformFollower widget in your flutter applications.
CompositedTransformFollower class – widgets library – Dart API
A widget that follows a CompositedTransformTarget. When this widget is composited during the compositing phase (which…api. flutter.dev
Table Of Contents::
Introduction:
A widget that follows a CompositedTransformTarget.When this widget is composited during the compositing stage, it applies a change that brings the targetAnchor of the connected CompositedTransformTarget and followerAnchor of this widget together.
The two anchor focuses will have similar worldwide directions except if the balanced isn’t Offset. zero, in which case followerAnchor will be counterbalanced by offset in the connected CompositedTransformTarget’s direction space.
The LayerLink object utilized as the connection should be the very object that gave to the matching CompositedTransformTarget. The CompositedTransformTarget should come before the paint request than this CompositedTransformFollower.
Demo Module ::
This demo video shows how to use the CompositedTransformFollower in a flutter and shows how a CompositedTransformFollower class will work in your flutter applications. We will show a cyan container isn’t on the overlay however the green container is. The cyan container is an offspring of CompositedTransformTarget and the green container is the offspring of CompostedTransformFollower. They are connected utilizing a similar LayerLink instance.
Constructor:
To utilize CompositedTransformFollower, you need to call the constructor underneath:
const CompositedTransformFollower({
Key? key,
required this.link,
this.showWhenUnlinked = true,
this.offset = Offset.zero,
this.targetAnchor = Alignment.topLeft,
this.followerAnchor = Alignment.topLeft,
Widget? child,
})
All fields marked with @required must not be empty in the above Constructor.
Properties:
There are some parameters of CompositedTransformFollower are:
- > link: This property is utilized to the connection object that interfaces this CompositedTransform Follower with a Composited Transform Target. This property must not be null.
- > showWhenUnlinked: This property is used to showWhenUnlinked is valid, the child/ is apparent and not migrated when the widget isn’t connected; assuming it is false, the child is hidden.
- > Offset: This property is utilized to the additional offset should be added to the related CompositedTransformTarget’s objective anchor to decide the place of this widget’s followed anchor.
- > targetAnchor: This property is utilized to the location where followerAnchor will align itself on the connected CompositedTransformTarget as an anchor.
- > followerAnchor: This property is utilized to the widget’s anchor point will line up with the associated CompositedTransformTarget’s followerAnchor.
- > child: This property is utilized to the widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children with that widget.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a new class Demo(). In this class, we will add four double variables are indicatorWidth was equal to 24, indicatorHeight was equal to 300, slideHeight was equal to 200, and slideWidth was equal to 400.
final double indicatorWidth = 24.0;
final double indicatorHeight = 300.0;
final double slideHeight = 200.0;
final double slideWidth = 400.0;
Then, we will add the LayerLink variable was layerLink is equal to the LayerLink(). Then we will add OverlayEntry and indicatorOffset is equal to the const Offset(0, 0).
final LayerLink layerLink = LayerLink();
OverlayEntry? overlayEntry;
Offset indicatorOffset = const Offset(0, 0);
We will add the getIndicatorOffset() method. In this method, we will add double x, double y, and return Offset(x, y).
Offset getIndicatorOffset(Offset dragOffset) {
final double x = (dragOffset.dx - (indicatorWidth / 2.0))
.clamp(0.0, slideWidth - indicatorWidth);
final double y = (slideHeight - indicatorHeight) / 2.0;
return Offset(x, y);
}
We will create the showIndicator() method. In this method, we will add the indicatorOffset is equal to the getIndicatorOffset, and overlayEntry is equal to the OverlayEntry() method. In this method, we will return Positioned widget. In this widget, we will add CompositedTransformFollower() widget.
void showIndicator(DragStartDetails details) {
indicatorOffset = getIndicatorOffset(details.localPosition);
overlayEntry = OverlayEntry(
builder: (BuildContext context) {
return Positioned(
top: 0.0,
left: 0.0,
child: SizedBox(
width: indicatorWidth,
height: indicatorHeight,
child: CompositedTransformFollower(
offset: indicatorOffset,
link: layerLink,
child: Container(
color: Colors.teal[400],
),
)),
);
},
);
Overlay.of(context)?.insert(overlayEntry!);
}
Now, we will create a updateIndicator() and hideIndicator() method. In updateIndicator, we will add indicatorOffset is equal to the getIndicatorOffset and overlayEntry?.markNeedsBuild(). In hideIndicator, we will add overlayEntry?.remove().
void updateIndicator(DragUpdateDetails details) {
indicatorOffset = getIndicatorOffset(details.localPosition);
overlayEntry?.markNeedsBuild();
}
void hideIndicator(DragEndDetails details) {
overlayEntry?.remove();
}
In the body, we will add CompositedTransformTarget() widget. In this widget, we will add a link equal to the layerLink variable, and its child we will add the Container widget with width, height, and color. Its child we will add GestureDetector() widget. In this widget, we will add onPanStart is equal to the showIndicator method, onPanUpdate is equal to the updateIndicator method, and onPanEnd is equal to the hideIndicator.
CompositedTransformTarget(
link: layerLink,
child: Container(
width: slideWidth,
height: slideHeight,
color: Colors.cyan[100],
child: GestureDetector(
onPanStart: showIndicator,
onPanUpdate: updateIndicator,
onPanEnd: hideIndicator,
),
),
),
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_composite_transform_follower_demo/splash_screen.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash()));
}
class Demo extends StatefulWidget {
const Demo({Key? key}) : super(key: key);
@override
DemoState createState() => DemoState();
}
class DemoState extends State {
final double indicatorWidth = 24.0;
final double indicatorHeight = 300.0;
final double slideHeight = 200.0;
final double slideWidth = 400.0;
final LayerLink layerLink = LayerLink();
OverlayEntry? overlayEntry;
Offset indicatorOffset = const Offset(0, 0);
Offset getIndicatorOffset(Offset dragOffset) {
final double x = (dragOffset.dx - (indicatorWidth / 2.0))
.clamp(0.0, slideWidth - indicatorWidth);
final double y = (slideHeight - indicatorHeight) / 2.0;
return Offset(x, y);
}
void showIndicator(DragStartDetails details) {
indicatorOffset = getIndicatorOffset(details.localPosition);
overlayEntry = OverlayEntry(
builder: (BuildContext context) {
return Positioned(
top: 0.0,
left: 0.0,
child: SizedBox(
width: indicatorWidth,
height: indicatorHeight,
child: CompositedTransformFollower(
offset: indicatorOffset,
link: layerLink,
child: Container(
color: Colors.teal[400],
),
)),
);
},
);
Overlay.of(context)?.insert(overlayEntry!);
}
void updateIndicator(DragUpdateDetails details) {
indicatorOffset = getIndicatorOffset(details.localPosition);
overlayEntry?.markNeedsBuild();
}
void hideIndicator(DragEndDetails details) {
overlayEntry?.remove();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Flutter CompositedTransformFollower Demo',
style: TextStyle(fontSize: 18),
),
automaticallyImplyLeading: false,
backgroundColor: Colors.teal[400],
),
body: Center(
child: CompositedTransformTarget(
link: layerLink,
child: Container(
width: slideWidth,
height: slideHeight,
color: Colors.cyan[100],
child: GestureDetector(
onPanStart: showIndicator,
onPanUpdate: updateIndicator,
onPanEnd: hideIndicator,
),
),
),
),
);
}
}
Conclusion:
In the article, I have explained the CompositedTransformFollower basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to CompositedTransformFollower On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the CompositedTransformFollower in your flutter projects. We will show you what the Introduction is. Make a demo program for working with CompositedTransformFollower in your Flutter applications. 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.
