Taha Tesser
788614d171
Fix "Delete" tooltip is shown disabled on chips with onDeleted callback ( #141770 )
...
fixes [Disabled chips with `onDeleted` callback shows "Delete" tooltip on hover](https://github.com/flutter/flutter/issues/141336 )
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Example(),
);
}
}
class Example extends StatefulWidget {
const Example({super.key});
@override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
bool _isEnable = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RawChip(
label: const Text('RawChip'),
onPressed: () {},
isEnabled: _isEnable,
onDeleted: () {},
),
FilterChip(
label: const Text('FilterChip'),
selected: false,
onSelected: _isEnable ? (bool value) {} : null,
onDeleted: () {},
),
InputChip(
label: const Text('InputChip'),
isEnabled: _isEnable,
onDeleted: () {},
),
],
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
setState(() {
_isEnable = !_isEnable;
});
},
label: Text(_isEnable ? 'Disable' : 'Enable'),
),
);
}
}
```
</details>
### Preview
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/f80ae5f7-0a6d-4041-ade3-cbc2b5c78188 " height="450" /> | <img src="https://github.com/flutter/flutter/assets/48603081/04e62854-e3f1-4b65-9753-183d288f3cfe " height="450" /> |
2024-01-19 22:19:16 +00:00
Taha Tesser
4648f54430
Fix chips onDeleted callback don't show the delete button when disabled ( #137685 )
...
fixes [Chips with `onDeleted` callback should show the delete button in the `disabled` state](https://github.com/flutter/flutter/issues/136638 )
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Example(),
);
}
}
class Example extends StatefulWidget {
const Example({super.key});
@override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RawChip(
avatar: const Icon(Icons.favorite_rounded),
label: const Text('RawChip'),
onSelected: null,
isEnabled: false,
onDeleted: () {},
),
InputChip(
avatar: const Icon(Icons.favorite_rounded),
label: const Text('InputChip'),
isEnabled: false,
onPressed: null,
onDeleted: () {},
),
FilterChip(
avatar: const Icon(Icons.favorite_rounded),
label: const Text('FilterChip'),
onSelected: null,
onDeleted: () {},
),
],
),
),
);
}
}
```
</details>
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/8bd458de-cfd2-44f0-a0dd-a8298938c61f " /> | <img src="https://github.com/flutter/flutter/assets/48603081/afca0684-b061-416b-b029-5316588c6888 " /> |
2023-11-29 23:57:05 +00:00
Taha Tesser
f65dd3bac0
Fix chip widgets don't the apply provided iconTheme ( #135751 )
...
fixes [`Chip.iconTheme` does not apply the icon theme](https://github.com/flutter/flutter/issues/111828 )
### Description
- Fix chip widgets that don't utilize the provided `iconTheme`.
- Prevent `iconTheme` with just color from overriding the default icon size.
- Add some missing M3 tests for the chip and chip theme properties.
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
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(
debugShowCheckedModeBanner: false,
theme: ThemeData(useMaterial3: true),
home: const Example(),
);
}
}
class Example extends StatefulWidget {
const Example({super.key});
@override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
final bool _isEnable = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RawChip(
iconTheme: const IconThemeData(color: Colors.amber),
avatar: const Icon(Icons.favorite_rounded),
label: const Text('RawChip'),
onPressed: () {},
isEnabled: _isEnable,
),
const Chip(
iconTheme: IconThemeData(color: Colors.amber),
avatar: Icon(Icons.favorite_rounded),
label: Text('Chip'),
// onDeleted: () {},
),
FilterChip(
iconTheme: const IconThemeData(color: Colors.amber),
avatar: const Icon(Icons.favorite_rounded),
label: const Text('FilterChip'),
selected: false,
onSelected: _isEnable ? (bool value) {} : null,
),
InputChip(
iconTheme: const IconThemeData(color: Colors.amber),
avatar: const Icon(Icons.favorite_rounded),
label: const Text('InputChip'),
isEnabled: _isEnable,
onPressed: () {},
),
ActionChip(
iconTheme: const IconThemeData(color: Colors.amber),
avatar: const Icon(Icons.favorite_rounded),
label: const Text('ActionChip'),
onPressed: _isEnable ? () {} : null,
),
ChoiceChip(
iconTheme: const IconThemeData(color: Colors.amber),
avatar: const Icon(Icons.favorite_rounded),
label: const Text('ChoiceChip'),
selected: false,
onSelected: _isEnable ? (bool value) {} : null,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
}
}
```
</details>
### Before
### After
2023-10-12 14:17:56 +00:00
Taha Tesser
467c970bfb
Introduce MaterialState color property for chips ( #128584 )
...
fixes https://github.com/flutter/flutter/issues/115827
fixes https://github.com/flutter/flutter/issues/101325
### Description
1. This PR adds a new MaterialState `color` property to all the chips (this makes it possible to customize chips in all states from the M3 specs).
2. Updated defaults to use the new MaterialState `color` property.
3. Updated and added new tests to all the chip test classes.
<details>
<summary>code sample</summary>
```dart
import 'package:flutter/material.dart';
const Color disabledColor = Colors.black26;
const Color backgroundColor = Colors.cyan;
final Color disabledSelectedColor = Colors.red.shade100;
const Color selectedColor = Colors.amber;
final MaterialStateProperty<Color> color =
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled) &&
states.contains(MaterialState.selected)) {
return disabledSelectedColor;
}
if (states.contains(MaterialState.disabled)) {
return disabledColor;
}
if (states.contains(MaterialState.selected)) {
return selectedColor;
}
return backgroundColor;
});
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
// chipTheme: ChipThemeData(color: color),
),
home: const Example(),
);
}
}
class Example extends StatefulWidget {
const Example({super.key});
@override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
bool enabled = false;
bool selected = true;
@override
Widget build(BuildContext context) {
const Widget verticalSpace = SizedBox(height: 20);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
const SizedBox(height: 25),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
const Card(
elevation: 0.0,
color: disabledColor,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('disabledColor'),
),
),
const Card(
elevation: 0.0,
color: backgroundColor,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('backgroundColor'),
),
),
Card(
elevation: 0.0,
color: disabledSelectedColor,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text('disabledSelectedColor'),
),
),
const Card(
elevation: 0.0,
color: selectedColor,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('selectedColor'),
),
),
],
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RawChip(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('RawChip'),
isEnabled: enabled,
onSelected: enabled ? (bool value) {} : null,
),
verticalSpace,
InputChip(
isEnabled: enabled,
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('InputChip'),
onSelected: enabled ? (bool value) {} : null,
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FilterChip(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('FilterChip'),
onSelected: enabled ? (bool value) {} : null,
),
verticalSpace,
FilterChip.elevated(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('FilterChip.elevated'),
onSelected: enabled ? (bool value) {} : null,
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ChoiceChip(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('ChoiceChip'),
onSelected: enabled ? (bool value) {} : null,
),
verticalSpace,
ChoiceChip.elevated(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('ChoiceChip.elevated'),
onSelected: enabled ? (bool value) {} : null,
),
],
),
],
),
const Spacer(),
Row(
children: <Widget>[
Flexible(
child: SwitchListTile(
title: const Text('Enabled'),
value: enabled,
onChanged: (bool value) {
setState(() => enabled = value);
},
),
),
Flexible(
child: SwitchListTile(
title: const Text('Selected'),
value: selected,
onChanged: (bool value) {
setState(() => selected = value);
},
),
),
],
)
],
),
),
);
}
}
```
</details>
### Before (not possible to customize disabled and selected chips)
### After (using disabled and selected chips using the new MaterialState `color` property)
2023-06-19 22:03:26 +00:00
