0

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

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),
              )
            ],
          )),
    );
  }
}

5 Answers 5

2

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),
            )
          ],
        ),
      ),
    );
  }
}
4
  • thank you man. Its worked. Can i ask one more question ? You changed container to sizedbox. I wonder why you changed it to sizedbox . For perfomance or for another reason? Sorry im newbie in flutter thats why i asking it. Commented Mar 24, 2022 at 10:55
  • 2
    @UgurcanUcar for just adding height, you can use SizedBox instead of Container. This helps to increase performance obviously, but it is very minimal. Commented Mar 24, 2022 at 11:00
  • You are welcome. Here is a simple Twitter thread about the container widget.link Commented Mar 24, 2022 at 11:04
  • what if I want it to be optional not required? Commented Aug 5, 2022 at 12:43
1

You can create another nullabe variable for Image, it can be String for image path or Image itself, And make optional both brandIcon and image. And do null while using theses variables.

While using BrandButton you can pass any or both of theses, you can also prioritize to show only one.

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

  const BrandButton({
    Key? key,
    this.label = "Sign in with Apple",
    this.height: 48,
    this.backgroundColor: Colors.black,
    this.textColor: Colors.white,
    this.image,
    this.brandIcon,
  }) : 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: [
              if (image != null) image!,
              if (brandIcon != null) brandIcon!,
              SizedBox(width: 15),
              Text(
                label,
                style: TextStyle(
                    color: textColor,
                    fontWeight: FontWeight.w500,
                    fontSize: 17,
                    height: 1.41),
              )
            ],
          )),
    );
  }
}

0
1

There is no default google icon on flutter's icons list. So, what you can do is:

Download a svg google icon from here icons8 for google icon

After that follow this article. The article shows how to set custom icons for your flutter apps:custom icon implementation.

If the above is not what you want, you can follow this answer on stackoverflow, which shows how to add two tone colors to an icon. You have to edit the answer to your own need. But in my opinion, the above is just much easier. stack answer

0
1

According to your code, you just have to covert the type of brandIcon from Icon to Widget. And then create a custom widget and pass it to the brandIcon parameter.

Here is the example:

class BrandButton extends StatelessWidget {
  final String label;
  final double height;
  final Color backgroundColor;
  final Color textColor;
  final Widget 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),
              )
            ],
          )),
    );
  }
}

And the call this as,

  BrandButton(
    brandIcon: Image.network('some icon image url'),
    )
0
1

You can simply use Image widget for showing your image from assets or even use flutter_svg: ^1.0.3 package for showing svg files

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.