Animated Flutter icons – Make app more alive with beautiful animated icons using different types of animated icons, which make app more beautiful and attractive.
Features
Action Icons
Alert Icons
Content Icons
Loading Icons
Media Icons
Navigation Icons
Notification Icons
Social Media Icons
Other Icons
Getting started
Add the dependency to pubspec.yaml or enter the following command into your terminal:
flutter pub add use_widgets
Next I will provide a super simple example of how to use one of the animated icons:
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:use_widgets/use_widgets/use_widgets.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return HookBuilder(builder: (context) {
final menuIsOpen = useState(false);
return Scaffold(
backgroundColor: const Color(0xff202020),
appBar: AppBar(
backgroundColor: Colors.black,
leading: InkWell(
onTap: () {
menuIsOpen.value = !menuIsOpen.value;
},
child: MenuV2( // Here we use one of the animated icons
isOpen: menuIsOpen.value,
color: Colors.white,
),
),
),
body: Center(),
),
}),
}
}
Additional information
The underlying lottie icons are from https://useanimations.com/.
All the free files available in useAnimations are distributed under Creative Commons (CC) Attribution (BY) unless stated otherwise.
The resources (animations) can be used for personal and commercial usage within Web and Mobile Applications. Animated Flutter icons
You may modify the resources according to your requirements and use them in any or all of your personal or commercial projects. For example, you may include this resource on a website or mobile application you will be designing for a client.
You are required to attribute or link to useanimations.com in any of projects.
useAnimations (useanimations.com) will not be responsible for any outcome that may occur during the use of their resources.
Files from useAnimations can be shared as long as the useAnimations are credited appropriately.
Resources Used:
You can check out the entire code of this App here:
Get Full Source Code
Conclusion
This was all about a quick go through the basic flutter App UI Screen. If you need any assistance regarding flutter app development, you can consult a flutter developer from FlutterDesk. We would love to be of help. Still, if you feel any difficult while dealing with Flutter app development projects, you can reach out to us or hire Flutter developers to outsource any of your app development project.
Do like & share my Facebook page. if you find this post helpful. Thank you!!
Happy coding! 😉
Related Articles:
- How to Install Flutter in windows 10
- Make News and Weather App using flutter
- Quiz App using flutter with source code
- Chat GPT Voice Chatbot App with Flutter source code
- Flutter NEWS App with REST APIs source code
- Flutter Wallpaper Application built with Flutter source code
- Beautiful Login and signup screen using Flutter
- Flutter Login Page and Registration App UI screen design
- Flutter Login screen model app with source code
- Animated Login screen using Flutter with source code
- Beautiful Login Page UI made in flutter source code
- A Flutter Responsive Login and Signup Auth Screen UI
- Flutter Login and Register Auth App using Google and Facebook sign in
- Face recognition authentication (Signup + signin) with Flutter
- A Flutter Animated Login screen UI design source code
- SignIn and SignUp App Using Flutter with source code