snake_button 0.0.5 copy "snake_button: ^0.0.5" to clipboard
snake_button: ^0.0.5 copied to clipboard

A button that appears with a snake animation along the border.

example/example.dart

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Example App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Example(),
    );
  }
}

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  late final SnakeButtonController _snakeButtonController;

  @override
  void initState() {
    _snakeButtonController = SnakeButtonController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green.shade900,
          title: const Text("Example"),
        ),
        floatingActionButton: _buildFloatingButton(),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: ElevatedButton(
                onPressed: () => _snakeButtonController.show(),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green.shade900,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20.0),
                  ),
                ),
                child: const Text("Show snake button"),
              ),
            ),
            const SizedBox(
              height: 32.0,
            ),
            ElevatedButton(
              onPressed: () => _snakeButtonController.hide(),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green.shade900,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
              child: const Text(
                "Hide snake button",
              ),
            ),
          ],
        ),
      );

  Widget _buildFloatingButton() {
    final elevatedButton = ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.green.shade900,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
      onPressed: () {},
      child: const Icon(
        Icons.add,
      ),
    );

    return SnakeButton(
      controller: _snakeButtonController,
      snakeAnimationDuration: const Duration(milliseconds: 500),
      snakeColor: Colors.green.shade900,
      snakeWidth: 5.0,
      borderRadius: 20.0,
      child: SizedBox(
        height: 70,
        width: 70,
        child: elevatedButton,
      ),
    );
  }
}
3
likes
150
points
1
downloads

Publisher

unverified uploader

Weekly Downloads

A button that appears with a snake animation along the border.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, vector_math

More

Packages that depend on snake_button