CODEWITHSUNDEEP
flutter
lechnerio
lechnerio

Reputation: 981

Using FontAwesomeIcons with value from custom class in Flutter

I'm trying to use fontawesome together with flutter. Depending on certain content of an Item I'd like to display a certain Icon from fontawesome. 

Transaction(id: 1, title: 'lunch', amount: -23.10, type:'utensils'),
Transaction(id: 2, title: 'new shows', amount: -59.99, type:'tshirt'),
Transaction(id: 3, title: 'Falcon launch', amount: -62000000, type:'rocket')

so, I'd like to use the type as an indicator for my fontawesome icon.

When using FontAwesomeIcons.rocket, everything works quite well. 

Column(children: <Widget>[
  Card(
    child: IconButton(
      onPressed: null, 
      icon: new Icon(FontAwesomeIcons.rocket),
    ),
    elevation: 0,
  )
],),

since I'm using the map function I'm able to call the type itself without an issue like Text(tx.type). Is there a way to replace the static (in my case) rocket with the type from my transaction class? I'm trying to avoid if/switch cases at the moment just to get the basics going.

Any help very appreciated.

Upvotes: 0

Views: 1216

Answers (1)

chunhunghan
chunhunghan

Reputation: 54397

You can copy paste run full code below
You can use https://pub.dev/packages/icons_helper
just prefix rocket with fa.rocket

code snippet 

Icon(getIconUsingPrefix(name: 'fa.rocket'),
            color: Theme.of(context).backgroundColor, size: 60.0),

working demo

enter image description here

full code

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo + Icon Helper Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Map iconMap = {"a":'fa.rocket'};
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(getIconUsingPrefix(name: 'fa.fiveHundredPx'),
                color: Theme.of(context).backgroundColor, size: 60.0),
            Icon(getIconUsingPrefix(name: 'fa.rocket'),
                color: Theme.of(context).backgroundColor, size: 60.0),
            Icon(getIconUsingPrefix(name: iconMap["a"]),
                color: Theme.of(context).backgroundColor, size: 60.0),
            Text(
              'There should be an icon above. It\'s neat, isn\'t?\n\nYou can also push the + button and increment this counter for fun:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Upvotes: 2

Related Questions