Flutter how can i use colorful icon

Issue

I have a BrandButton Widget. Its simply holding login buttons with brands. It has icon , label and some colors. In apple i can use Icon(Icons.apple) coz it will have white simple icon and facebook is same too. But in google i want to use colorful one. So how can i make it ? How can i make custom icon ? My custom widget doesnt accept images or what. How can i fix it ? Thank you for all helps!

How i want :

My Widget :

class BrandButton extends StatelessWidget {
  final String label;
  final double height;
  final Color backgroundColor;
  final Color textColor;
  final Icon brandIcon;

  const BrandButton(
      {Key? key,
      this.label = "Sign in with Apple",
      this.height: 48,
      this.backgroundColor: Colors.black,
      required this.brandIcon,
      this.textColor: Colors.white})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: height,
      child: ElevatedButton(
          onPressed: () {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
            backgroundColor: MaterialStateProperty.all<Color>(backgroundColor),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              brandIcon,
              SizedBox(width: 15),
              Text(
                label,
                style: TextStyle(
                    color: textColor,
                    fontWeight: FontWeight.w500,
                    fontSize: 17,
                    height: 1.41),
              )
            ],
          )),
    );
  }
}

Solution

Well the main problem is, the other two above are icons and what you want is an image, so here is what you need to do.

1. Download the assets that is required for Google Sign In. You can use this branding guidelines for it

2. You need to add the assets to your project. E.g. You can have an images folder in your root project and add inside the images folder.

3. Go to your pubspec.yaml file and add the image to your project under the assets:

assets:
   - images/google_logo.png

4. Do a flutter pub get and be sure the image is added.
5. Update your BrandButton widget as follows:

Main differences are;

• Your brandLogo is a widget now so you can pass an image
• I changed the text to be a required one instead of something default value.
• Did some minor code improvements.

class BrandButton extends StatelessWidget {
  final String label;
  final double height;
  final Color backgroundColor;
  final Color textColor;
  final Widget brandIcon;

  const BrandButton({
    required this.brandIcon,
    required this.label,
    this.height = 48,
    this.backgroundColor = Colors.black,
    this.textColor = Colors.white,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height,
      child: ElevatedButton(
        onPressed: () {},
        style: ButtonStyle(
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
          backgroundColor: MaterialStateProperty.all<Color>(backgroundColor),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            brandIcon,
            const SizedBox(width: 15),
            Text(
              label,
              style: TextStyle(
                  color: textColor,
                  fontWeight: FontWeight.w500,
                  fontSize: 17,
                  height: 1.41),
            )
          ],
        ),
      ),
    );
  }
}

Answered By – salihgueler

Answer Checked By – Terry (FlutterFixes Volunteer)