facebook twitter hatena line email

Flutter/UI/Button

提供: 初心者エンジニアの簡易メモ
移動: 案内検索

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