Como criar botões animados no exemplo de Flutter

Tempo de leitura: 2 minutes

Neste post você vai aprender como criar botões animados no exemplo de flutter, estaremos usando um pacote flutter para animação de botão que é flutter_animated_buttons.

Depois de criar um novo projeto flutter, abra o arquivo pupspec.yaml e cole esses 2 pacotes em seu arquivo pupspec.yaml, como abaixo.

  • flutter_animated_button^2.0.3
  • google_fonts^5.1.0

Agora clique em pub get, para que você obtenha esses pacotes e depois disso você pode usar esses pacotes em seu projeto flutter.

Quando o processo de pub get estiver concluído, abra o arquivo main.dart e cole o código abaixo.

import 'package:flutter/material.dart';
import 'package:flutter_animated_button/flutter_animated_button.dart';
import 'package:google_fonts/google_fonts.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.black,
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title;
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            AnimatedButton(
              height: 70,
              width: 200,
              text: 'SUBMIT',
              isReverse: true,
              selectedTextColor: Colors.black,
              transitionType: TransitionType.BOTTOM_TO_TOP,
              textStyle: GoogleFonts.nunito(
                  fontSize: 28,
                  letterSpacing: 5,
                  color: Colors.white,
                  fontWeight: FontWeight.w300),
              onPress: () {},
            ),
            AnimatedButton(
              height: 70,
              width: 200,
              text: 'SUBMIT',
              isReverse: true,
              selectedTextColor: Colors.black,
              transitionType: TransitionType.LEFT_TO_RIGHT,
              textStyle: GoogleFonts.nunito(
                  fontSize: 28,
                  letterSpacing: 5,
                  color: Colors.white,
                  fontWeight: FontWeight.w300),
              backgroundColor: Colors.black,
              borderColor: Colors.white,
              borderRadius: 0,
              borderWidth: 2,
              onPress: () {},
            ),
            AnimatedButton(
              height: 70,
              width: 200,
              text: 'SUBMIT',
              isReverse: true,
              selectedTextColor: Colors.black,
              transitionType: TransitionType.LEFT_TO_RIGHT,
              textStyle: GoogleFonts.nunito(
                  fontSize: 28,
                  letterSpacing: 5,
                  color: Colors.white,
                  fontWeight: FontWeight.w300),
              backgroundColor: Colors.black,
              borderColor: Colors.white,
              borderRadius: 50,
              borderWidth: 2,
              onPress: () {},
            ),
          ],
        ),
      ),
    );
  }
}

Agora execute seu aplicativo e você obterá os botões animados no projeto flutter na tela principal.

Se você tiver alguma dúvida, pergunte-me na seção de comentários abaixo.

Boa codificação…