{"id":224,"date":"2020-10-20T06:08:12","date_gmt":"2020-10-20T06:08:12","guid":{"rendered":"http:\/\/bartvwezel.nl\/?p=224"},"modified":"2020-10-20T06:09:06","modified_gmt":"2020-10-20T06:09:06","slug":"animated-bar-chart-with-flutter-hooks","status":"publish","type":"post","link":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/","title":{"rendered":"Animated Bar Chart with Flutter Hooks"},"content":{"rendered":"\n<p>In this <a href=\"http:\/\/bartvwezel.nl\/flutter\/creating-bar-charts-animations-with-custompainter\/\" data-type=\"post\" data-id=\"66\">blog post<\/a>, we described how to use animations to animate a bar chart. In this blog post were are going to add another possible way to animate the bar chart. We are going to use Flutter Hooks to extract the disposing and setup of the animation controller into the hook. This means we do not have to do this for each animation we want to create in our application. <\/p>\n\n\n\n<h2>Configuring the project<\/h2>\n\n\n\n<p>Before we can start with coding, we are going to add a dependency to the project, namely <a href=\"https:\/\/pub.dev\/packages\/flutter_hooks\" data-type=\"URL\" data-id=\"https:\/\/pub.dev\/packages\/flutter_hooks\">Flutter Hooks<\/a>. For this we have to update our <strong>pubspec.yaml<\/strong> with the following dependency: <\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-yaml\">dependencies:\n  flutter_hooks: ^0.14.1<\/code><\/pre>\n\n\n\n<p> Do not forget to install the dependency, running the following command:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell-session\">flutter pub get<\/code><\/pre>\n\n\n\n<p>That is it! We can now use Flutter Hooks in the project. <\/p>\n\n\n\n<h2>Using the HookWidget<\/h2>\n\n\n\n<p>Let&#8217;s take a quick look at the previous animation before we start:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-dart\">class _BarChartState extends State&lt;BarChart&gt; with SingleTickerProviderStateMixin {\n  Map&lt;String, int&gt; data = {\n    &quot;Banana&quot;: 16,\n    &quot;Orange&quot;: 8,\n    &quot;Appple&quot;: 10,\n    &quot;Kiwi&quot;: 10,\n    &quot;Pear&quot;: 3,\n  };\n  Animation&lt;double&gt; animation;\n  AnimationController controller;\n  @override\n  void initState() {\n    super.initState();\n    controller = AnimationController(duration: const Duration(seconds: 2));\n    animation = Tween&lt;double&gt;(begin: 0, end: 100).animate(controller)\n      ..addListener(() {\n        setState(() {});\n      });\n    controller.forward();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return CustomPaint(\n      painter: BarChartPainter(data, &quot;Favorite Fruit&quot;, animation.value),\n      child: Container(\n        width: 350,\n      ),\n    );\n  }\n\n  @override\n  void dispose() {\n    controller.dispose();\n    super.dispose();\n  }\n}<\/code><\/pre>\n\n\n\n<p>Here we have to manage the controller and the animation. We have to add logic to the initState and to the dispose methods, to set up and clean up the animation and controller. So how would we do this with a hook:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-dart\">class BarChart extends HookWidget {\n  final Duration duration = const Duration(seconds: 2);\n\n  @override\n  Widget build(BuildContext context) {\n    final controller = useAnimationController(duration: duration);\n    controller.forward();\n    return BarChartContainer(controller: controller);\n  }\n}\n\nclass BarChartContainer extends AnimatedWidget {\n  BarChartContainer({AnimationController controller})\n      : super(\n            listenable: Tween&lt;double&gt;(begin: 0, end: 100).animate(controller));\n\n  static const Map&lt;String, int&gt; data = {\n    &quot;Banana&quot;: 16,\n    &quot;Orange&quot;: 8,\n    &quot;Appple&quot;: 10,\n    &quot;Kiwi&quot;: 10,\n    &quot;Pear&quot;: 3,\n  };\n\n  @override\n  Widget build(BuildContext context) {\n    Animation&lt;double&gt; animation = listenable;\n    return CustomPaint(\n      painter: BarChartPainter(data, &quot;Favorite Fruit&quot;, animation.value),\n      child: Container(\n        width: 350,\n      ),\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<p>Here we extended the <strong>BarChart<\/strong> with an <strong>HookWidget<\/strong>. This allows us to use hooks. The hooks were are using is:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-dart\">    final controller = useAnimationController(duration: duration);\n    controller.forward();<\/code><\/pre>\n\n\n\n<p>The logic of disposing and setting up the controller is done in the <strong>useAnimationController<\/strong> Hook. We had to wrap the <strong>BarChartPainter<\/strong> in a <strong>BarChartContainer<\/strong>. The reason for this is that the <strong>BarChartPainter<\/strong> already extends the <strong>CustomPainter<\/strong> and the <strong>Widget<\/strong> that gets passed the <strong>AnimationController<\/strong> should extend the <strong>AnimatedWidget<\/strong>. That was all we had to do, to update a default animation to animation with a hook. Thanks for reading, you can find the code <a href=\"https:\/\/github.com\/Barttje\/barchart_animation\/blob\/master\/lib\/animation4.dart\" data-type=\"URL\" data-id=\"https:\/\/github.com\/Barttje\/barchart_animation\/blob\/master\/lib\/animation4.dart\">here<\/a>! <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"600\" height=\"242\" src=\"http:\/\/bartvwezel.nl\/wp-content\/uploads\/2020\/09\/ezgif.com-video-to-gif-4.gif\" alt=\"\" class=\"wp-image-114\"\/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this blog post, we described how to use animations to animate a bar chart. In this blog post were are going to add another possible way to animate the bar chart. We are going to use Flutter Hooks to extract the disposing and setup of the animation controller into the hook. This means we do not have to do this for each animation we want to create in our application. Configuring the project Before we can start with coding, we are going to add a dependency to the project, namely Flutter Hooks. For this we have to update our\u2026<\/p>\n","protected":false},"author":1,"featured_media":231,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[14,7,13],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[]}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animated Bar Chart with Flutter Hooks - Barttje<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Bar Chart with Flutter Hooks - Barttje\" \/>\n<meta property=\"og:description\" content=\"In this blog post, we described how to use animations to animate a bar chart. In this blog post were are going to add another possible way to animate the bar chart. We are going to use Flutter Hooks to extract the disposing and setup of the animation controller into the hook. This means we do not have to do this for each animation we want to create in our application. Configuring the project Before we can start with coding, we are going to add a dependency to the project, namely Flutter Hooks. For this we have to update our\u2026\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/\" \/>\n<meta property=\"og:site_name\" content=\"Barttje\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-20T06:08:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-20T06:09:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bartvwezel.nl\/wp-content\/uploads\/2020\/10\/Screenshot-2020-10-20-at-08.08.41.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"810\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Barttje\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Barttje\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/\"},\"author\":{\"name\":\"Barttje\",\"@id\":\"https:\/\/bartvwezel.nl\/#\/schema\/person\/c8a363ad42b80a230825549f5c5ffa9c\"},\"headline\":\"Animated Bar Chart with Flutter Hooks\",\"datePublished\":\"2020-10-20T06:08:12+00:00\",\"dateModified\":\"2020-10-20T06:09:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/\"},\"wordCount\":286,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/bartvwezel.nl\/#\/schema\/person\/c8a363ad42b80a230825549f5c5ffa9c\"},\"keywords\":[\"Animation\",\"Flutter\",\"Hooks\"],\"articleSection\":[\"Flutter\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/\",\"url\":\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/\",\"name\":\"Animated Bar Chart with Flutter Hooks - Barttje\",\"isPartOf\":{\"@id\":\"https:\/\/bartvwezel.nl\/#website\"},\"datePublished\":\"2020-10-20T06:08:12+00:00\",\"dateModified\":\"2020-10-20T06:09:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/bartvwezel.nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated Bar Chart with Flutter Hooks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bartvwezel.nl\/#website\",\"url\":\"https:\/\/bartvwezel.nl\/\",\"name\":\"Barttje\",\"description\":\"Learning, Discussing, Explaining Flutter Development\",\"publisher\":{\"@id\":\"https:\/\/bartvwezel.nl\/#\/schema\/person\/c8a363ad42b80a230825549f5c5ffa9c\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bartvwezel.nl\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/bartvwezel.nl\/#\/schema\/person\/c8a363ad42b80a230825549f5c5ffa9c\",\"name\":\"Barttje\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bartvwezel.nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/813b8ee50809e6f107579e9c37d0cf1f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/813b8ee50809e6f107579e9c37d0cf1f?s=96&d=mm&r=g\",\"caption\":\"Barttje\"},\"logo\":{\"@id\":\"https:\/\/bartvwezel.nl\/#\/schema\/person\/image\/\"},\"url\":\"https:\/\/bartvwezel.nl\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated Bar Chart with Flutter Hooks - Barttje","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/","og_locale":"en_US","og_type":"article","og_title":"Animated Bar Chart with Flutter Hooks - Barttje","og_description":"In this blog post, we described how to use animations to animate a bar chart. In this blog post were are going to add another possible way to animate the bar chart. We are going to use Flutter Hooks to extract the disposing and setup of the animation controller into the hook. This means we do not have to do this for each animation we want to create in our application. Configuring the project Before we can start with coding, we are going to add a dependency to the project, namely Flutter Hooks. For this we have to update our\u2026","og_url":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/","og_site_name":"Barttje","article_published_time":"2020-10-20T06:08:12+00:00","article_modified_time":"2020-10-20T06:09:06+00:00","og_image":[{"width":1200,"height":810,"url":"https:\/\/bartvwezel.nl\/wp-content\/uploads\/2020\/10\/Screenshot-2020-10-20-at-08.08.41.png","type":"image\/png"}],"author":"Barttje","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Barttje","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/#article","isPartOf":{"@id":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/"},"author":{"name":"Barttje","@id":"https:\/\/bartvwezel.nl\/#\/schema\/person\/c8a363ad42b80a230825549f5c5ffa9c"},"headline":"Animated Bar Chart with Flutter Hooks","datePublished":"2020-10-20T06:08:12+00:00","dateModified":"2020-10-20T06:09:06+00:00","mainEntityOfPage":{"@id":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/"},"wordCount":286,"commentCount":0,"publisher":{"@id":"https:\/\/bartvwezel.nl\/#\/schema\/person\/c8a363ad42b80a230825549f5c5ffa9c"},"keywords":["Animation","Flutter","Hooks"],"articleSection":["Flutter"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/","url":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/","name":"Animated Bar Chart with Flutter Hooks - Barttje","isPartOf":{"@id":"https:\/\/bartvwezel.nl\/#website"},"datePublished":"2020-10-20T06:08:12+00:00","dateModified":"2020-10-20T06:09:06+00:00","breadcrumb":{"@id":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bartvwezel.nl\/flutter\/animated-bar-chart-with-flutter-hooks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bartvwezel.nl\/"},{"@type":"ListItem","position":2,"name":"Animated Bar Chart with Flutter Hooks"}]},{"@type":"WebSite","@id":"https:\/\/bartvwezel.nl\/#website","url":"https:\/\/bartvwezel.nl\/","name":"Barttje","description":"Learning, Discussing, Explaining Flutter Development","publisher":{"@id":"https:\/\/bartvwezel.nl\/#\/schema\/person\/c8a363ad42b80a230825549f5c5ffa9c"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bartvwezel.nl\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/bartvwezel.nl\/#\/schema\/person\/c8a363ad42b80a230825549f5c5ffa9c","name":"Barttje","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bartvwezel.nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/813b8ee50809e6f107579e9c37d0cf1f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/813b8ee50809e6f107579e9c37d0cf1f?s=96&d=mm&r=g","caption":"Barttje"},"logo":{"@id":"https:\/\/bartvwezel.nl\/#\/schema\/person\/image\/"},"url":"https:\/\/bartvwezel.nl\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/posts\/224"}],"collection":[{"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/comments?post=224"}],"version-history":[{"count":0,"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/posts\/224\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/media\/231"}],"wp:attachment":[{"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/media?parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/categories?post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bartvwezel.nl\/wp-json\/wp\/v2\/tags?post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}