Text Buttons Documentation

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

‣

Customizing Text Buttons

‣

Example Showcase

‣

Integration

‣

Conclusion

‣

Example

TextButton.dart class TextButtonScreen extends StatelessWidget { const TextButtonScreen({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("Text 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: 'Text Button color', description: 'Foreground color', child: ThemePopupMenu3( schemeIndex: themeController.textButtonSchemeIndex.value, onChanged: themeController.setTextButtonSchemeColor), ), ), const SizedBox(height: 20), _textButtonShowcase(), const SizedBox(height: 20), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Flexible( child: _buildCommonContainer( child: SliderTheme( data: SliderTheme.of(context).copyWith( overlayShape: SliderComponentShape.noOverlay, ), child: SizedBox( width: 1000, child: Slider( value: themeController .textButtonBorderRadius.value, min: -1, max: 40, divisions: 20, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setTextButtonBorderRadius(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Text Button Border Radius', description: 'Adjust the text 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 .textButtonBorderRadius.value; final integerPart = double.parse( borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController.textButtonBorderRadius .value == -1 ? 'default stadium' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), ], ), ), ), ); } Widget _textButtonShowcase() { return RepaintBoundary( child: Wrap( crossAxisAlignment: WrapCrossAlignment.center, spacing: 8, runSpacing: 8, children: <Widget>[ TextButton( onPressed: () {}, child: const Text('Text button'), ), TextButton.icon( onPressed: () {}, icon: const Icon(Icons.add), label: const Text('Text icon'), ), const TextButton( onPressed: null, child: Text('Text button'), ), ], ), ); } }

themecontroller.dart class ThemeController extends GetxController { ///[Text Button Setting] final RxDouble _textButtonBorderRadius = 2.0.obs; RxDouble get textButtonBorderRadius => _textButtonBorderRadius; void setTextButtonBorderRadius( double? value, ) { if (value == _textButtonBorderRadius.value) return; _textButtonBorderRadius.value = value!; } RxInt textButtonSchemeIndex = 0.obs; var getTextButtonSchemeColor = Rx<Color?>(null); void setTextButtonSchemeColor(Color? color, int value) { getTextButtonSchemeColor.value = color; textButtonSchemeIndex.value = value; } ///TextButtonThemeData Settings TextButtonThemeData buildTextButtonThemeData(BuildContext context){ return TextButtonThemeData( style: TextButton.styleFrom( foregroundColor: getTextButtonSchemeColor.value, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(textButtonBorderRadius .value == -1 ? 20 : textButtonBorderRadius .value))), ); } }