web-dev-qa-db-ja.com

全角ボタン、テキストの配置方法

テキストを全幅ボタン、つまりwidth: double.infinityを持つボタンに揃えることができるかどうかを把握しよう

例えばこれ：

ButtonTheme(
  minWidth: double.infinity,
  child: FlatButton(
    onPressed: () {},
    child: Text('Sign Out', textAlign: TextAlign.left),
  ),
)

中央揃えのテキストボタンを生成し、配置を変更することはできません。

いくつか試してみましたが、カスタムボタンを作成しない限り、理解できません。

ユーザーが行のどこでもクリックできるようにtext：leftの全幅ボタンを取得しようとしていますが、それでも素材のタップ効果を取得できます。

enter image description here

dartflutterflutter-layout
7
AntonB

RawMaterialButtonのbuild-Methodの子は 常に中央揃え であることがわかりました。

child: Center(
  widthFactor: 1.0,
  heightFactor: 1.0,
  child: widget.child,
),

テキストを開始/左に揃えるようにするには、テキストを無限大にして、親ウィジェットであるCenterウィジェットと同じ幅にします。

child: FlatButton(
  child: SizedBox(
    width: double.infinity,
    child: Text(
      'Sign out',
      textAlign: TextAlign.left,
    ),
  ),
  onPressed: () {},
);
17
Sebastian Engel

簡単な回避策は、ボタンのテキストの整列をAlignment.centerLeftに設定することです-

  MaterialButton(
  onPressed: () {},
    textColor: Colors.white,
    color: Colors.grey,
    child: Align(
       alignment: Alignment.centerLeft,
        child: Text(
           'SUBMIT',
            style: TextStyle(
            fontSize: 18, fontWeight: FontWeight.normal),
              ),
        ),
 ),

出力：

enter image description here

1
Jack

もう1つの単純なハックは、1つの要素のみを持つRow内にボタンを配置し、mainAxisAlignmentをstartに設定することです。

Row(
 mainAxisAlignment: MainAxisAlignment.start,
 children: <Widget>[
  FlatButton(
   onPressed: () {},
   child: Text('Sign Out')
  ),  // end of FlatButton
 ], // end of widgets
), // end of Row
0
Roopak A Nelliat