Rive Mars Landing

main.dart

import 'package:flutter/material.dart';
// NOTICE!
// The rive package as an Image class, which conflicts with the Flutter Image class.
// Thus, import rive such that it uses its own namespace to avoid this conflict.
import 'package:rive/rive.dart' as rive;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  bool clicked = false;
  late rive.SMIInput<bool> pressed;
  final defaultRocketText = 'Press for liftoff -->';
  late String rocketText;

  /// BEWARE!
  /// This method attempts to obtain references within the rocket.riv file.
  /// If those references don't exist, you will get a runtime exception.
  void _onRiveInit(rive.Artboard artBoard) {
    final controller = rive.StateMachineController.fromArtboard(
      artBoard,
      'Button',
    )!;
    artBoard.addController(controller);
    pressed = controller.findInput('Press')!;
    rocketText = defaultRocketText;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mars Landing'),
        actions: [
          TextButton(
            onPressed: () => setState(() {
              clicked = false;
              rocketText = defaultRocketText;
            }),
            child: const Text('Reset'),
          ),
        ],
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 25.0, right: 5.0),
                child: CircleAvatar(
                  radius: 60,
                  child: Image.network('https://raw.githubusercontent.com/tadaspetra/complete-flutter-course/refs/heads/main/MP1_4_mars_landing/assets/mars.png'),
                ),
              ),
            ],
          ),
          Spacer(),
          Center(
            child: Padding(
              padding: const EdgeInsets.all(65),
              child: Text(rocketText),
            ),
          ),
        ],
      ),
      floatingActionButton: AnimatedContainer(
        padding: const EdgeInsets.only(top: 110),
        alignment: clicked ? Alignment.topRight : Alignment.bottomRight,
        duration: Duration(seconds: 1),
        child: SizedBox(
          width: 100,
          height: 100,
          child: GestureDetector(
            onTapDown: (_) {
              setState(() {
                clicked = true;
                rocketText = '';
              });
              pressed.value = true;
              Future.delayed(
                const Duration(seconds: 2),
                () => setState(() => rocketText = 'Successful Landing'),
              );
            },
            onTapUp: (_) => pressed.value = false,
            onTapCancel: () => pressed.value = false,
            // If the rocket.riv file can't be loaded, you'll get a runtime exception.
            child: rive.RiveAnimation.network(
              'https://raw.githubusercontent.com/tadaspetra/complete-flutter-course/refs/heads/main/MP1_4_mars_landing/assets/rocket.riv',
              onInit: _onRiveInit,
            ),
          ),
        ),
      ),
    );
  }
}