Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter how can i use colorful icon

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 :

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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
  1. Do a flutter pub get and be sure the image is added.
  2. 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),
            )
          ],
        ),
      ),
    );
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading