What’s Inside material.dart #1 — Flutter

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.