Search code examples
flutterdartflutter-layoutflatbutton

Flutter FlatButton inner space


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|
+-----------------+

Solution

  • 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: This is the output