facebook twitter hatena line email

「Flutter/UI/Button」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(上部バーの右にボタンを設置)
行56: 行56:
 
   }
 
   }
 
   List<Widget> _buildAppBarActionButton() {
 
   List<Widget> _buildAppBarActionButton() {
     return
+
     return <Widget>[
    <Widget>[
+
 
       MaterialButton(
 
       MaterialButton(
 
         onPressed: () {
 
         onPressed: () {
行68: 行67:
 
           ),
 
           ),
 
         ),
 
         ),
 +
      )
 +
    ];
 +
  }
 +
</pre>
 +
 +
===iconを右上に設定したい場合===
 +
[[flutter/アイコン追加]] [ショートカット]
 +
<pre>
 +
  List<Widget> _buildAppBarActionButton() {
 +
    return <Widget>[
 +
      MaterialButton(
 +
        onPressed: () {
 +
        },
 +
        child: Icon(
 +
          Icons.settings,
 +
          color: Colors.white,
 +
          size: 30.0,
 +
        )
 
       )
 
       )
 
     ];
 
     ];
 
   }
 
   }
 
</pre>
 
</pre>

2019年5月14日 (火) 14:30時点における版

body内にボタンを表示

body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'hello',
           ),
           RaisedButton(
             child: Text('button1'),
             onPressed: () {
               // ボタン処理
             },
           ),
         ],
       ),
),

画面右下にボタンを表示

floatingActionButtonをScaffoldの項目に追加

return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'hello',
           ),
         ],
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed:() {
              // ボタン処理
            },
       tooltip: 'Increment',
       child: Icon(Icons.add),
     ),
);

上部バーの右にボタンを設置

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("$widget.title"),
        actions: _buildAppBarActionButton()
      ),
    );
  }
  List<Widget> _buildAppBarActionButton() {
    return <Widget>[
      MaterialButton(
        onPressed: () {
        },
        child: Text(
          "Setting",
          style: TextStyle(
              fontSize: 14.0,
              color: Colors.white
          ),
        ),
      )
    ];
  }

iconを右上に設定したい場合

flutter/アイコン追加 [ショートカット]

  List<Widget> _buildAppBarActionButton() {
    return <Widget>[
      MaterialButton(
        onPressed: () {
        },
        child: Icon(
          Icons.settings,
          color: Colors.white,
          size: 30.0,
        )
      )
    ];
  }