How to use cupertino_icons?

The cupertino_icons package is a set of icons designed according to Apple’s guidelines for iOS app development. In this tutorial, we will show you how to use the cupertino_icons package in your Flutter app.

How to use cupertino_icons?

Installing cupertino_icons

To use cupertino_icons in your Flutter project, you must first install the package. To do this, follow these steps:

1. Open your project in your favorite IDE.
2. Open the pubspec.yaml file.
3. Add the following line to the dependencies section:

   cupertino_icons: ^1.0.3

4. Save the file.
5. Run the following command in the terminal:

   flutter pub get

This will install the cupertino_icons package in your project.

Using cupertino_icons

Once you have installed the cupertino_icons package, you can use it to add icons to your Flutter app. Here are the steps to do this:

1. Import the cupertino_icons package in your Flutter app by adding the following line at the top of your dart file:

   import 'package:cupertino_icons/cupertino_icons.dart';

2. To use an icon, simply create a new Icon widget and pass in the icon constant as the Icons class of cupertino_icons. For example:

   Icon(CupertinoIcons.search)

3. You can also customize the appearance of the icon by using properties such as color and size. For example:

   Icon( CupertinoIcons.search, color: Colors.blue, size: 30, )

4. Save your file and run your app. You should now see the icon you added.

Here’s an example of how to use cupertino_icons in a Flutter app:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino Icons Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cupertino Icons Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(
                CupertinoIcons.search,
                color: Colors.blue,
                size: 30,
              ),
              SizedBox(height: 20),
              Text(
                'Search Icon',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 50),
              Icon(
                CupertinoIcons.shopping_cart,
                color: Colors.green,
                size: 30,
              ),
              SizedBox(height: 20),
              Text(
                'Shopping Cart Icon',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Conclusion

In this tutorial, we have shown you how to use the cupertino_icons package to add icons to your Flutter app. With cupertino_icons, you can easily add icons that are designed according to Apple’s guidelines for iOS app development.