In this post you will learn how to create animated buttons in flutter example,
we will be using a flutter package for button animation which is flutter_animated_buttons.
First of al create new flutter project, if you don’t know how to create one then watch the below video.
After creating new flutter project open pupspec.yaml file, and paste these 2 packages in your pupspec.yaml file like below.
- flutter_animated_button: ^2.0.0
- google_fonts: ^2.1.0
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
environment: sdk: ">=2.12.0 <3.0.0" dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 flutter_animated_button: ^2.0.0 google_fonts: ^2.1.0 |
Now click on pub get, so your will get these packages and after this you can use these packages in
your flutter project.
When the pub get process is completed, then open your main.dart file and paste the below code there.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
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: () {}, ), ], ), ), ); } } |
Now run your application and you will get the animated buttons in flutter project on your main screen.
If you have any question then ask me in the comments section below.
Happy coding…
