在Flutter使用 Icon Symbols

如何在具有類型安全性枚舉的項目中使用圖示符號，首先下載Flutter格式

1. 配置

1.1. 接著在你的專案中安裝元件Lib

# must be > 0.22.0
flutter pub add flutter_svg

1.2. 建立放置資料結構

.
├── src
│   ├── components/icon-symbol
│   │   ├── svg_symbols.dart
│   │   └── icon.dart

1.2. icon.dart

請在 Acrool 中下載 Flutter 格式

1.3. svg_symbols.dart

import 'package:collection/collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/svg.dart';
import 'package:native_kit/config/svg_symbols.dart';


class IconSvg extends StatelessWidget {
  final EIconCode code;
  final double? size;
  final Color? color;

  IconSvg({
    Key? key,
    required this.code,
    this.size = 24,
    this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final iconInfo = data.firstWhereOrNull((row) => row.code == code);

    return SvgPicture.string(
      '''
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="${iconInfo?.viewBox}">
    		${iconInfo?.path}
      </svg>
      ''',
      width: size == null ? 24 : size,
      color: color,
    );
  }
}

2. 如何使用?

import 'package:native_kit/components/icon-symbol/icon-symbol.dart';

class AppBuilder extends StatelessWidget {
  final Widget? child;
  AppBuilder({Key? key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return GestureDetector(
      child: Icon(code: EIconCode.lock_alt, size: 15, color: Colors.white)
    );
  }
}