ElevatedButtonを使ってみる

FlutterのUIのお勉強をしたので備忘録を残しておく。

今日のテーマは、
https://api.flutter.dev/flutter/material/ElevatedButton-class.html
ElevatedButtonをいい感じで使ってみたい。

https://api.flutter.dev/flutter/material/RaisedButton-class.html
もともとはRaisedButtonだけど、今はRaisedButtonはobsolete（廃止）になっていて、Flutter1.22.0以降はElevatedButtonを使ってくださいとのことです。

RaisedButtonの説明にもあるように、
FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively.
ということなので、

FlatButton → Textbutton
Raisedbutton → ElevatedButton
OutlineButton → OutlinedButton
となったようです。

paddingだったりfontsizeも変えることができて、オリジナルのボタンを作ることができそうですね。

 ElevatedButton(
   onPressed: () {},
   child: Text('いいね'),
   style: ElevatedButton.styleFrom(
     primary: Color(0xFF005731),
     onPrimary: Colors.white,
     padding: EdgeInsets.symmetric(
         horizontal: 100,
         vertical: 5,
      ),
     textStyle: TextStyle(
         fontSize: 15.0,
         fontWeight: FontWeight.bold,
      ),
     shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(10),
   ),
 ),
),

できたボタンはこんな感じです。

〈参考〉
https://www.kindacode.com/article/working-with-elevatedbutton-in-flutter/