Make app more alive with beautiful animated Flutter icons

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:

• YouTube
• Dart & Flutter Packages

You can check out the entire code of this App here:

Get Full Source Code

View Github

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

READ MORE