Search code examples
fluttericons

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 155x118, a Twitter icon of size 126x126, and a LinkedIn icon of size 122x122. 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


Solution

  • 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
                },
              ),
            ),