CODEWITHSUNDEEP
flutterflutter-layout
ColetonCodes
ColetonCodes

Reputation: 73

How do I add Social Media Links/Buttons To My App in Flutter?

I would like to change the buttons below the email card in the picture to social media links. However, I'm having trouble finding icons for those. I would like to be able to manipulate the icon and change the color.

Here's My App

One solution I came up with was to use an image asset inside instead of an icon, but by doing this I am unable to change the color.

Here's My Code:

Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  color: Colors.white,
                  child: IconButton(
                    onPressed: null,
                    icon: Icon(
                      Icons.ac_unit,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  color: Colors.white,
                  child: IconButton(
                    onPressed: null,
                    icon: Icon(
                      Icons.ac_unit,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  color: Colors.white,
                  child: IconButton(
                    onPressed: null,
                    icon: Icon(
                      Icons.ac_unit,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  color: Colors.white,
                  child: IconButton(
                    onPressed: null,
                    icon: Icon(
                      Icons.ac_unit,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            ],
          ),

Upvotes: 7

Views: 20500

Answers (2)

IonicFireBaseApp
IonicFireBaseApp

Reputation: 1220

use package font_awesome_flutter

https://pub.dev/packages/font_awesome_flutter

     Icon(
          FontAwesomeIcons.instagram,
          size: 100,
        ),

    Icon(
          FontAwesomeIcons.facebook,
          size: 100,
        ),

    Icon(
          FontAwesomeIcons.whatsapp,
          size: 100,
        ),

Upvotes: 4

hientp
hientp

Reputation: 834

You can use this package: https://pub.dev/packages/font_awesome_flutter

With this one, you can styles for the icon easily:

Icon(FontAwesomeIcons.facebook, color: widget.color, size: 16.0)

The name of icon can be found here: https://fontawesome.com/v5.15/icons?d=gallery&p=2

Upvotes: 14

Related Questions