Filled Buttons Documentation Guid

Filled buttons in Flutter applications provide a solid-colored surface to trigger actions, enhancing user experience and aligning with your app's design language. This documentation offers comprehensive guidance on customizing filled buttons effectively.

‣

Customizing Filled Buttons

‣

Example Showcase

‣

Integration

‣

Conclusion

‣

Example

FilledButton.dart class FilledButtonScreen extends StatelessWidget { const FilledButtonScreen({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("Filled 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: 'Filled Button color', description: 'Background color', child: ThemePopupMenu3( schemeIndex: themeController.filledButtonSchemeIndex.value, onChanged: themeController.setFilledButtonSchemeColor), ), ), const SizedBox(height: 20), Align( alignment: Alignment.centerLeft, child: _filledButtonShowcase()), const SizedBox( height: 10, ), _filledButtonTonalShowcase(), const SizedBox(height: 20), Obx( () => CustomContainer( title: 'Filled Button color', description: 'Foreground color', child: ThemePopupMenu3( schemeIndex: themeController .filledButtonSecondarySchemeIndex.value, onChanged: themeController .setFilledButtonSecondarySSchemeColor), ), ), 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 .filledButtonBorderRadius.value, min: -1, max: 40, divisions: 20, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setFilledButtonBorderRadius(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Filled Button Border Radius', description: 'Adjust the filled 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 .filledButtonBorderRadius.value; final integerPart = double.parse( borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController.filledButtonBorderRadius .value == -1 ? 'default stadium' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), ), ], ), ), ), ); } Widget _filledButtonShowcase() { return RepaintBoundary( child: Wrap( crossAxisAlignment: WrapCrossAlignment.center, spacing: 8, runSpacing: 8, children: <Widget>[ FilledButton( onPressed: () {}, child: const Text('Filled button'), ), FilledButton.icon( onPressed: () {}, icon: const Icon(Icons.add), label: const Text('Filled icon'), ), const FilledButton( onPressed: null, child: Text('Filled button'), ), ], ), ); } Widget _filledButtonTonalShowcase() { return RepaintBoundary( child: Wrap( crossAxisAlignment: WrapCrossAlignment.center, spacing: 8, runSpacing: 8, children: <Widget>[ FilledButton.tonal( onPressed: () {}, child: const Text('Filled tonal button'), ), FilledButton.tonalIcon( onPressed: () {}, icon: const Icon(Icons.add), label: const Text('Filled tonal icon'), ), const FilledButton.tonal( onPressed: null, child: Text('Filled tonal button'), ), ], ), ); } }

themecontroller.dart class ThemeController extends GetxController { ///[Filled Button Setting] final RxDouble _filledButtonBorderRadius = 20.0.obs; RxDouble get filledButtonBorderRadius => _filledButtonBorderRadius; RxInt filledButtonSchemeIndex = 0.obs; RxInt filledButtonSecondarySchemeIndex = 0.obs; var getFilledButtonSchemeColor = Rx<Color?>(null); var getFilledButtonSecondarySchemeColor = Rx<Color?>(null); void setFilledButtonSchemeColor( Color? color, int value, ) { getFilledButtonSchemeColor.value = color; filledButtonSchemeIndex.value = value; } void setFilledButtonSecondarySSchemeColor( Color? color, int value, ) { getFilledButtonSecondarySchemeColor.value = color; filledButtonSecondarySchemeIndex.value = value; } void setFilledButtonBorderRadius( double? value, ) { if (value == _filledButtonBorderRadius.value) return; _filledButtonBorderRadius.value = value!; } ///FilledButtonThemeData Settings FilledButtonThemeData buildFilledButtonThemeData(BuildContext context){ return FilledButtonThemeData( style: FilledButton.styleFrom( foregroundColor: getFilledButtonSecondarySchemeColor.value, backgroundColor: getFilledButtonSchemeColor.value, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular( filledButtonBorderRadius.value == -1 ? 20 : filledButtonBorderRadius.value) ))); } }