CODEWITHSUNDEEP
androidflutterdartfont-awesome
Hosea varghese
Hosea varghese

Reputation: 331

How to interpolate a variable in IconData in Flutter?

I want to show the icon of a social media.

String socialMedia = 'facebook';

Then in my build function I want to use this variable in my Icon widget

Icon(FontAwesomeIcons.socialMedia)

How can I interpolate this variable? Is it possible? It would become easy for me if I could use the variable like this. Because now I can use the variable to change the icon accordingly.

Upvotes: 1

Views: 1313

Answers (2)

Halyna Rubashko
Halyna Rubashko

Reputation: 605

The library suggested in the accepted answer is no longer supported and is Dart3 incompatible.

The latest font_awsome_flutter documentation includes the solution and explains the limitations

...Probably the most requested feature after support for pro icons is the ability to retrieve an icon by their name. This was previously not possible, because a mapping from name to icon would break all discussed optimizations. Please bear in mind that this is still the case. As all icons could theoretically be requested, none can be removed by flutter. It is strongly advised to only use this option in conjunction with a limited set of styles and with as few of them as possible...

Upvotes: 0

chunhunghan
chunhunghan

Reputation: 54397

You can copy paste run full code below
You can use package https://pub.dev/packages/icons_helper
You can use getIconUsingPrefix and for FontAwesome Icon you can prefix string with fa.

code snippet

Icon(getIconUsingPrefix(name: 'fa.fiveHundredPx'),
                color: Theme.of(context).backgroundColor, size: 128.0),
Icon(getIconUsingPrefix(name: 'fa.facebook'),
    color: Theme.of(context).backgroundColor, size: 128.0),
Icon(getIconUsingPrefix(name: 'add'),
    color: Theme.of(context).backgroundColor, size: 128.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 {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(       
        primarySwatch: Colors.blue,       
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter 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;

  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: 128.0),
            Icon(getIconUsingPrefix(name: 'fa.facebook'),
                color: Theme.of(context).backgroundColor, size: 128.0),
            Icon(getIconUsingPrefix(name: 'add'),
                color: Theme.of(context).backgroundColor, size: 128.0),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Upvotes: 2

Related Questions