Flutter – Cupertino Icons

Sometimes it happens we did not get the exact icons normally then we have to use the Cupertino icons and Cupertino icons contain mainly the iOS icons. This is an asset repo containing the default set of icon assets used by Flutter’s Cupertino widgets.

How to install it?

First, we know how to install it. so first we have to go on pub.dev and then search Cupertino icons and then you have to click on that which has a popularity percentage high.

Now when you tap then there are five things you will see Readme, changelog, installing, and version scores. You simply tap on the installing and then you find two methods to install the Cupertino icons in your project.

Method 1: In method one, you need to open your terminal and run the given command dart pub add Cupertino icons.

flutter pub add cupertino_icons

When you run and it shows the successful status it means it installs in your project and now you can use the Cupertino icons

Method 2: In the second method you need to copy the dependencies and replace them with the default dependencies just because we need the latest version, in the latest version we get some extra icons.

Note: Always use the latest version of packages it is mandatory.

 cupertino_icons: ^1.0.5

Copy from here and paste it into pubsec.yml.

After replacing you need to save it in vscode and if you are using an android studio then you need to run pub get, it shows automatically when you paste it after the successful status then you just copy the given line and paste it in your home page where you use icons.

import 'package:cupertino_icons/cupertino_icons.dart';

Copy from here and paste it into your home page.

This is the whole process to install Cupertino icons. You can see in the example how I did just copy code and understand if you are facing any problems.

Example: How to use Cupertino icons

Dart

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

import 'package:cupertino_icons/cupertino_icons.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CuperTino Icons"),
      ),
      body: SingleChildScrollView(
        child: Column(
          // crossAxisAlignment: CrossAxisAlignment.center,
          // mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Icon(
                CupertinoIcons.add,
                color: Colors.red,
                size: 100,
              ),
            ),
            SizedBox(
              height: 50,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(
                  CupertinoIcons.airplane,
                  color: Colors.yellow,
                  size: 100,
                ),
                Icon(
                  CupertinoIcons.antenna_radiowaves_left_right,
                  color: Colors.cyanAccent,
                  size: 100,
                ),
              ],
            ),
            SizedBox(
              height: 50,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(
                  CupertinoIcons.ant,
                  color: Colors.green,
                  size: 100,
                ),
                Icon(
                  CupertinoIcons.xmark_square,
                  color: Colors.brown,
                  size: 100,
                ),
              ],
            ),
            SizedBox(
              height: 100,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  CupertinoIcons.gobackward,
                  color: Colors.green,
                  size: 200,
                ),
                Icon(
                  CupertinoIcons.goforward,
                  color: Colors.green,
                  size: 200,
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Cupertino Icons

Explanation

Here we basically take the simple stateful widget and in this widget, we take the AppBar and body. In the body, we take the column and in the column, it takes much more children so we take the icons and in icons, we take the Cupertino icons. Cupertino icons take size and color.