TextFiledThemeScreen.dart class TextFiledThemeScreen extends StatefulWidget { final bool showAppBar; const TextFiledThemeScreen({super.key, this.showAppBar = false}); @override State createState() => _TextFiledThemeScreenState(); } class _TextFiledThemeScreenState extends State { ThemeController themeController = Get.find(); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Theme.of(context).colorScheme.background, appBar: widget.showAppBar ? AppBar( title: const Text( "TextField Theme", ), ) : null, body: Center( child: Container( constraints: const BoxConstraints( maxWidth: 1000, ), alignment: Alignment.topCenter, padding: const EdgeInsets.all(16), child: Stack( alignment: Alignment.topCenter, children: [ SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const SizedBox(height: 95,), _buildCommonContainer( child: ThemeColorSelector(controller: themeController,), title: "Theme Color", description: "Select the theme mode you prefer.", ), const ListTileReveal( leading: Icon(Icons.text_fields_outlined), title: Text('TextField'), subtitle: Text('By default Switch are themed to style and ' 'height align with OutlinedButton and FilledButton, shown ' 'here for comparison.\n'), ), ListTileReveal( title: const Text( 'Use Material 3 ', ), subtitle: const Text( 'Update settings below to match M3 default ' 'values. Also sets text selection style.\n' 'Can also be used in M2 mode, but the result is different from ' 'when used in actual M3 mode.'), trailing: FilledButton( onPressed: () async { await _handleSetToM3(context); }, child: const Text('Set to M3'), ), onTap: () async { await _handleSetToM3(context); }, ), const SizedBox(height: 20,), _textFieldShowcase(), const SizedBox(height: 10,), const Divider(), const SizedBox(height: 10,), Obx( () => CustomContainer( title: '${themeController.themeMode.value==ThemeMode.dark?'Dark':'Light'} Theme base color', description: 'Base color', child: ThemePopupMenu3( schemeIndex: themeController.textFiledSchemeIndex.value, onChanged: themeController.setTextFiledSchemeColor), ), ), const SizedBox( height: 10, ), Obx( ()=> SwitchListTileReveal( title: const Text('Base color as background',style: TextStyle(fontSize: 14),), subtitleDense: true, subtitle: const Text('TIP: If you leave this OFF, you can still ' 'theme the fill color and turn it ON using widget level ' "'filled: true' property, and wise versa.\n"), value: themeController.inputDecoratorIsFilled.value, onChanged: themeController.setInputDecoratorIsFilled , ), ), const SizedBox( height: 10, ), Obx( () => CustomContainer( title: '${themeController.themeMode.value==ThemeMode.dark?'Dark':'Light'} theme focused prefix icon color', description: ' prefix icon color', child: ThemePopupMenu3( schemeIndex: themeController.textFiledPrefixIconSchemeIndex.value, onChanged: themeController.setTextFiledPrefixIconSchemeColor), ), ), 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 .textFiledMainColorOpacity.value, min: -1, max: 100, divisions: 25, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setTextFiledMainColorOpacity(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'TextFiled Main Color Opacity', description: 'Adjust the textFiled main color opacity to your preference.', ), ), ), Padding( padding: const EdgeInsets.only(left: 10.0, top: 28), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ const Text('Opacity'), Obx( () { final borderRadius = themeController .textFiledMainColorOpacity.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .textFiledMainColorOpacity.value == -1 ? 'default opacity' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), const SizedBox( height: 20, ), const Divider(), const SizedBox(height: 20,), Obx( () => CustomContainer( title: '${themeController.themeMode.value==ThemeMode.dark?'Dark':'Light'} Theme Border color', description: 'Border color', child: ThemePopupMenu3( schemeIndex: themeController.textFiledBorderSchemeIndex.value, onChanged: themeController.setTextFiledBorderSchemeColor), ), ), const SizedBox( height: 10, ), Obx( ()=> SwitchListTile( title: const Text( 'Border style', ), subtitle: const Text( 'ON for outline | OFF for underline', ), value: themeController.inputDecoratorBorderType.value == FlexInputBorderType.outline, onChanged: (bool isOn) { if (isOn) { themeController.setInputDecoratorBorderType( FlexInputBorderType.outline); } else { themeController.setInputDecoratorBorderType( FlexInputBorderType.underline); } }, ), ), const SizedBox( height: 10, ), 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 .textFiledBorderRadius.value, min: -1, max: 40, divisions: 20, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setTextFiledBorderRadius(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'TextFiled Border Radius', description: 'Adjust the textFiled 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 .textFiledBorderRadius.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .textFiledBorderRadius.value == -1 ? 'default opacity' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), const SizedBox( height: 20, ), const Divider(), Obx(()=> SwitchListTile( title: const Text('Focused field has a border'), value: themeController.inputDecoratorFocusedHasBorder.value, onChanged: themeController.setInputDecoratorFocusedHasBorder, ), ), const SizedBox(height: 10,), 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.inputDecoratorFocusedHasBorder.value ? themeController.textFiledFocusedBorderWidth.value : 0 , min: 0, max: 5, divisions: 11, inactiveColor: Colors.transparent, onChanged:themeController.inputDecoratorFocusedHasBorder.value ? (double value) { themeController.setTextFiledFocusedBorderWidth(value); } : null, ), ), ), title: 'TextFiled Focused Border Width', description: 'Adjust the textFiled focused 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( () { // Get the integer part final textToShow = themeController.inputDecoratorFocusedHasBorder.value ? (themeController.textFiledFocusedBorderWidth.value ) <= 0 ? 'Default' : (themeController.textFiledFocusedBorderWidth.value .toStringAsFixed(1)) : themeController.inputDecoratorFocusedHasBorder.value ? 'default 2' : 'none'; return SizedBox( width: 55, child: Text( textToShow, textAlign: TextAlign.center, maxLines: 2, softWrap: true, style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ), ], ), ) ], ), const SizedBox(height: 20,), const Divider(), const SizedBox(height: 10,), Obx( ()=> SwitchListTile( title: const Text('Unfocused field has a border'), value: themeController.inputDecoratorUnfocusedHasBorder.value , onChanged: themeController.setInputDecoratorUnfocusedHasBorder , ), ), Obx( ()=> SwitchListTile( title: const Text('Unfocused border is colored'), value: themeController.inputDecoratorUnfocusedBorderIsColored.value && themeController.inputDecoratorUnfocusedHasBorder.value , onChanged: themeController.inputDecoratorUnfocusedHasBorder.value ? themeController.setInputDecoratorUnfocusedBorderIsColored : null, ), ), const SizedBox(height: 10,), 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.inputDecoratorUnfocusedHasBorder.value ? themeController.textFiledUnFocusedBorderWidth.value : 0, min: 0, max: 5, divisions: 11, inactiveColor: Colors.transparent, onChanged:themeController.inputDecoratorUnfocusedHasBorder.value ? (double value) { themeController .setTextFiledUnFocusedBorderWidth(value); if (kDebugMode) { print(value); } }:null, ), ), ), title: 'TextFiled Focused Border Width', description: 'Adjust the textFiled focused 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( () { String textToShow = themeController.inputDecoratorUnfocusedHasBorder.value ? (themeController.textFiledUnFocusedBorderWidth.value ) <= 0 ? 'Default' : (themeController.textFiledUnFocusedBorderWidth.value.toStringAsFixed(1)) : themeController.inputDecoratorUnfocusedHasBorder.value ? 'default 1' : 'none'; return SizedBox( width: 55, child: Text( textToShow, textAlign: TextAlign.center, maxLines: 2, softWrap: true, style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ), ], ), ) ], ), const SizedBox(height: 20,), const Divider(), const SizedBox(height: 20,), Obx( () => CustomContainer( title: '${themeController.themeMode.value==ThemeMode.dark?'Dark':'Light'} theme cursor', description: 'Cursor color', child: ThemePopupMenu3( schemeIndex: themeController.textFiledCursorSchemeIndex.value, onChanged: themeController.setTextFiledCursorSchemeColor), ), ), const SizedBox( height: 20, ), Obx( () => CustomContainer( title: '${themeController.themeMode.value==ThemeMode.dark?'Dark':'Light'} theme Selection text color', description: 'Selection Text color', child: ThemePopupMenu3( schemeIndex: themeController.textFiledTextSelectionSchemeIndex.value, onChanged: themeController.setTextFiledTextSelectionSchemeColor), ), ), 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 .textFiledSelectedTextOpacity.value, min: -1, max: 100, divisions: 25, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setTextFiledSelectedTextOpacity(value); if (kDebugMode) { print(value); } }, ), ), ), title: '${themeController.themeMode.value==ThemeMode.dark?'Dark':'Light'} theme text selection opacity', description: 'Adjust the text selection opacity to your preference.', ), ), ), Padding( padding: const EdgeInsets.only(left: 10.0, top: 28), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ const Text('Opacity'), Obx( () { final borderRadius = themeController .textFiledSelectedTextOpacity.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .textFiledSelectedTextOpacity.value == -1 ? 'default opacity' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), const SizedBox( height: 20, ), Obx( () => CustomContainer( title: '${themeController.themeMode.value==ThemeMode.dark?'Dark':'Light'} theme text selection handles', description: 'text selection handles color', child: ThemePopupMenu3( schemeIndex: themeController.textFiledSelectionHandleColorIndex.value, onChanged: themeController.setTextFiledSelectionHandleColor), ), ), const SizedBox( height: 20, ), const TextField( showCursor: true, decoration: InputDecoration( hintText: 'Write something and try the text selection style', labelText: 'Label: TextField for text selection', ), ), const SizedBox( height: 20, ), ], ), ), Container( height:90, width: double.infinity, color: Theme.of(context).colorScheme.background, child: const Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ TextField( key: Key('TextField3'), // controller: textController3, decoration: InputDecoration( border: OutlineInputBorder(), hintText: 'Hint: Write something...', labelText: 'Label: Outline border set by Widget if not defined', prefixIcon: Icon(Icons.search), suffixIcon: Icon(Icons.info), // errorText: errorState3.value // ? "Any entry without an 'a' will trigger this error" // : null, ), ), Divider() ], ), ), ], ), ), ), ); } Future _handleSetToM3(BuildContext context) async { final bool? reset = await showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: const Text('Set TextField To FlexColorScheme Defaults'), content: const Text('Set the text field settings back to its opinionated ' 'default values?'), actions: [ TextButton( onPressed: () { Navigator.of(context).pop(false); }, child: const Text('Cancel')), TextButton( onPressed: () { Navigator.of(context).pop(true); }, child: const Text('Set to FCS defaults')), ], ); }, ); if (reset ?? false) { await themeController.setTextFieldToM3(); } } Future _handleSetToDefaults(BuildContext context) async { final bool? reset = await showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: const Text('Set TextField To FlexColorScheme Defaults'), content: const Text('Set the text field settings back to its opinionated ' 'default values?'), actions: [ TextButton( onPressed: () { Navigator.of(context).pop(false); }, child: const Text('Cancel')), TextButton( onPressed: () { Navigator.of(context).pop(true); }, child: const Text('Set to FCS defaults')), ], ); }, ); if (reset ?? false) { // await themeController.setTextFieldToDefaults(); } } Widget _buildCommonContainer( {required Widget child, required String title, required String description}) { return Column( children: [ Container( padding: const EdgeInsets.only(left: 16), alignment: Alignment.centerLeft, child: Text( title, style: TextStyles.titleSmall, ), ), const SizedBox(height: 5), Container( width: double.infinity, padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Theme.of(context).scaffoldBackgroundColor, borderRadius: BorderRadius.circular(10), boxShadow: [containerShadow(context)], ), child: child, ), const SizedBox(height: 5), Container( padding: const EdgeInsets.only(left: 16), alignment: Alignment.centerLeft, child: Text( description, style: TextStyles.bodyMedium, ), ), ], ); } Widget _textFieldShowcase() { TextEditingController textController1 = TextEditingController(); TextEditingController textController2 = TextEditingController(); TextEditingController textController3 = TextEditingController(); TextEditingController textController4 = TextEditingController(); RxBool errorState1 = false.obs; RxBool errorState2 = false.obs; RxBool errorState3 = false.obs; return RepaintBoundary( child: Column( children: [ Obx( () => TextField( onChanged: (String text) { if (text.contains('a') | text.isEmpty) { errorState1.value = false; } else { errorState1.value = true; } }, key: const Key('TextField1'), controller: textController1, decoration: InputDecoration( hintText: 'Hint: Write something...', labelText: 'Label: Underline border by default if not defined', errorText: errorState1.value ? "Any entry without an 'a' will trigger this error" : null, ), ), ), const SizedBox(height: 16), Obx( () => TextField( onChanged: (String text) { if (text.contains('a') | text.isEmpty) { errorState2.value = false; } else { errorState2.value = true; } }, key: const Key('TextField2'), controller: textController2, decoration: InputDecoration( filled: true, hintText: 'Hint: Write something...', labelText: 'Label: Underline border by default if not defined, ' 'filled set true by Widget', errorText: errorState2.value ? "Any entry without an 'a' will trigger this error" : null, ), ), ), const SizedBox(height: 16), Obx( () => TextField( onChanged: (String text) { if (text.contains('a') | text.isEmpty) { errorState3.value = false; } else { errorState3.value = true; } }, key: const Key('TextField3'), controller: textController3, decoration: InputDecoration( border: const OutlineInputBorder(), hintText: 'Hint: Write something...', labelText: 'Label: Outline border set by Widget if not defined', prefixIcon: const Icon(Icons.search), suffixIcon: const Icon(Icons.info), errorText: errorState3.value ? "Any entry without an 'a' will trigger this error" : null, ), ), ), const SizedBox(height: 16), TextField( key: const Key('TextField4'), controller: textController4, decoration: const InputDecoration.collapsed( hintText: 'Hint: Collapsed TextField...', ), ), const SizedBox(height: 16), TextField( controller: TextEditingController(), enabled: false, decoration: const InputDecoration( labelText: 'TextField - Disabled label', ), ), const SizedBox(height: 16), TextField( controller: TextEditingController(text: 'Disabled with text entry'), enabled: false, decoration: const InputDecoration( labelText: 'TextField - Disabled label', prefixIcon: Icon(Icons.search), suffixIcon: Icon(Icons.info), ), ), ], ), ); } }

TextField Documentation

TextField Documentation