J'adore les icônes matérielles. Je le fais vraiment. Mais, d'une manière ou d'une autre, je me sentais soudain fatigué d'eux. J'ai donc jeté un coup d'œil et j'ai trouvé un merveilleux ensemble d'icônes par Icons8. Et le meilleur de tous ... gratuitement! (Voir la licence Good Boy).
Ouais, quel monde merveilleux et ainsi de suite, mais, écrivant tous ces codes désagréables dans les constantes de fléchettes? Certainement pas!
Et Fluttericon vient de sortir du bleu! Cela a fait tout le sale boulot pour moi.
J'ai commencé à utiliser cette bibliothèque dans mes projets, et ils semblaient vraiment sympas. Alors j'ai demandé à moi-même: pourquoi ne pas le publier pour que les autres puissent en profiter? Après tout, dans tout ce processus, j'ai en effet été aidé par de nombreuses personnes qui ont décidé de ne pas garder les icônes pour elles-mêmes et d'aider les autres avec un logiciel qu'ils n'avaient pas besoin de partager avec moi ou quelqu'un d'autre.
Alors, merci icônes8 et flutteur!
(Et, bien sûr, pourquoi pas: merci Microsoft Excel! XD)
Nous voici. À partir de la version 2.0.0, Lineicons sera nul, comme le suggère l'équipe DART.
Juste au cas où vous pourriez être intéressé: la sécurité nul.
2.12.0 )const icon = const LineIcon.tablet(); vs final icon = LineIcon.tablet() )values est fournie dans la classe LineICons pour accéder IconData en tant que carte. IE, Icon(LineIcons.values['code']) .byName Getter est également disponible pour accéder à l' IconData lié au nom d'icône passé en tant que paramètre. IE, Icon(LineIcons.byName('desktop')) .LineIcon (singulière) est fournie le long de LineIcons (pluriel), vous pouvez donc épargner du code à l'aide de LineIcon.tablet() au lieu de Icon(LineIcons.tablet) .LineIcon sont les mêmes que les Icon , vous pouvez donc personnaliser une instance LineIcon de la même manière. IE, Icon(LineIcons.px500, color: Colors.red) est équivalent à LineIcon.px500(color: Colors.red) (ou Icon(LineIcons.values['px500'], color: Colors.red) ). Dans quelques cas, les noms ne correspondent pas exactement à ceux des icônes8; IE, 500px est devenu px500 à la place. Les icônes doivent être facilement reconnues, de toute façon.
S'il vous plaît, soyez conscient: la version 2.0.0 et supérieure seront nuls.
La police (v1.3.0)
De la police à la classe
De la classe au package
Imaginez un croi: style Windows10 et une inspiration impressionnante. Eh bien, arrête de rêver! Vous avez beaucoup de belles icônes à choisir pour votre application Android (non testée dans iOS, désolé). Je préfère que ce matériel se déroule, et je trouve beaucoup plus facile de trouver l'icône que je recherche dans icônes8 que dans la page Icônes des matériaux.
Installation
Inclure line_icons dans votre fichier pubspec.yaml :
dependencies :
flutter :
sdk : flutter
line_icons : ^2.0.2Si votre IDE ne le fait pas automatiquement, tapez:
flutter packages get
En utilisant
Importez le package dans votre fichier Flutter et utilisez Icon pour obtenir le widget d'icône réel:
import 'package:line_icons/line_icons.dart' ;
...
Icon _icon = Icon ( LineIcons .code);
...Ou choisissez un constructeur approprié:
import 'package:line_icons/line_icon.dart' ;
...
const Icon _icon = const LineIcon . code ();
...Ou allez dans le sens laid; P:
import 'package:line_icons/line_icons.dart' ;
...
Icon _icon = Icon ( LineIcons .values[ 'code' ]);
...Ou même une manière désagréable fantaisie:
import 'package:line_icons/line_icons.dart' ;
...
Icon _icon = Icon ( LineIcons . byName ( 'code' ));
...Échantillon
import 'package:flutter/material.dart' ;
import 'package:line_icons/line_icon.dart' ;
import 'package:line_icons/line_icons.dart' ;
void main () => runApp ( MyApp ());
class MyApp extends StatelessWidget {
@override
Widget build ( BuildContext context) {
return MaterialApp (
theme : ThemeData (
primarySwatch : Colors .blue,
useMaterial3 : true ,
),
home : MyHomePage (title : 'Line Icons Demo Home Page' ),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage ({
required this .title,
});
final String title;
@override
Widget build ( BuildContext context) {
return Scaffold (
appBar : AppBar (
title : Text (title),
),
body : Center (
child : Column (
mainAxisSize : MainAxisSize .min,
children : [
Text (
'Awesome Line Icons are great!' ,
style : Theme . of (context).textTheme.headlineMedium,
),
Text (
'Version 2.0.2 constructors are const now!' ,
style : Theme . of (context).textTheme.headlineSmall,
),
SizedBox (
height : 48.0 ,
),
// Using LineIcon (no 's') for concision. It returns an Icon object
const LineIcon . tablet (
size : 48.0 ,
color : Colors .red,
),
Text (
'const LineIcon.tablet(size: 48.0, color: Colors.red,)' ,
),
SizedBox (
height : 24.0 ,
),
// Using LineIcons the standard way: injecting the IconData into the Icon object
const Icon (
LineIcons .desktop,
size : 48.0 ,
color : Colors .blue,
),
Text (
'const Icon(LineIcons.desktop, size: 48.0, color: Colors.blue,)' ,
),
SizedBox (
height : 24.0 ,
),
// Using LineIcons the nasty way: passing the IconData via the values map
Icon (
LineIcons .values[ 'mobilePhone' ],
size : 48.0 ,
color : Colors .amber,
),
Text (
'Icon(LineIcons.values[ ' mobilePhone ' ], size: 48.0, color: Colors.amber,)' ,
),
],
),
),
);
}
}Si vous êtes intéressé par le code (n'hésitez pas à le modifier de toute façon), vous pouvez le trouver ici: https://github.com/galonsos/line_icons