Outlined Buttons Documentation

Here's a documentation on how to customize Outlined Buttons using the provided code snippet:

‣

Customizing Outlined Buttons

‣

Example Showcase

‣

Integration

‣

Conclusion

‣

Example

OutlinedButton.dart class OutlinedButtonScreen extends StatelessWidget { const OutlinedButtonScreen({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("Outlined 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: 'Outlined Button color', description: 'Foreground color', child: ThemePopupMenu3( schemeIndex: themeController .outlinedButtonSchemeIndex.value, onChanged: themeController .setOutlinedButtonSchemeColor)), ), const SizedBox(height: 20), _outlinedButtonShowcase(), const SizedBox(height: 20), Obx( () => CustomContainer( title: 'Outlined Button outline color', description: 'Outline color', child: ThemePopupMenu3( schemeIndex: themeController .outlinedButtonOutlineSchemeIndex.value, onChanged: themeController .setOutlinedButtonOutlineSchemeColor), ), ), 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 .outlinedButtonBorderRadius.value, min: -1, max: 40, divisions: 20, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setOutlinedButtonBorderRadius(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Outline Button Border Radius', description: 'Adjust the outline 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 .outlinedButtonBorderRadius.value; final integerPart = double.parse( borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController.outlinedButtonBorderRadius .value == -1 ? 'default stadium' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), 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 .outlinedButtonBorderWidth.value, min: -1, max: 5, divisions: 11, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setOutlinedButtonBorderWidth(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Outline Button Border width', description: 'Adjust the outline border width to your preference.', ), ), ), Padding( padding: const EdgeInsets.only(left: 10.0, top: 28), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ const Text('Width'), Obx( () { final borderRadius = themeController .outlinedButtonBorderWidth.value; final integerPart = borderRadius.toStringAsFixed( 1); // Get the integer part final textToShow = borderRadius <= 0 ? 'default stadium' : integerPart.toString(); return SizedBox( width: 55, child: Text( textToShow, textAlign: TextAlign.center, maxLines: 2, softWrap: true, style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ), ], ), ) ], ), ], ), ), ), ); } Widget _outlinedButtonShowcase() { return RepaintBoundary( child: Wrap( crossAxisAlignment: WrapCrossAlignment.center, spacing: 8, runSpacing: 8, children: <Widget>[ OutlinedButton( onPressed: () {}, child: const Text('Outlined button'), ), OutlinedButton.icon( onPressed: () {}, icon: const Icon(Icons.add), label: const Text('Outlined icon'), ), const OutlinedButton( onPressed: null, child: Text('Outlined button'), ), ], ), ); } }

themecontroller.dart class ThemeController extends GetxController { ///[Outline Button Setting] RxInt outlinedButtonSchemeIndex = 0.obs; var getOutlinedButtonSchemeColor = Rx<Color?>(null); void setOutlinedButtonSchemeColor( Color? color, int value, ) { getOutlinedButtonSchemeColor.value = color; outlinedButtonSchemeIndex.value = value; } RxInt outlinedButtonOutlineSchemeIndex = 0.obs; var getOutlinedButtonOutlineSchemeColor = Rx<Color?>(null); void setOutlinedButtonOutlineSchemeColor(Color? color, int value) { getOutlinedButtonOutlineSchemeColor.value = color; outlinedButtonOutlineSchemeIndex.value = value; } final RxDouble _outlinedButtonBorderRadius = 20.0.obs; RxDouble get outlinedButtonBorderRadius => _outlinedButtonBorderRadius; void setOutlinedButtonBorderRadius(double? value, [bool notify = true]) { if (value == _outlinedButtonBorderRadius.value) return; _outlinedButtonBorderRadius.value = value!; } final RxDouble _outlinedButtonBorderWidth = 2.0.obs; RxDouble get outlinedButtonBorderWidth => _outlinedButtonBorderWidth; void setOutlinedButtonBorderWidth(double? value, [bool notify = true]) { if (value == _outlinedButtonBorderWidth.value) return; _outlinedButtonBorderWidth.value = value!; } ///OutlinedButtonThemeData Settings OutlinedButtonThemeData buildOutlinedButtonThemeData(BuildContext context){ return OutlinedButtonThemeData( style: OutlinedButton.styleFrom( foregroundColor: getOutlinedButtonSchemeColor.value, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular( outlinedButtonBorderRadius.value == -1 ? 20 : outlinedButtonBorderRadius.value)), side: BorderSide( width: outlinedButtonBorderWidth.value <= 0 ? 2 : outlinedButtonBorderWidth.value, color: getOutlinedButtonOutlineSchemeColor.value ?? Theme.of(context).colorScheme.primary)), ); } }