How to correctly size Flutter SVG image?

Issue

Using the flutter_svg package. This does not seem to be sizing correctly, no matter what I set the width and height to, it remains unchanged. I have posted images below for intended result 1 and the actual result 2. The icon is supposed to be 30 pixels wide.

      return Expanded(
        child: GridView.builder(
            itemCount: state.accountList.length,
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 225,
              mainAxisExtent: 328,
              childAspectRatio: 1,
              crossAxisSpacing: 45,
              mainAxisSpacing: 45,
            ),
            itemBuilder: (context, index) {
              final Account account = state.accountList.elementAt(index);
              return widgets.CardTileWithButton(
                padding: const EdgeInsets.all(30),
                content: [
                  _fadedLabel(
                    text: '${account.firstName} ${account.lastName}',
                    style: Theme.of(context).textTheme.labelLarge,
                  ),
                  _fadedLabel(
                    text: account.role ?? 'No role',
                  ),
                  const SizedBox(height: 70),
                  _fadedLabel(
                    text: account.phoneNumber ?? 'No phone number',
                  ),
                  _fadedLabel(
                    text: 'account.companyEmail' ?? 'No email',
                  ),
                  const SizedBox(height: 70),
                  Center(
                    child: IconButton(
                      onPressed: () {},
                      icon: SvgPicture.asset(
                        'icons/add_white_bg.svg',
                        width: 30,
                        height: 30,
                        fit: BoxFit.contain,
                      ),
                    ),
                  )
                ],
              );
            }),
      );

Solution

Directly pass the size of your SVG icon to the iconSize property of the IconButton widget instead of the SvgPicture widget.

This should work:

IconButton(
   iconSize: 30, // <--- this
   onPressed: () {},
   icon: SvgPicture.asset('icons/add_white_bg.svg'),
)

Answered By – OMi Shah

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)