Create app icons Flutter Easy

App icons signify installed apps. While searching or opening an app, users see them first. App icons appear on the home screen, app drawer, and app store. Branding an app with an icon helps consumers recognize and identify it. App icons should be attractive, simple, and relevant.

To create app icons Flutter, you can use the flutter_launcher_icons package. Follow these steps:

1. Add the package to your pubspec.yaml file:

dependencies:
  flutter_launcher_icons: ^0.9.2

2. Run the following command in your terminal to install the package:

flutter pub get

3. Create a folder called “icons” in your project’s root directory.
4. The “icons” folder should contain your app’s PNG icon. Icon.png should be at least 512×512 pixels and titled “icon.”
5. Construct the “flutter launcher icons.yaml” file inside the “icons” directory. The settings for the icon locations for each app will be stored in this file.
6. Add the following code to the “flutter_launcher_icons.yaml” file:

flutter_icons:
  android: true
  ios: true
  image_path: "icons/icon.png"

The package uses icon.png in the “icons” folder to build Android and iOS app icons with this code.

7. Generate app icons with the terminal command:

flutter pub run flutter_launcher_icons:main

This script creates Android and iOS app icons in their respective files.

Done Create app icons Flutter now available.

To use custom app icons in a Flutter app, follow these steps:

1. Create a folder called “icons” in the root directory of your project.
2. Add your custom app icons to the “icons” folder. You can have multiple icon files for different resolutions. The icon file names should follow the convention:

IconNameSize.png

If your app icon is “my app icon.png,” your files should be:

my_app_icon.png
[email protected]
[email protected]

with sizes of 60×60, 120×120, and 180×180 pixels respectively.

3. In your pubspec.yaml file, add the following lines of code:

flutter:
  assets:
    - icons/

This code tells Flutter to include the entire “icons” folder in the app’s assets.

4. In your main.dart file, add the following lines of code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Run the app
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) => runApp(MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Text('Hello, world!'),
      ),
    );
  }
}

This code sets the custom app icon using the FlutterAppIcon.changeIcon() method depending on the platform (iOS or Android).

That’s it! You should now have a custom app icon for your Flutter app.