Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why are Icon-Buttons not centered?

I'm working on a Flutter application and I can't figure out why my icon-buttons are not centered in the middle of the page. I wrapped my code in a Center()

This is my page :

https://imgur.com/a/YlCW3Xu

This is my code:

import "package:flutter/material.dart";
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class LogInScreen extends StatefulWidget {
  @override
  _LogInScreenState createState() => new _LogInScreenState();
}

class _LogInScreenState extends State<LogInScreen> {
  String _email, _password;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Center(
          child: ListView(
        children: <Widget>[
          Column(children: <Widget>[
            new Container(
              padding: (EdgeInsets.only(top: 50)),
              child: Text(
                "Sign In",
                style: TextStyle(
                  fontSize: 40,
                ),
              ),
            ),
            new Container(
                padding: (EdgeInsets.only(top: 50, left: 35, right: 35)),
                child: Column(children: <Widget>[
                  new Form(
                      child: new Column(children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(top: 20),
                      child: new RaisedButton(
                        onPressed: () {},
                        color: Colors.blue,
                        textColor: Colors.white,
                        child: const Text('Login'),
                      ),
                    ),
                  ])),
                ])),
            new Container(
              padding: EdgeInsets.only(top: 40),
              child: Column(
                children: <Widget>[
                  new Text("Or login with"),
                ],
              ),
            ),
          ]),
          new Center(
              child: new Row(
            children: <Widget>[
              new IconButton(
                icon: Icon(FontAwesomeIcons.facebookF),
                color: Colors.blue,
              ),
              new IconButton(
                icon: Icon(FontAwesomeIcons.google),
                color: Colors.blue,
              ),
            ],
          )),
        ],
      )),
    );
  }
}


I removed the texts field so the code would fit. I hope you can help me, Thank you for your help !

like image 579
Michel Melhem Avatar asked Mar 29 '19 17:03

Michel Melhem


2 Answers

Set the padding for IconButton to 0, like so:

IconButton(
  padding: EdgeInsets.zero,
  ...
)
like image 51
Neeraj Jerauld Avatar answered Oct 21 '22 14:10

Neeraj Jerauld


None of the listed solution will work. The Only solution for me is to put IconButton inside SizedBox.

SizedBox(
    width: double.infinity,
    child: IconButton(
    icon: FaIcon(FontAwesomeIcons.moneyBillWave),
    iconSize: 80,    
    onPressed: () {},
   ),
  ),
like image 40
LordZyx Avatar answered Oct 21 '22 13:10

LordZyx