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

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

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

画面右下にボタンを表示

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),
     ),
);