Flutter FlatButton inner space

Question

In one of my flutter application, have a FlatButton like following

FlatButton(
   child: Text("Forgot ist ?",
       style: TextStyle(color: Color.fromRGBO(107, 106, 106, 1),fontFamily: 'ActoBook'),
       textAlign: TextAlign.left
   ),

   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
   splashColor: Colors.transparent,  
   highlightColor: Colors.transparent,
   shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(0.0),
      side: BorderSide(color: Colors.transparent),
   ),
   onPressed: (){
       Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()),);
  },
)

How to make the text of the button to be align at right ? Currently it is centered with equal space at left and right.

Currently showing like this

+-----------------+
|   Button Text   |
+-----------------+

I am trying to make it like

+-----------------+
|      Button Text|
+-----------------+

score 1 · Answer 1 · answered May 02 '20 at 09:50

Your currently can't use the Text class textAlign property to fix this issue because a Text inside a FlatButton takes up minimum amount of space. Therefore, that property will do nothing. You need to set a space to be taken by the text widget. Here's a solution:

FlatButton(
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          splashColor: Colors.transparent,  
          highlightColor: Colors.transparent,
          shape: RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(0.0),
            side: BorderSide(color: Colors.black),
          ),
          onPressed: (){
            Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()));
          },
          child: Container(
            alignment: Alignment.centerRight,
            width: 100, // choose your width
            child: Text("Forgot ist ?",
              style: TextStyle(color: Color.fromRGBO(107, 106, 106, 1),fontFamily: 'ActoBook'),
            ),
          ),
        ),

that is not working but then I tried this, its working. Any min width attribute set by default ? child: Text(" Forgot it ?", — ramesh, May 02 '20 at 13:54
Sorry, I don't understand your comment. Did my solution work or not? I ran it in my emulator and it worked for me. — Tiago Rossi, May 02 '20 at 21:45

score 0 · Accepted Answer · answered May 03 '20 at 00:16

This would work perfectly, check it out.

FlatButton(
        padding: EdgeInsets.zero,
        color: Colors.blue,
        // wrap the text in a container and give it a specified width
        child: Container(
          width: 100,
          child: Text(
            "Forgot ist ?",
            style: TextStyle(
              color: Color.fromRGBO(107, 106, 106, 1),
              fontFamily: 'ActoBook',
            ),
            // set the alignment of the text to TextAlign.end
            textAlign: TextAlign.end,
          ),
        ),
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        shape: RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(0.0),
          side: BorderSide(color: Colors.transparent),
        ),
        onPressed: () {
        Navigator.pushReplacement(context, new MaterialPageRoute( builder: (context) => LoginPage()),);
        },
      )),

This code above gives the below output:

Flutter FlatButton inner space

2 Answers2