Como criar botões animados no exemplo de Flutter

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…