{"id":7378,"date":"2021-07-16T06:30:47","date_gmt":"2021-07-16T06:30:47","guid":{"rendered":"https:\/\/www.getwidget.dev\/blogs\/flutter-animation-widget\/"},"modified":"2024-11-21T11:23:26","modified_gmt":"2024-11-21T11:23:26","slug":"flutter-animation-widget","status":"publish","type":"post","link":"https:\/\/www.getwidget.dev\/blog\/flutter-animation-widget\/","title":{"rendered":"Flutter Animation &#8211; That understands the component&#8217;s current value and its states."},"content":{"rendered":"<p><a href=\"https:\/\/docs.getwidget.dev\/gf-animation\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Animation<\/strong><\/a> is an abstract class that helps to understand the components&#8217; current values and their states. we mostly used animation to create models that are required for research and study. Animation also allows us to create realistic models that help us to show the accurate representation of a component. \u200c\u200cAnimations enhance the user experience that makes the applications more interactive for the users and user-friendly.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/MicrosoftTeams-image--115-.png\" alt=\"\" width=\"505\" height=\"485\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/MicrosoftTeams-image--115-.png\" alt=\"\" width=\"505\" height=\"485\" \/><\/noscript><\/figure>\n<h3 id=\"flutter-animation-widget\">Flutter Animation Widget<\/h3>\n<p>Flutter uses an animation widget to make the component&#8217;s state dynamic. We can customize the animation by using its property. Nowadays animations are used to make their components more interactive.<\/p>\n<p>In Flutter, we can define animation inside scaffold but before declaring animation we need to declare animation controller.<\/p>\n<h3 id=\"flutter-animation-controller\">Flutter Animation Controller<\/h3>\n<p>A controller for animation. This class lets us perform tasks such as Play an animation forward or in reverse, or stop an animation, etc. Set the animation to a specific value.<\/p>\n<p>By using different properties of the controller we can customize the animation duration, parent, and curve structure.<\/p>\n<p>Also Read: <a href=\"https:\/\/www.getwidget.dev\/blog\/flutter-loader\/\" rel=\"noreferrer\">How to Build Flutter Loader Widget<\/a><\/p>\n<h3 id=\"how-to-use-custom-animation-with-gfwidget\">How to use custom animation with GFWidget<\/h3>\n<p>It allows to speed up overall Flutter app development by 20-30%. It has 1000+ widget component that allows you to enhance your Flutter UI design. And it will speed up in flutter development process with fully customizable features control.<\/p>\n<blockquote><p><em>Now here is i am going to talk about what is <strong>GetWidget<\/strong> Animation widget and how we implement this on Flutter app to build awesome Flutter Animation widget for an app.<\/em><\/p><\/blockquote>\n<h3 id=\"how-to-get-start-with-gfanimation\">How to Get Start with GFAnimation<\/h3>\n<p>Now here is the guide about how we should start developing <strong>GFAnimation <\/strong>Widget with the use of <strong>GetWidget<\/strong> UI Library.<\/p>\n<p><a href=\"https:\/\/docs.getwidget.dev\/getting-started\/\" target=\"_blank\" rel=\"noopener\"><strong>Getting started<\/strong><\/a> will guide you how to start building a beautiful flutter application with <strong>GetWidget<\/strong> UI library. You have to install the package from <strong>pub.dev<\/strong>, import the package in your Flutter project.<\/p>\n<blockquote><p><em>Install Package from pub.dev :<\/em><\/p><\/blockquote>\n<p><a href=\"https:\/\/pub.dev\/packages\/getwidget\/\" target=\"_blank\" rel=\"noopener\"><strong>https:\/\/pub.dev\/packages\/getwidget<\/strong><\/a><\/p>\n<h3 id=\"import-full-package\">Import full package:<\/h3>\n<p>import &#8216;package:getwidget\/getwidget.dart&#8217;;<\/p>\n<p><strong>Note: dependencies: getwidget: ^ 4.0.0<\/strong><\/p>\n<blockquote><p><em>Keep playing with the pre-built UI components.<\/em><\/p><\/blockquote>\n<p>Also Read: <a href=\"https:\/\/www.getwidget.dev\/blog\/flutter-search-bar-widgets\/\" rel=\"noreferrer\">How to build Flutter Auto Complete Custom Searchbar<\/a><\/p>\n<h3 id=\"flutter-rotation-animation\">Flutter Rotation Animation<\/h3>\n<p>Rotation GFAnimation is a <strong>Flutter Rotation Animation widget<\/strong> that will rotate the component. GFAnimation property <code>type: GFAnimationType.rotateTransition<\/code> creates a rotation transition for the child of a widget. We can use the below code to create a rotation animation for a component.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-Rotation_xN-DtCumD.gif\" alt=\"\" width=\"800\" height=\"465\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-Rotation_xN-DtCumD.gif\" alt=\"\" width=\"800\" height=\"465\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';\n\n  AnimationController controller;\n  Animation animation;\n  \n  @override\n  void initState() {\n    super.initState();\n    controller =\n        AnimationController(duration: const Duration(seconds: 10), vsync: this);\n    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);\n    controller.repeat();\n  }\n\nGestureDetector(\n  onTap: () {\n    controller.repeat();\n  },\n  child: GFAnimation(\n    turnsAnimation: animation,\n    controller: controller,\n    type: GFAnimationType.rotateTransition,\n    alignment: Alignment.center,\n    child: Image.asset(\n      'assets image here',\n      width: 100,\n      height: 120,\n    ),\n  ),\n),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Custom Rotation Animation with Example Code Snippet<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"flutter-scaling-animation\">Flutter Scaling Animation<\/h3>\n<p>Flutter Scaling GFAnimation apparently changes the size of a widget from smaller to bigger or vice versa. GFAnimation property <code>type: GFAnimationType.scaleTransition<\/code> . Creates a scale transition for the child of the widget. We can use the below code for scaling animation.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation_-scaling_xKsfUBwdY.gif\" alt=\"\" width=\"800\" height=\"465\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation_-scaling_xKsfUBwdY.gif\" alt=\"\" width=\"800\" height=\"465\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';    \n\nAnimationController controller;\n  Animation animation;\n  \n  @override\n  void initState() {\n    super.initState();\n    controller =\n        AnimationController(duration: const Duration(seconds: 10), vsync: this);\n    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);\n    controller.repeat();\n  }\n\nGestureDetector(\n  onTap: () {\n    controller.repeat();\n  },\n  child: GFAnimation(\n    scaleAnimation: animation,\n    controller: controller,\n    type: GFAnimationType.scaleTransition,\n    child: Image.asset(\n      'assets image here',\n      width: 110,\n      height: 90,\n    ),\n  ),\n),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Scaling Widget Animation Example Code\u00a0<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"flutter-alignment-animation\">Flutter Alignment Animation<\/h3>\n<p>Flutter Alignment GFAnimation aligns your component horizontally or else vertically. If you are giving a particular alignment then with the given duration it will align your component to the targeted alignment position. GFAnimation property <code>type: GFAnimationType.align<\/code> , creates alignment transitions for the child of the widget. We can use the below code for alignment animation.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-_allignment_1NU1fAmgT.gif\" alt=\"\" width=\"800\" height=\"465\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-_allignment_1NU1fAmgT.gif\" alt=\"\" width=\"800\" height=\"465\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';    \n\nGFAnimation(\n  duration: Duration(seconds: 4),\n  alignment: Alignment.bottomLeft,\n  type: GFAnimationType.align,\n  child: Image.asset(\n    'assets image here',\n    width: 130,\n    height: 130,\n  ),\n),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Alignment Animation Example Code Snippet\u00a0<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"flutter-slide-transition-with-gfanimation\">Flutter Slide Transition With GFAnimation<\/h3>\n<p>Slide Transition GFAnimation animates the widget from one position to another relative position. GFAnimation property <code>type: GFAnimationType.slideTransition<\/code> , Creates a fractional translation transition for the child of the widget. We can use the below code for slide transition animation.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-_slide_pCBzSV31Bgt.webp\" alt=\"\" width=\"800\" height=\"465\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-_slide_pCBzSV31Bgt.webp\" alt=\"\" width=\"800\" height=\"465\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';    \n\n Animation offsetAnimation;\n  @override\n  void initState() {\n    super.initState();\n    controller =\n        AnimationController(duration: const Duration(seconds: 6), vsync: this);\n    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);\n    controller.repeat();\n    offsetAnimation = Tween(\n      begin: Offset(-5, 0),\n      end: const Offset(0, 0),\n    ).animate(CurvedAnimation(\n      parent: controller,\n      curve: Curves.linear,\n    ));\n  }\n\nContainer(\n  width: MediaQuery.of(context).size.width,\n  child: GFAnimation(\n    controller: controller,\n    slidePosition: offsetAnimation,\n    type: GFAnimationType.slideTransition,\n    child: Image.asset(\n      'assets image here',\n      width: 110,\n      height: 110,\n    ),\n  ),\n),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Slide Transition Example Code<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"flutter-size-animation\">Flutter Size Animation<\/h3>\n<p>Flutter Size GFAnimation animates the widget that automatically transitions its size in a given duration whenever the given child&#8217;s size changes. GFAnimation property <code>type: GFAnimationType.size<\/code> , creates a widget that animates its size. We can use the below code for size animation.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-size_Uo3LU0xmy.gif\" alt=\"\" width=\"800\" height=\"465\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-size_Uo3LU0xmy.gif\" alt=\"\" width=\"800\" height=\"465\" \/><\/noscript><\/figure>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';    \n\nbool selected = false;\n\nAnimationController controller;\nAnimation animation;\n  \n@override\n  void initState() {\n    super.initState();\n    controller =\n        AnimationController(duration: const Duration(seconds: 7), vsync: this);\n    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);\n    controller.repeat();\n  }\n\nGFAnimation(\n  onTap: () {\n    if (mounted) {\n      setState(() {\n        selected = !selected;\n      });\n    }\n  },\n  width: selected ? 150 : 100,\n  height: selected ? 150 : 100,\n  type: GFAnimationType.size,\n  controller: controller,\n  child: Image.asset(\n    'assets image here',\n     width: 90,\n    height: 90,\n  ),\n),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Size Animation With Example Code\u00a0<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"flutter-container-animation\">Flutter Container Animation<\/h3>\n<p>Container GFAnimation animates the component that automatically transits its size in a given duration whenever the given child&#8217;s size changes. GFAnimation property <code>type: GFAnimationType.container<\/code> , creates a widget that changes its size.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-container_vGQhL26sk.gif\" alt=\"\" width=\"800\" height=\"465\" \/><noscript><img decoding=\"async\" class=\"kg-image lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/getwidget\/\/2023\/04\/Animation-container_vGQhL26sk.gif\" alt=\"\" width=\"800\" height=\"465\" \/><\/noscript><\/figure>\n<p>We can use the below code for container animation.<\/p>\n<figure class=\"kg-card kg-code-card\">\n<pre><code class=\"language-javascript\">import 'package:getwidget\/getwidget.dart';    \n\nAnimationController controller;\nAnimation animation;\ndouble _fontSize = 40;\n  \n@override\n  void initState() {\n    super.initState();\n    controller =\n        AnimationController(duration: const Duration(seconds: 10), vsync: this);\n    animation = new CurvedAnimation(parent: controller, curve: Curves.linear);\n    controller.repeat();\n  }\n\nGFAnimation(\n  width: 80,\n  changedWidth: 120,\n  height: 60,\n  changedHeight: 130,\n  activeColor: Colors.transparent,\n  color: Colors.transparent,\n  fontSize: _fontSize,\n  type: GFAnimationType.container,\n  child: Image.asset(\n    'assets image here',\n     width: 90,\n    height: 90,\n  ),\n),<\/code><\/pre><figcaption><span style=\"white-space: pre-wrap;\">Flutter Container Animation Example Code Snippet<\/span><\/p>\n<\/figcaption><\/figure>\n<h3 id=\"what-are-the-customizable-properties-used\"><strong>What are the customizable properties used?<\/strong><\/h3>\n<p>Ans. The customizable properties include the duration, reverseDuration, alignment, activeAlignment, child, curve, type, width, turnsAnimation, scaleAnimation, slidePosition, controller, onTap, changedHeight etc. of Drawer component . Hence customizable properties are full flexible. You can check out all custom properties on GetWidget <a href=\"https:\/\/docs.getwidget.dev\/gf-animation\/#custom-properties\/\" target=\"_blank\" rel=\"noopener\">Flutter Animation Widget Custom Properties<\/a>.<\/p>\n<h3 id=\"can-our-slide-transition-will-work-without-offsetanimation\">Can our slide transition will work without offsetAnimation?<\/h3>\n<p>Ans: No, it will not work without a declaration of offsetAnimation. To make it work we have to declare the offsetAnimation inside scaffold because it holds the begin and end transition controllers which helps the components to detect the slidePosition.<\/p>\n<p><a href=\"https:\/\/docs.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Get Widget Docs<\/strong><\/a><\/p>\n<figure class=\"kg-card kg-bookmark-card\">\n<div class=\"kg-bookmark-content\">\n<div class=\"kg-bookmark-title\">Flutter GetWidget Docs<\/div>\n<div class=\"kg-bookmark-description\">Get Widget is one of the largest Flutter open-source UI Kit libraries for mobile or web apps. It has more than 1000+ pre-built reusable widgets.<\/div>\n<div class=\"kg-bookmark-metadata\"><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"kg-bookmark-icon lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/favicon_QkjfdlGz1.png\" alt=\"\" \/><\/noscript><span class=\"kg-bookmark-author\">getwidget<\/span><span class=\"kg-bookmark-publisher\">getwidget<\/span><\/div>\n<\/div>\n<div class=\"kg-bookmark-thumbnail\"><img decoding=\"async\" class=\"lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/docs\/tr:dpr-auto,tr:w-auto\/link-share_aT-cHzGY9.png\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"lazyload\" src=\"https:\/\/ik.imagekit.io\/ionicfirebaseapp\/docs\/tr:dpr-auto,tr:w-auto\/link-share_aT-cHzGY9.png\" alt=\"\" \/><\/noscript><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/ionicfirebaseapp\/getwidget\/\" target=\"_blank\" rel=\"noopener\"><strong>GitHub Repository<\/strong><\/a>: Please do appreciate our work through Github start<\/p>\n<h3 id=\"conclusion\">Conclusion:<\/h3>\n<p>Here we discuss, what <a href=\"https:\/\/docs.getwidget.dev\/gf-animation\/\" target=\"_blank\" rel=\"noopener\"><strong>Flutter Animation<\/strong><\/a> Widget is? And how we can use and implement it into our Flutter app through the <strong>GetWidget<\/strong> <strong>Animation<\/strong> component. Here, there are options to customize the Animation and the different Animation types that can be used.<\/p>\n<h3 id=\"about-our-team\"><strong>About Our Team:<\/strong><\/h3>\n<p>We have been working on Flutter since Flutter launched in beta version in 2017. And our team have been putting hundreds and hundreds of hour to experiment and implementation of Flutter. As well as After successfully delivering enterprise and SAAS applications that have been used by more than 500+ businesses around 119+ countries. Now we are in love with Flutter development and we are very passionate about Flutter development. Now it is something we trying to give a small contribution to the <a href=\"https:\/\/forum.getwidget.dev\/\" target=\"_blank\" rel=\"noopener\">Flutter Dev Community<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"A step-by-step guide to building a Flutter custom animation like Rotation, Scaling, Alignment Slide, and Size Animation widget for Flutter apps.","protected":false},"author":1,"featured_media":5226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[139],"tags":[],"class_list":{"0":"post-7378","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-flutter","8":"cs-entry"},"_links":{"self":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/comments?post=7378"}],"version-history":[{"count":2,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7378\/revisions"}],"predecessor-version":[{"id":7922,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/posts\/7378\/revisions\/7922"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/media\/5226"}],"wp:attachment":[{"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/media?parent=7378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/categories?post=7378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.getwidget.dev\/blog\/wp-json\/wp\/v2\/tags?post=7378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}