facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(上部バーの右にボタンを設置)
(画面右下にボタンを表示)
行39: 行39:
 
         ),
 
         ),
 
</pre>
 
</pre>
 
==画面右下にボタンを表示==
 
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),
 
      ),
 
);
 

2019年11月16日 (土) 17:24時点における版

body内にボタンを表示

テキストの下に灰色のボタン

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

上部中央に青いボタン

Container(
          padding: const EdgeInsets.symmetric(vertical: 24.0, horizontal: 72.0)
              + MediaQuery.of(context).padding,
          child: Center(
            child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CupertinoButton.filled(
                child: const Text('ボタン'),
                onPressed: () {
                  // 処理
                },
              ),
            ],
            ),
          ),
        ),