Rive es una herramienta de animación muy útil que puede crear hermosas animaciones y podemos agregarlas en nuestra aplicación. En flutter, podemos agregar animaciones escribiendo tantas líneas de código, pero esto no es una buena práctica para un desarrollador. En lugar de escribir líneas de código para crear animaciones, podemos crear una usando esta poderosa herramienta de animación de Rive. Lea todos los puntos a continuación en secuencia para comprender el tema con claridad.
Pasos:
- Cree una nueva aplicación Flutter usando el símbolo del sistema. Para crear una nueva aplicación, escribe flutter create YOUR_APP_NAME y ejecuta este comando.
- Abra la aplicación en VS Code o en Android Studio. Estoy usando el código VS.
- Elimine el código predeterminado del archivo main.dart por ahora.
- Ahora, para crear una nueva animación, vaya a https://rive.app/explore/popular/trending/all .
- También puede exportar animaciones creadas por otros usuarios. Haga clic en cualquier animación y haga clic en «Abrir en Rive». Luego descárguelo haciendo clic en el botón exportar.
- La extensión del archivo debe ser .flr y el formato debe ser Binario.
- Ahora, abra VS Code y cree una nueva carpeta «activos» en el directorio raíz de la aplicación y pegue los archivos que ha descargado de rive . Tengo 4 archivos en la carpeta de activos.
-android
-assets
-my.flr
-teddy.flr
-test2.flr
-test3.flr
-build
-ios
-lib
-main.dart
-test
-web
-pubspec.lock
-pubspec.yaml
-README.md
-rive_flutter.iml
- Ahora, edite el archivo pubspec.yaml :
- Añadir rive en dependencias:
- Agregar activos en flutter:
- Después de eso, abra el archivo main.dart ya que vamos a escribir el código en este archivo.
- Elimine todo el código del archivo main.dart y escriba el siguiente código para agregar animaciones a nuestra aplicación.
Dart
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("GeeksForGeeks")),
body: Container(
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 700,
height: 300,
child: FlareActor(
"assets/test3.flr",
animation: "day_and_night",
),
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 700,
height: 300,
child: FlareActor(
"assets/my.flr",
animation: "left2right",
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 700,
height: 300,
child: FlareActor(
"assets/teddy.flr",
//test, success,idle,fail
animation: "success",
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 700,
height: 300,
child: FlareActor(
"assets/test2.flr",
animation: "Demo Mode",
),
),
),
],
),
),
);
}
}
- Mostraremos estas animaciones en nuestra pantalla de inicio. No olvide indicar el tipo de animación en FlareActor Widget; de lo contrario, no obtendrá ningún efecto de animación.
- Ejecute la aplicación escribiendo el comando flutter run en la terminal y vea el resultado.
Producción:
El código completo está disponible en https://github.com/singhteekam/rive-flutter .
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA