How to remove extra space from icons-CodePudding

Icon(ABC) has space at the top:

Do icons have spaces by default?
Is there a way to remove spaces?

Code:

import 'package:flutter/material.dart';

void main() {
  runApp(const _MyApp());
}

class _MyApp extends StatelessWidget {
  const _MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              "Demo1",
            ),
            Icon(
              Icons.abc,
              color: Colors.grey,
              size: 50,
            ),
            Text(
              "Demo2",
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

Set Row alignment to center

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              "Demo1",
            ),
            Icon(
              Icons.abc,
              color: Colors.grey,
              size: 50,
            ),
            Text(
              "Demo2",
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You added explicitly more size to icon widget and your row CrossAxisAlignment is start you can need reduce icon size & set CrossAxisAlignment: CrossAxisAlignment.center

Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: const [
      Text("Demo1"),
      Icon(
        Icons.abc,
        color: Colors.grey,
        size: 50,
        //size: 35,
      ),
      Text("Demo2"),
    ],
)