简体   繁体   中英

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

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'),
            ),
          ),
        ),

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: 这是输出

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM