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

FLUTTER: My Icon adds an automatic margin

I’m trying to align my view so that all the widgets have the same margin that looks uniform but Icon is generating an automatic margin for me, I don’t want to use an app bar for this.

This is my view:

import 'package:flutter/material.dart';

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

  @override
  State<RegisterView> createState() => _RegisterViewState();
}

class _RegisterViewState extends State<RegisterView> {
  @override
  Widget build(BuildContext context) {

    final Size size = MediaQuery.of(context).size;
    final double marginHorizontal = size.width * 0.09;

    return Scaffold(
      body: SingleChildScrollView(
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.symmetric(horizontal: marginHorizontal),
                child: appBar
              ),
              SizedBox(height: size.height * 0.02,),
              Container(
                margin: EdgeInsets.symmetric(horizontal: marginHorizontal),
                child: description
              )
            ],
          ),
        ),
      ),
    );

  }

  Widget get appBar => Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      IconButton(
        iconSize: 40.0,
        onPressed: (){}, 
        icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white,)
      ),
      const SizedBox(
        width: 10.0,
      ),
      Text(
        'Registro',
        style: Theme.of(context).textTheme.titleLarge,
      )
    ],
  );

  Widget get description => Text(
    'Completa los siguientes datos',
    style: Theme.of(context).textTheme.bodySmall,
  );

}

I’m trying to get my Row to align completely to the left of my screen but it seems the Icon is automatically adding a margin.

enter image description here

Indeed, when removing the IconButton, the rest of the widgets align correctly

I tried this and it didn’t work

IconButton(
        padding: EdgeInsets.zero,
        alignment: Alignment.topLeft,
        iconSize: 40.0,
        onPressed: (){}, 
        icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white,)
      ),

Padding(
        padding: const EdgeInsets.all(0.0),
        child: IconButton(
          alignment: Alignment.topLeft,
          iconSize: 40.0,
          onPressed: (){}, 
          icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white,)
        ),
      ),

I’m almost sure that the problem is in the Icon Widget since when trying to implement this with a GestureDetector the problem persists.

Tags:

2

Answers


  1. 0

    To remove padding around the IconButton, try also to add constraints and padding to IconButton properties and padding again to ButtonStyle properties.

    Below an example:

    IconButton(
constraints: const BoxConstraints(),
iconSize: 20,
style: ButtonStyle(
 padding: MaterialStatePropertyAll(EdgeInsets.zero),
 ),
padding: EdgeInsets.zero,
onPressed: () {}
icon: Icon(
 Icons.filter_alt_off,
 ),
),
    Login or Signup to reply.
  2. 0

    Set visualDensity: VisualDensity.compact to remove unnecessary padding IconButton

    enter image description here

    About the Icon widget itself, it’s always visible as a square widget, that’s why it has size property instead of width & height, this is the requirement of icon design.

    But arrow_back_ios_new icon doesn’t have width = height in terms of design, that’s the problem

    The solution here is maybe you need a custom arrow icon (through icon font) to generate your real square arrow by yourself to serve your expectation. Or you need a trick like your appBar has less margin left than the others

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

Back To Top
Search