Widget _chipShowcase(){
return RepaintBoundary(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 8,
runSpacing: 8,
children: <Widget>[
Chip(
label: const Text('Chip'),
onDeleted: () {},
),
const Chip(
label: Text('Chip'),
avatar: FlutterLogo(),
),
ActionChip(
label: const Text('ActionChip'),
avatar: const Icon(Icons.settings),
onPressed: () {},
),
const ActionChip(
label: Text('ActionChip'),
avatar: Icon(Icons.settings),
onPressed: null,
),
FilterChip(
label: const Text('FilterChip'),
selected: true,
onSelected: (bool value) {},
),
const FilterChip(
label: Text('FilterChip'),
selected: true,
onSelected: null,
),
FilterChip(
label: const Text('FilterChip'),
selected: false,
onSelected: (bool value) {},
),
const FilterChip(
label: Text('FilterChip'),
selected: false,
onSelected: null,
),
ChoiceChip(
label: const Text('ChoiceChip'),
selected: true,
onSelected: (bool value) {},
),
const ChoiceChip(
label: Text('ChoiceChip'),
selected: true,
),
ChoiceChip(
label: const Text('ChoiceChip'),
selected: false,
onSelected: (bool value) {},
),
const ChoiceChip(
label: Text('ChoiceChip'),
selected: false,
onSelected: null,
),
InputChip(
selected: true,
label: const Text('InputChip'),
onSelected: (bool value) {},
onDeleted: () {},
),
InputChip(
selected: true,
label: const Text('InputChip'),
isEnabled: false,
onSelected: (bool value) {},
onDeleted: () {},
),
InputChip(
label: const Text('InputChip'),
onSelected: (bool value) {},
onDeleted: () {},
),
InputChip(
label: const Text('InputChip'),
isEnabled: false,
onSelected: (bool value) {},
onDeleted: () {},
// onDeleted: () {},
),
],
),
);
}
ChipsScreen.dart
class ChipsScreen extends StatelessWidget {
const ChipsScreen({super.key});
ThemeController themeController = Get.find();
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).colorScheme.background,
appBar: showAppBar
? AppBar(
title: const Text("Chips Theme"),
)
: null,
body: Center(
child: Container(
constraints: const BoxConstraints(
maxWidth: 1000,
),
alignment: Alignment.topCenter,
padding: const EdgeInsets.all(16),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Obx(
() => CustomContainer(
title: 'Chip blend color',
description: 'Background color',
child: ThemePopupMenu3(
schemeIndex:
themeController.chipsSchemeIndex.value,
onChanged:
themeController.setChipsSchemeColor),
),
),
const SizedBox(height: 20,),
_chipShowcase(),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Selected Chip color',
description: 'Selected Background color',
child: ThemePopupMenu3(
schemeIndex:
themeController.chipsSelectedSchemeIndex.value,
onChanged:
themeController.setChipsSelectedSchemeColor),
),
),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Chip delete icon color',
description: 'icon color',
child: ThemePopupMenu3(
schemeIndex:
themeController.chipsDeleteIconSchemeIndex.value,
onChanged:
themeController.setChipsDeleteIconSchemeColor),
),
),
const SizedBox(
height: 20,
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Obx(
() => Flexible(
child: _buildCommonContainer(
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
overlayShape: SliderComponentShape.noOverlay,
),
child: SizedBox(
width: 1000,
child: Slider(
value: themeController
.chipsBorderRadius.value,
min: -1,
max: 40,
divisions: 20,
inactiveColor: Colors.transparent,
onChanged: (double value) {
themeController
.setChipsBorderRadius(value);
if (kDebugMode) {
print(value);
}
},
),
),
),
title: 'Chip Border Radius',
description:
'Adjust the chip border radius to your preference.',
),
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0, top: 28),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text('Radius'),
Obx(
() {
final borderRadius = themeController
.chipsBorderRadius.value;
final integerPart =
double.parse(borderRadius.toStringAsFixed(0))
.toInt();
return SizedBox(
width: 55,
child: Text(
textAlign: TextAlign.center,
maxLines: 2,
softWrap: true,
themeController
.chipsBorderRadius.value ==
-1
? 'default stadium'
: integerPart.toString(),
style: TextStyles.titleSmall
.copyWith(fontSize: 12),
),
);
},
)
],
),
)
],
),
)
],
),
],
),
),
),
);
}
Widget _chipShowcase(){
return RepaintBoundary(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 8,
runSpacing: 8,
children: <Widget>[
Chip(
label: const Text('Chip'),
onDeleted: () {},
),
const Chip(
label: Text('Chip'),
avatar: FlutterLogo(),
),
ActionChip(
label: const Text('ActionChip'),
avatar: const Icon(Icons.settings),
onPressed: () {},
),
const ActionChip(
label: Text('ActionChip'),
avatar: Icon(Icons.settings),
onPressed: null,
),
FilterChip(
label: const Text('FilterChip'),
selected: true,
onSelected: (bool value) {},
),
const FilterChip(
label: Text('FilterChip'),
selected: true,
onSelected: null,
),
FilterChip(
label: const Text('FilterChip'),
selected: false,
onSelected: (bool value) {},
),
const FilterChip(
label: Text('FilterChip'),
selected: false,
onSelected: null,
),
ChoiceChip(
label: const Text('ChoiceChip'),
selected: true,
onSelected: (bool value) {},
),
const ChoiceChip(
label: Text('ChoiceChip'),
selected: true,
),
ChoiceChip(
label: const Text('ChoiceChip'),
selected: false,
onSelected: (bool value) {},
),
const ChoiceChip(
label: Text('ChoiceChip'),
selected: false,
onSelected: null,
),
InputChip(
selected: true,
label: const Text('InputChip'),
onSelected: (bool value) {},
onDeleted: () {},
),
InputChip(
selected: true,
label: const Text('InputChip'),
isEnabled: false,
onSelected: (bool value) {},
onDeleted: () {},
),
InputChip(
label: const Text('InputChip'),
onSelected: (bool value) {},
onDeleted: () {},
),
InputChip(
label: const Text('InputChip'),
isEnabled: false,
onSelected: (bool value) {},
onDeleted: () {},
// onDeleted: () {},
),
],
),
);
}
}
