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

Is there always some space around Flutter icons that cannot be removed (not IconButtons)?

I am using an Icon widget inline with Text widgets in a Row. The Text widgets are next to each other with no spacing, but I cannot figure out how to force the same behavior for the Icon widget.

Note: I am not using an IconButton. It’s just an Icon widget.

I know this seems small, but I am trying to get things aligned. Even if I just try to align the top of the Text widgets and the Icon widget, the Icon widget is slightly lower due to this seemingly impossible-to-remove spacing.

Am I missing something?

DartPad example: https://dartpad.dev/?id=d47d23676be94db82f3d49430a1a4ac5

Notice that in the example, the Text widgets and the SizedBox widgets are right up against each other, but the Icon(Icons.Square) widgets have a gap.

I tried wrapping the Icon widget in a Padding widget

Padding(padding: EdgeInsets.zero, child: Icon(Icons.square))

but that didn’t work any better.

Tags:

3

Answers


  1. 0

    It looks like you’re dealing with alignment issues between Text widgets and an Icon widget within a Row. The Icon widget might have some inherent padding that’s causing the misalignment. One way to address this is by adjusting the visualDensity property of the Icon widget.

    In your Icon widget, you can set visualDensity to VisualDensity.compact to reduce the padding around the icon:

    Icon(Icons.square, visualDensity: VisualDensity.compact)

    This should help align the Icon widget with the adjacent Text widgets more closely. Try updating your code with this modification and see if it resolves the alignment issue in your layout.

    Login or Signup to reply.
  2. 0

    In Flutter, the Icon widget itself doesn’t inherently add any extra spacing around the icon. The spacing issue you’re experiencing might be related to the font metrics of the text and icon.

    One way to address this is to use the baseline property in a Row to align the baseline of the widgets. Here’s an updated version of your DartPad example:

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.baseline,
            textBaseline: TextBaseline.alphabetic,
            children: [
              Text('Some', style: TextStyle(fontSize: 20)),
              SizedBox(width: 10),
              Icon(Icons.square, size: 20),
              SizedBox(width: 10),
              Text('Text', style: TextStyle(fontSize: 20)),
            ],
          ),
        ),
      ),
    );
  }
}

    You can adjust the fontSize and size properties to fit your design requirements.

    Login or Signup to reply.
  3. 0

    Try using the built-in widget inspector, you will notice that there is no gap between the Text widget and the Icon widget. The gap is due to the design of the icon, not the Icon widget.

    If you change the icon to Icons.more_vert, there will be a lot more space between the text and the icon. However, this has nothing to do with the space between the Text widget and the Icon widget. It simply because of the design of the icon.

    widget inspector

    widget inspector

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

Back To Top
Search