{"id":1103,"date":"2021-11-04T13:28:38","date_gmt":"2021-11-04T12:28:38","guid":{"rendered":"https:\/\/fileidea.com\/?p=1103"},"modified":"2021-11-04T13:30:59","modified_gmt":"2021-11-04T12:30:59","slug":"add-an-animated-figure-in-flutter","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/11\/04\/add-an-animated-figure-in-flutter\/","title":{"rendered":"Add an animated figure in Flutter"},"content":{"rendered":"\n

I once was curious how to add a animated figure to my study application, and I was unsure how to do it. Where do you start, adding a gif picture? Well that doesn’t do much, but if it is really a simple thing you can do it that way. What if you have more animations though you want to switch between? Well, things are getting more complicated, but it’s not complicated to add an animation at all in Flutter. The difficult part is to create an actual animation. Let’s see how we can first add an animation.<\/p>\n\n\n\n

First of all, let’s create a new project so we start with a clean slate with the command:<\/p>\n\n\n

\nflutter create myanimationapp\n<\/pre><\/div>\n\n\n
Great we got that down, now open up your pubspec.yaml<\/strong> file. Add rive to your dependencies. This package might be updated, take the latest here<\/a>.<\/p>\n\n\n
\nrive: ^0.7.22\n<\/pre><\/div>\n\n\n
Then inside your main.dart, let’s add this code:<\/p>\n\n\n
\nimport 'package:flutter\/material.dart';\nimport 'package:rive\/rive.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  \/\/ This widget is the root of your application.\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'FileIdea',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: const MyHomePage(title: 'FileIdea Home Page'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  const MyHomePage({Key? key, required this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  State<MyHomePage> createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n        appBar: AppBar(\n          title: Text(widget.title),\n        ),\n        body: Center(\n          child: Column(\n            mainAxisAlignment: MainAxisAlignment.center,\n            children: const <Widget>[\n              Expanded(\n                child: Center(\n                  child: RiveAnimation.network(\n                    'https:\/\/cdn.rive.app\/animations\/vehicles.riv',\n                  ),\n                ),\n              )\n            ],\n          ),\n        ) \/\/ This trailing comma makes auto-formatting nicer for build methods.\n        );\n  }\n}\n\n<\/pre><\/div>\n\n\n
What we are doing here is fetching from the network, hence RiveAnimation.network<\/strong>, and we are getting the rive file which is used for their own demo\/sample, and it will be displayed in its full glory:<\/p>\n\n\n\n
\"\"
Flutter animated figure<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
I once was curious how to add a animated figure to my study application, and I was unsure how to do it. Where do you start, adding a gif picture? Well that doesn’t do much, but if it is really a simple thing you can do it that way. What if you have more animations … <\/p>\n
Continue reading “Add an animated figure in Flutter”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[82,21],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1103"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=1103"}],"version-history":[{"count":4,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1103\/revisions"}],"predecessor-version":[{"id":1108,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1103\/revisions\/1108"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=1103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=1103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=1103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}