facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎上部バーの右にボタンを設置)
(→‎横幅いっぱいのボタン)
 
(同じ利用者による、間の6版が非表示)
行1: 行1:
  
 
==body内にボタンを表示==
 
==body内にボタンを表示==
 +
テキストの下に灰色のボタン
 
  body: Center(
 
  body: Center(
 
         child: Column(
 
         child: Column(
行18: 行19:
 
  ),
 
  ),
  
−
==画面右下にボタンを表示==
+
==上部中央に青いボタン==
−
floatingActionButtonをScaffoldの項目に追加
+
<pre>
−
return Scaffold(
+
Container(
−
      appBar: AppBar(
+
          padding: const EdgeInsets.symmetric(vertical: 24.0, horizontal: 72.0)
−
        title: Text(widget.title),
+
              + MediaQuery.of(context).padding,
−
      ),
+
          child: Center(
−
      body: Center(
+
            child: Column(
−
        child: Column(
+
            mainAxisAlignment: MainAxisAlignment.center,
−
          mainAxisAlignment: MainAxisAlignment.center,
+
            children: <Widget>[
−
          children: <Widget>[
+
              CupertinoButton.filled(
−
            Text(
+
                child: const Text('ボタン'),
−
              'hello',
+
                onPressed: () {
 +
                  // 処理
 +
                },
 +
              ),
 +
            ],
 
             ),
 
             ),
−
           ],
+
           ),
 
         ),
 
         ),
−
      ),
+
</pre>
−
      floatingActionButton: FloatingActionButton(
+
−
        onPressed:() {
+
−
              // ボタン処理
+
−
            },
+
−
        tooltip: 'Increment',
+
−
        child: Icon(Icons.add),
+
−
      ),
+
−
);
+
  
−
==上部バーの右にボタンを設置==
+
==ボタンレイアウト色々==
 +
https://qiita.com/coka__01/items/30716f42e4a909334c9f
  
 +
==横幅いっぱいのボタン==
 
<pre>
 
<pre>
−
   @override
+
SizedBox(
−
   Widget build(BuildContext context) {
+
   width: double.infinity,
−
     return Scaffold(
+
   child: OutlineButton(
−
      appBar: AppBar(
+
     child: Text("ボタン1",
−
        title: Text("$widget.title"),
+
        style: TextStyle(
−
         actions: _buildAppBarActionButton()
+
          locale: Locale("ja", "JP"),
−
      ),
+
         )
−
     );
+
    ),
−
  }
+
     onPressed: () {
−
  List<Widget> _buildAppBarActionButton() {
+
       // ボタン処理
−
    return <Widget>[
+
    },
−
       MaterialButton(
+
    splashColor: Colors.purple,
−
        onPressed: () {
+
  ),
−
        },
+
),
−
        child: Text(
+
−
          "Setting",
+
−
          style: TextStyle(
+
−
              fontSize: 14.0,
+
−
              color: Colors.white
+
−
          ),
+
−
        ),
+
−
      )
+
−
    ];
+
−
  }
+
 
</pre>
 
</pre>
  
−
===iconを右上に設定したい場合===
+
==丸ボタン==
−
[[flutter/アイコン追加]] [ｼｮｰﾄｶｯﾄ]
+
 
<pre>
 
<pre>
−
  List<Widget> _buildAppBarActionButton() {
+
Container(
−
    return <Widget>[
+
                    padding: EdgeInsets.all(0.0),
−
      MaterialButton(
+
                    width: 80,
−
        onPressed: () {
+
                    height: 80,
−
        },
+
                    child: RaisedButton(
−
        child: Icon(
+
                      child: Text("1" ,style: TextStyle(fontSize: 50.0)),
−
          Icons.settings,
+
                      color: Colors.white,
−
          color: Colors.white,
+
                      shape: CircleBorder(
−
          size: 30.0,
+
                        side: BorderSide(
−
        )
+
                          color: Colors.black,
−
      )
+
                          width: 1.0,
−
    ];
+
                          style: BorderStyle.solid,
−
  }
+
                        ),
 +
                      ),
 +
                      onPressed: () {
 +
                      },
 +
                    ),
 +
                  )
 
</pre>
 
</pre>

2019年11月29日 (金) 16:56時点における最新版

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: () {
                  // 処理
                },
              ),
            ],
            ),
          ),
        ),

ボタンレイアウト色々

https://qiita.com/coka__01/items/30716f42e4a909334c9f

横幅いっぱいのボタン

SizedBox(
  width: double.infinity,
  child: OutlineButton(
    child: Text("ボタン1",
        style: TextStyle(
          locale: Locale("ja", "JP"),
        )
    ),
    onPressed: () {
      // ボタン処理
    },
    splashColor: Colors.purple,
  ),
),

丸ボタン

Container(
                    padding: EdgeInsets.all(0.0),
                    width: 80,
                    height: 80,
                    child: RaisedButton(
                      child: Text("1" ,style: TextStyle(fontSize: 50.0)),
                      color: Colors.white,
                      shape: CircleBorder(
                        side: BorderSide(
                          color: Colors.black,
                          width: 1.0,
                          style: BorderStyle.solid,
                        ),
                      ),
                      onPressed: () {
                      },
                    ),
                  )
「http://wiki.nonip.net/index.php?title=Flutter/UI/Button&oldid=9648」から取得