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

How to create icons of various sizes with uniform dimensions in Flutter

I have various icons stored in my assets folder, including a Gmail icon of size 155×118, a Twitter icon of size 126×126, and a LinkedIn icon of size 122×122. I aim to display these distinct icons in a single row, and I’ve created the following code to achieve this.

Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: const Icon(
                Icons.facebook,
                // size: 36, // Specify the size you want for built-in icons
              ),
              onPressed: () {
                // Handle Facebook login or navigation
              },
            ),
            IconButton(
              icon: Image.asset(
                'assets/twitter.png', // Path to your custom icon
                width: 36, // Adjust the width as needed
                height: 36, // Adjust the height as needed
              ),
              onPressed: () {
                // Handle the custom icon button click
              },
            ),
            IconButton(
              icon: Image.asset(
                'assets/linkedin.png', // Path to your custom icon
                width: 36, // Adjust the width as needed
                height: 36, // Adjust the height as needed
              ),
              onPressed: () {
                // Handle the custom icon button click
              },
            ),
            IconButton(
              icon: Image.asset(
                'assets/whatsapp.png', // Path to your custom icon
                width: 36, // Adjust the width as needed
                height: 36, // Adjust the height as needed
              ),
              onPressed: () {
                // Handle the custom icon button click
              },
            ),
            IconButton(
              icon: Image.asset(
                'assets/gmail.png', // Path to your custom icon
                width: 36, // Adjust the width as needed
                height: 36, // Adjust the height as needed
              ),
              onPressed: () {
                // Handle Gmail login or navigation
              },
            ),
          ],
        )

This code displays image icons of varying sizes, with LinkedIn and WhatsApp icons appearing smaller than desired. I’m seeking assistance to resolve this issue. Is there any one who can help me.

This is the link of the image

https://www.flickr.com/photos/199450673@N06

Tags:

2

Answers


  1. 0

    You can use IconButton from IconButton.

    IconButton(
  iconSize: 36,//your value

    And for Image, try to use fit:BoxFit.cover

    Image.asset(
  "",
  fit: BoxFit.cover,
)
    Login or Signup to reply.
  2. 0

    You should wrap the IconButton with SizedBox and give the iconButton and provide them necessary size and also fit should be cover type,it should work.

            SizedBox(
          width: 36,
          height: 36,
          child: IconButton(
            icon: Image.asset(
              fit: BoxFit.cover,
              'assets/linkedin.png',
              width: 36, // Adjust the width as needed
              height: 36, // Adjust the height as needed
            ),
            onPressed: () {
              // Handle the custom icon button click
            },
          ),
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search