Atlas Icons Flutter

开源图标库

开源图标库，图标以SVG格式、字体文件、Figma、Adobe XD和Iconjar库的形式提供。

制作方

由Vectopus制作。

如何使用

安装Flutter包

在终端运行以下命令安装atlas_icons包：

flutter pub add atlas_icons

导入包

在你的Dart文件中导入atlas_icons包：

import 'package:atlas_icons/atlas_icons.dart';

嵌入图标

在组件中嵌入Icon小部件。例如，你可以使用Atlas.audio_album图标，并设置其大小为24.0：

Icon(Atlas.audio_album, size: 24.0,)

许可证

MIT © Atlas Icons


### 完整示例Demo

下面是一个完整的示例，展示如何在Flutter应用中使用`atlas_icons`包。

#### main.dart
```dart
import 'package:flutter/material.dart';
import 'package:atlas_icons/atlas_icons.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Atlas Icons Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Atlas Icons Demo'),
        ),
        body: Center(
          child: AtlasIconExample(),
        ),
      ),
    );
  }
}

class AtlasIconExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 使用Atlas.audio_album图标
        Icon(Atlas.audio_album, size: 48.0),
        SizedBox(height: 20),
        // 使用Atlas.camera图标
        Icon(Atlas.camera, size: 48.0),
        SizedBox(height: 20),
        // 使用Atlas.email图标
        Icon(Atlas.email, size: 48.0),
      ],
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，展示了如何使用atlas_icons包中的不同图标。通过Icon小部件，我们可以轻松地将这些图标嵌入到应用中，并调整它们的大小。

更多关于Flutter图标库插件atlas_icons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

bupafengyu 1楼•4 天前

更多关于Flutter图标库插件atlas_icons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用atlas_icons图标库的代码案例。atlas_icons是一个流行的Flutter图标库，提供了大量的高质量图标供开发者使用。

步骤 1: 添加依赖

首先，你需要在pubspec.yaml文件中添加atlas_icons依赖。

dependencies:
  flutter:
    sdk: flutter
  atlas_icons: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

步骤 2: 导入库

在你的Dart文件中导入atlas_icons库。

import 'package:atlas_icons/atlas_icons.dart';

步骤 3: 使用图标

现在你可以在你的Flutter应用中使用atlas_icons提供的图标了。下面是一个简单的示例，展示如何在按钮和文本中使用这些图标。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Atlas Icons Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Atlas Icons Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(AtlasIcons.home),
              onPressed: () {
                // Handle button press
                print('Home icon pressed');
              },
            ),
            SizedBox(height: 20),
            Text(
              'Icon as Text',
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
            SizedBox(height: 10),
            Icon(
              AtlasIcons.star,
              color: Colors.amber,
              size: 48,
            ),
          ],
        ),
      ),
    );
  }
}

解释

添加依赖：在pubspec.yaml文件中添加atlas_icons依赖，并运行flutter pub get。
导入库：在需要使用图标的Dart文件中导入atlas_icons库。
使用图标：
- 使用IconButton和Icon小部件来显示图标。
- AtlasIcons.home和AtlasIcons.star是atlas_icons库中提供的图标名称。
- 你可以通过调整Icon小部件的color和size属性来自定义图标的外观。

这个示例展示了如何在Flutter应用中使用atlas_icons图标库，希望对你有帮助！

Flutter图标库插件atlas_icons的使用