Flutterの3.3以降、ElevatedButtonのカスタムオプションで属性が変更されました。
ElevatedButton(
style: ElevatedButton.styleFrom(
// 以前は primary属性
backgroundColor: Colors.red,
// 以前は onPrimary属性
foregroundColor: Colors.white,
),
onPressed: () { },
child: Text('ElevatedButton with custom foreground/background'),
)
FlatButton RaisedButton OutlineButtonウィジェットは廃止され、新しくTextButton ElevatedButton OutlinedButton になりましたので、使えそうなボタンをコピペできるようにまとめました。
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueAccent,
foregroundColor: Colors.white,
),
onPressed: () {},
)
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueAccent,
foregroundColor: Colors.white,
shape: const StadiumBorder(),
),
onPressed: () {},
)
OutlinedButton(
child: const Text('Button'),
style: OutlinedButton.styleFrom(
foregroundColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
side: const BorderSide(color: Colors.blueAccent),
),
onPressed: () {},
)
OutlinedButton(
child: const Text('Button'),
style: OutlinedButton.styleFrom(
foregroundColor: Colors.black,
shape: const StadiumBorder(),
side: const BorderSide(color: Colors.blueAccent),
),
onPressed: () {},
)
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey[200],
foregroundColor: Colors.blueAccent,
),
onPressed: () {},
)
ElevatedButton.icon(
icon: const Icon(
Icons.star_outline,
color: Colors.blueAccent,
),
label: const Text('Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey[200],
foregroundColor: Colors.blueAccent,
),
onPressed: () {},
)
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
onPressed: () {},
)
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
onPressed: () {},
)
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(topRight: Radius.circular(24)),
),
),
onPressed: () {},
child: Text('Button'),
)
ElevatedButton(
onPressed: () {},
child: Text("Button"),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
)),
)
ElevatedButton(
onPressed: () {},
child: Text("Button"),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.elliptical(10, 40)
// bottomLeft:, bottom left
// bottomRight: bottom right
))),
)
ElevatedButton(
child: const Text('Btn'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
shape: const CircleBorder(
side: BorderSide(
color: Colors.blue,
width: 1,
style: BorderStyle.solid,
),
),
),
onPressed: () {},
)
TextButton(
child: const Text('Button'),
style: TextButton.styleFrom(
foregroundColor: Colors.black,
),
onPressed: () {},
)
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(
Colors.lightBlueAccent),
overlayColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.hovered))
return Colors.blue.withOpacity(0.04);
if (states.contains(MaterialState.focused) ||
states.contains(MaterialState.pressed))
return Colors.blue.withOpacity(0.12);
return null; // Defer to the widget's default.
},
),
),
onPressed: () {},
child: Text('Button'),
)
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(
Colors.lightBlueAccent),
),
onPressed: () {},
child: Text(
'Button',
style: TextStyle(
fontSize: 20, decoration: TextDecoration.underline),
),
)
OutlinedButton(
style: OutlinedButton.styleFrom(
shape: StadiumBorder(),
side: BorderSide(width: 2, color: Colors.lightBlueAccent),
),
onPressed: () {},
child: Text(
'Button',
style: TextStyle(
fontSize: 16, decoration: TextDecoration.underline),
),
)
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.lightBlueAccent,
foregroundColor: Colors.white,
elevation: 16,
),
onPressed: () {},
)
ElevatedButton(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Colors.lightBlueAccent,
Colors.blue,
Colors.blueAccent,
],
),
),
padding: const EdgeInsets.all(10),
child: const Text('Button'),
),
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0),
),
onPressed: () {},
)