skip to Main Content

Icon(ABC) has space at the top:
enter image description here

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",
            ),
          ],
        ),
      ),
    );
  }
}

2

Answers


    • 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",
                ),
              ],
            ),
          ),
        );
      }
    }
    
    
    Login or Signup to reply.
  1. 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"),
        ],
    )
    

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search