Created
January 12, 2023 12:10
-
-
Save esouthren/fbe8db2ca18aedb667964643c29a667e to your computer and use it in GitHub Desktop.
M3 Checkbox error sides
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(const MyApp()); | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
theme: ThemeData.light(useMaterial3: true), | |
home: const Scaffold( | |
body: Center( | |
child: MyStatefulWidget(), | |
), | |
), | |
); | |
} | |
} | |
class MyStatefulWidget extends StatefulWidget { | |
const MyStatefulWidget({super.key}); | |
@override | |
State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); | |
} | |
class _MyStatefulWidgetState extends State<MyStatefulWidget> { | |
bool isChecked = false; | |
@override | |
Widget build(BuildContext context) { | |
final side = MaterialStateBorderSide.resolveWith((states) { | |
// EXPECTATION: border side will be red in all error states. | |
if (states.contains(MaterialState.error)) { | |
return const BorderSide(color: Colors.red, width: 4); | |
} | |
// REALITY: border side override only takes effect for non-error state (like hovered, below). | |
if (states.contains(MaterialState.hovered)) { | |
return const BorderSide(color: Colors.red, width: 4); | |
} | |
return const BorderSide(color: Colors.green); | |
}); | |
// Error states works correctly for fill color. | |
final fillColor = MaterialStateProperty.resolveWith<Color?>((states) { | |
if (states.contains(MaterialState.error)) { | |
return Colors.green; | |
} | |
}); | |
return Checkbox( | |
checkColor: Colors.white, | |
isError: true, | |
fillColor: fillColor, | |
side: side, | |
value: isChecked, | |
onChanged: (bool? value) { | |
setState(() { | |
isChecked = value!; | |
}); | |
}, | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment