翩翩平板按钮内部空间

Question

在我的一个flutter应用程序中，有一个FlatButton，如下所示。

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()),);
  },
)

如何使按钮的文字在右边对齐？目前是居中，左右空间相等。

目前是这样显示的

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

我想让它像

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

Answer 1

这样就可以完美的工作了，看看吧。

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()),);
        },
      )),

上面这段代码给出了下面的输出。

Answer 2

你目前不能使用 Text 阶层 textAlign 属性来解决这个问题，因为一个 Text 里面 FlatButton 占用的空间最小。因此，该属性将无所作为。您需要设置一个空间被文本小组件占用。这里有一个解决方案。

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