Hello All Flutter Developers

IO19 is a big thing for flutter they have released flutter_web and flutter now also supports mobile, desktops, embedded and more

Let's get to the basics of flutter.

Question 1) Everything in flutter is a ? . . . Without any thinking our answer is Widgets

Question 2) Most used import in flutter is ? . . . import 'package:flutter/material.dart'; almost in every file, we use it

Now this series will look what's inside the material.dart file

Let's get started

if you see when you ctrl + click on the material.dart in your code, you will be taken to material.dart let's see what's inside it

In this article, we discuss regarding these files about.dart and animated_icons.dart

about.dart

export 'src/material/about.dart';

Let's see what's inside about.dart

The first thing we have in about.dart is AboutListTile which will show us a Tile with our app logo and app name so when we clicked on it it will show us AboutDialog which has a link to LicensePage .

AboutListTile

AboutListTile(

applicationIcon: FlutterLogo(),

applicationName: "What's Inside material.dart",

applicationVersion: "1.0.0",

icon: FlutterLogo(),

applicationLegalese: "Here is my Leagalese",

)

AboutListTile

AboutDialog

AboutDialog(

applicationName: applicationName,

applicationVersion: applicationVersion,

applicationIcon: applicationIcon,

applicationLegalese: applicationLegalese,

children: children,

)

AboutDialog

LicensePage

LicensePage(

applicationName: applicationName,

applicationVersion: applicationVersion,

applicationLegalese: applicationLegalese,

)

License Page

animated_icons.dart

Inside animated_icons.dart we see part 'animated_icons/animated_icons.dart'; which holds our Widget AnimatedIcon and remaining part of the file has the animated icon data See Example Animated Event Icon here

// Public API.

part 'animated_icons/animated_icons.dart';

// Provides a public interface for referring to the private icon

// implementations.

part 'animated_icons/animated_icons_data.dart';



// Animated icons data files.

part 'animated_icons/data/add_event.g.dart';

part 'animated_icons/data/arrow_menu.g.dart';

part 'animated_icons/data/close_menu.g.dart';

part 'animated_icons/data/ellipsis_search.g.dart';

part 'animated_icons/data/event_add.g.dart';

part 'animated_icons/data/home_menu.g.dart';

part 'animated_icons/data/list_view.g.dart';

part 'animated_icons/data/menu_arrow.g.dart';

part 'animated_icons/data/menu_close.g.dart';

part 'animated_icons/data/menu_home.g.dart';

part 'animated_icons/data/pause_play.g.dart';

part 'animated_icons/data/play_pause.g.dart';

part 'animated_icons/data/search_ellipsis.g.dart';

part 'animated_icons/data/view_list.g.dart';

How to use it

AnimatedIcon(

icon: AnimatedIcons.menu_arrow,

progress: controller,

semanticLabel: 'Show menu',

),

along with the above code, we need AnimationController to animate the icon

Important thing make sure you add SingleTickerProviderStateMixin to you State

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin

AnimationController controller;



@override

void initState() {

super.initState();

controller = AnimationController(

vsync: this,

duration: Duration(milliseconds: 500),

);

}

AnimatedIcon

Stay tuned more coming…

Thanks for your time.

Hope you like it, if yes clap & share.