Widget _fabShowcase(){
RxBool extended = true.obs;
return RepaintBoundary(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 16,
runSpacing: 16,
children: <Widget>[
Tooltip(
verticalOffset: 40,
waitDuration: const Duration(milliseconds: 500),
message: 'FloatingActionButton.small',
child: FloatingActionButton.small(
heroTag: 'FAB small',
onPressed: () {},
child: const Icon(Icons.accessibility),
),
),
Tooltip(
verticalOffset: 40,
waitDuration: const Duration(milliseconds: 500),
message: 'FloatingActionButton',
child: FloatingActionButton(
heroTag: 'FAB standard',
onPressed: () {},
child: const Icon(Icons.accessibility),
),
),
Obx(
()=> Tooltip(
verticalOffset: 40,
waitDuration: const Duration(milliseconds: 500),
message: 'FloatingActionButton.extended(isExtended: ${extended.value})',
child: FloatingActionButton.extended(
heroTag: 'FAB extendable',
isExtended: extended.value,
onPressed: () {
extended.toggle();
},
icon: const Icon(Icons.accessibility),
label: const Text('Extended'),
),
),
),
Tooltip(
verticalOffset: 60,
waitDuration: const Duration(milliseconds: 500),
message: 'FloatingActionButton.large',
child: FloatingActionButton.large(
heroTag: 'FAB large',
onPressed: () {},
child: const Icon(Icons.accessibility),
),
),
],
),
);
}
FabButton.dart
class FabButtonScreen extends StatelessWidget {
const FabButtonScreen({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("Fab Button 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: 'FAB color',
description: 'Background color',
child: ThemePopupMenu3(
schemeIndex:
themeController.fabButtonSchemeIndex.value,
onChanged: themeController.setFabButtonSchemeColor),
),
),
const SizedBox(
height: 20,
),
_fabShowcase(),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'FAB Icon color',
description: 'Icon color',
child: ThemePopupMenu3(
schemeIndex: themeController
.fabButtonIconSchemeIndex.value,
onChanged: themeController
.setFabButtonIconSchemeColor),
),
),
const SizedBox(height: 20,),
Obx(
()=> SwitchListTileReveal(
title: const Text('Use themed shape'),
enabled: true,
subtitleDense: true,
subtitle: const Text('OFF removes shape usage, making it use default '
'style, regardless of global border radius setting or own radius '
'setting.\n'),
value: themeController.fabUseShape.value,
onChanged: themeController.setFabUseShape,
),
),
Obx(
()=> SwitchListTileReveal(
enabled: themeController.fabUseShape.value ,
title: const Text('Always circular'),
subtitleDense: true,
subtitle: const Text('Turn on to always use circular and stadium '
'shaped FAB, also in Material 3.\n'),
value: themeController.fabAlwaysCircular.value &&
themeController.fabUseShape.value,
onChanged:
themeController.fabUseShape.value
? themeController.setFabAlwaysCircular
: null,
),
),
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.fabUseShape.value &&
!themeController.fabAlwaysCircular.value
? themeController.fabButtonBorderRadius.value
: -1,
min: -1,
max: 60,
divisions: 31,
inactiveColor: Colors.transparent,
onChanged:
themeController.fabUseShape.value &&
!themeController.fabAlwaysCircular.value
? (double value) {
themeController
.setFabButtonBorderRadius(value);
}
: null,
),
),
),
title: 'FAB Border Radius',
description:
'Adjust the fab 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(
() {
return SizedBox(
width: 55,
child: Text(
textAlign: TextAlign.center,
maxLines: 2,
softWrap: true,
themeController.fabUseShape.value &&
!themeController.fabAlwaysCircular.value
? (themeController.fabButtonBorderRadius.value) < 0
? 'default stadium'
: (themeController.fabButtonBorderRadius.value.toStringAsFixed(0))
: themeController.fabAlwaysCircular.value && themeController.fabUseShape.value
? 'circular'
: themeController.useMaterial3.value
? 'M3 rounded'
: 'circular',
style: TextStyles.titleSmall
.copyWith(fontSize: 12),
),
);
},
)
],
),
)
],
),
),
),
),
);
}
Widget _fabShowcase(){
RxBool extended = true.obs;
return RepaintBoundary(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 16,
runSpacing: 16,
children: <Widget>[
Tooltip(
verticalOffset: 40,
waitDuration: const Duration(milliseconds: 500),
message: 'FloatingActionButton.small',
child: FloatingActionButton.small(
heroTag: 'FAB small',
onPressed: () {},
child: const Icon(Icons.accessibility),
),
),
Tooltip(
verticalOffset: 40,
waitDuration: const Duration(milliseconds: 500),
message: 'FloatingActionButton',
child: FloatingActionButton(
heroTag: 'FAB standard',
onPressed: () {},
child: const Icon(Icons.accessibility),
),
),
Obx(
()=> Tooltip(
verticalOffset: 40,
waitDuration: const Duration(milliseconds: 500),
message: 'FloatingActionButton.extended(isExtended: ${extended.value})',
child: FloatingActionButton.extended(
heroTag: 'FAB extendable',
isExtended: extended.value,
onPressed: () {
extended.toggle();
},
icon: const Icon(Icons.accessibility),
label: const Text('Extended'),
),
),
),
Tooltip(
verticalOffset: 60,
waitDuration: const Duration(milliseconds: 500),
message: 'FloatingActionButton.large',
child: FloatingActionButton.large(
heroTag: 'FAB large',
onPressed: () {},
child: const Icon(Icons.accessibility),
),
),
],
),
);
}
}
