abuanwar072/build-an-animated-app-with-rive-and-flutter

Hi 👋, I'm Abu Anwar

A self-taught programmer and born at very little age😜

• 🔭 I’m currently working on TakeIn, The Flutter Way

• 🌱 I’m currently learning Flutter, SwiftUI

• 👯 I’m looking to collaborate with other content creators

• ⚡ Fun fact I love to play Badminton and Chai over coffee.

Connect with me:

Languages and Tools:

 

build-an-animated-app-with-rive-and-flutter's Issues

Problem with Rive button

I tried to code simple rive button from your code and my button works strangely. If I add your riv button I have this same problem too. Can you try my code and will tell me what is wrong?

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'HOME PAGE',
      theme: ThemeData(
        textTheme: const TextTheme(
          titleLarge: TextStyle(fontSize: 25.0, color: Colors.lightBlueAccent),
        ),
        scaffoldBackgroundColor: const Color(0xFF011230),
      ),
      home: const MyHomePage(title: 'HOME PAGE'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late RiveAnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = OneShotAnimation(
      "active",
      autoplay: false,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          elevation: 0,
          centerTitle: true,
          title: Text(
            widget.title,
            style: const TextStyle(
                fontSize: 25,
                color: Colors.lightBlueAccent,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic),
          ),
          backgroundColor: Colors.transparent,
        ),
        body: SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Container(
              padding: const EdgeInsets.only(
                  top: 60, right: 20, left: 20, bottom: 1),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Flex(direction: Axis.horizontal, children: [
                    Expanded(
                        child: GestureDetector(
                      onTap: () {
                        _controller.isActive = true;
                        Future.delayed(
                          const Duration(milliseconds: 750),
                          () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => const Test(),
                              ),
                            );
                          },
                        );
                      },
                      child: SizedBox(
                        height: 64,
                        width: MediaQuery.of(context).size.width,
                        child: RiveAnimation.asset(
                          "assets/RiveAssets/buttonT.riv",
                          controllers: [_controller],
                        ),
                      ),
                    )),
                  ]),
                ],
              ),
            )));
  }
}

class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            "NEXT PAGE",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
            ),
          ),
          backgroundColor: const Color(0xFF011230),
          elevation: 0,
        ),
        body: SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: ListView(
              padding: const EdgeInsets.only(
                  top: 10, right: 20, left: 20, bottom: 5),
              children: <Widget>[
                Flex(
                  direction: Axis.horizontal,
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: const Text("test 1",
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                            )),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 15),
                Flex(
                  direction: Axis.horizontal,
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: const Text("test 2",
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                            )),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 15),
                Flex(
                  direction: Axis.horizontal,
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: const Text("test 3",
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                            )),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 5),
              ],
            )));
  }
}

Rive animation button https://rive.app/community/4478-9135-test-button/

Navigation

It would be cool to see episode 6 with the implementation of Go_router 🤩

there is only one ontap so i cant navigate to mulltiple pages if someone know how to do this whith one ontap please let me know