Skip to content

Instantly share code, notes, and snippets.

@valterh4ck3r

valterh4ck3r/animated_button.dart

Last active May 5, 2022 16:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save valterh4ck3r/c809d64d9c023c9ab087b03320a8baf0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save valterh4ck3r/c809d64d9c023c9ab087b03320a8baf0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. valterh4ck3r revised this gist May 5, 2022. 1 changed file with 42 additions and 38 deletions.
    80 changes: 42 additions & 38 deletions animated_button.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,6 @@
    import 'package:flutter/material.dart';

    class AnimatedButton extends StatefulWidget {

    bool Function() validate;
    Function() onPressed;
    bool isLoading;
    @@ -24,44 +23,49 @@ class AnimatedButton extends StatefulWidget {
    class _AnimatedButtonState extends State<AnimatedButton> {
    @override
    Widget build(BuildContext context) {
    return AnimatedContainer(
    duration: const Duration(milliseconds: 400),
    curve: Curves.linear,
    width: widget.isLoading || widget.isSuccess
    ? 55
    : MediaQuery.of(context).size.width,
    height: widget.isLoading || widget.isSuccess ? 55 : 50,
    child: ElevatedButton(
    style: ButtonStyle(
    backgroundColor: widget.isSuccess
    ? MaterialStateProperty.all(Colors.green)
    : MaterialStateProperty.all(Theme.of(context).primaryColor),
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(
    widget.isLoading || widget.isSuccess ? 50 : 14),
    ))),
    onPressed: widget.onPressed,
    child: widget.isSuccess
    ? const Icon(
    Icons.check,
    size: 25,
    color: Colors.white,
    )
    : widget.isLoading
    ? const SizedBox(
    width: 25,
    height: 25,
    child: CircularProgressIndicator(
    color: Colors.white,
    ))
    : const Text(
    "Enviar",
    style: TextStyle(
    return Center(
    child: AnimatedContainer(
    duration: const Duration(milliseconds: 400),
    curve: Curves.linear,
    width: widget.isLoading || widget.isSuccess
    ? 55
    : MediaQuery.of(context).size.width,
    height: widget.isLoading || widget.isSuccess ? 55 : 50,
    child: ElevatedButton(
    style: ButtonStyle(
    backgroundColor: widget.isSuccess
    ? MaterialStateProperty.all(Colors.green)
    : MaterialStateProperty.all(Theme.of(context).primaryColor),
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(
    widget.isLoading || widget.isSuccess ? 50 : 14),
    ))),
    onPressed: () {
    if (widget.isLoading || widget.isSuccess) return;
    widget.onPressed.call();
    },
    child: widget.isSuccess
    ? const Icon(
    Icons.check,
    size: 25,
    color: Colors.white,
    )
    : widget.isLoading
    ? const SizedBox(
    width: 25,
    height: 25,
    child: CircularProgressIndicator(
    color: Colors.white,
    fontWeight: FontWeight.bold,
    fontSize: 16),
    )),
    ))
    : const Text(
    "Enviar",
    style: TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.bold,
    fontSize: 16),
    )),
    ),
    );
    }
    }
  2. valterh4ck3r created this gist Mar 19, 2022.
    67 changes: 67 additions & 0 deletions animated_button.dart
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    import 'package:flutter/material.dart';

    class AnimatedButton extends StatefulWidget {

    bool Function() validate;
    Function() onPressed;
    bool isLoading;
    bool isSuccess;
    String text;

    AnimatedButton(
    {Key? key,
    required this.validate,
    required this.onPressed,
    required this.isLoading,
    required this.isSuccess,
    required this.text})
    : super(key: key);

    @override
    _AnimatedButtonState createState() => _AnimatedButtonState();
    }

    class _AnimatedButtonState extends State<AnimatedButton> {
    @override
    Widget build(BuildContext context) {
    return AnimatedContainer(
    duration: const Duration(milliseconds: 400),
    curve: Curves.linear,
    width: widget.isLoading || widget.isSuccess
    ? 55
    : MediaQuery.of(context).size.width,
    height: widget.isLoading || widget.isSuccess ? 55 : 50,
    child: ElevatedButton(
    style: ButtonStyle(
    backgroundColor: widget.isSuccess
    ? MaterialStateProperty.all(Colors.green)
    : MaterialStateProperty.all(Theme.of(context).primaryColor),
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(
    widget.isLoading || widget.isSuccess ? 50 : 14),
    ))),
    onPressed: widget.onPressed,
    child: widget.isSuccess
    ? const Icon(
    Icons.check,
    size: 25,
    color: Colors.white,
    )
    : widget.isLoading
    ? const SizedBox(
    width: 25,
    height: 25,
    child: CircularProgressIndicator(
    color: Colors.white,
    ))
    : const Text(
    "Enviar",
    style: TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.bold,
    fontSize: 16),
    )),
    );
    }
    }