Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – keep google logo image inside elevated button

I am trying to add google logo inside my Elevated button. I tried searching but can’t found anything useful. I found only adding icons via ElevatedButton.icon. How can I show google or facebook or any other logos inside my elevated button.
Thank You!

Tags:

3

Answers


  1. 0

    you can use this package to get the all brand as icon
    for Example you can use this in icon:

       Brand(Brands.facebook),
   Brand(Brands.google),
   Brand(Brands.android_studio),

    all this return the logo as icon

    Login or Signup to reply.
  2. 0

    You can definitely add custom logos like Google or Facebook inside an ElevatedButton in Flutter. You can use the Image.asset widget to include your custom logo. Example::

    flutter:
  assets:
    - assets/google_logo.png
    - assets/facebook_logo.png

    You can use the Image.asset widget inside the ElevatedButton to display the logo. like this:

    ElevatedButton(
  onPressed: () {
    // Your onPressed logic here
  },
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Image.asset(
        'assets/google_logo.png',
        height: 24, // Adjust the height as needed
      ),
      SizedBox(width: 8), // Add some space between the logo and the text
      Text('Sign in with Google'),
    ],
  ),
);

    This example shows how to add a Google logo to an ElevatedButton. You can replace 'assets/google_logo.png' with the path to your Facebook logo or any other logo you want to use.
    I hope this may help you to solve it.

    Login or Signup to reply.
  3. 0

    this is the result for using

         Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(onPressed: () {}, icon: Brand(Brands.google)),
          IconButton(onPressed: () {}, icon: Brand(Brands.facebook)),
          IconButton(onPressed: () {}, icon: Brand(Brands.stack_overflow)),
        ],
      ),
     const SizedBox(height: 20),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton.icon(
            onPressed: () {},
            label: Brand(Brands.google),
          ),
          ElevatedButton.icon(
            onPressed: () {},
            label: Brand(Brands.facebook),
          ),
          ElevatedButton.icon(
            onPressed: () {},
            label: Brand(Brands.stack_overflow),
          ),
        ],
      ),

    this is how to use it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search