https://github.com/yelmuratoff/rtf_textfield

Flutter custom widget to create Rich TextField. It includes textspan for hint, label. Control the text style with RTFTextFieldController.
https://github.com/yelmuratoff/rtf_textfield

dart flutter rich rich-editor rich-text rich-text-editor rich-textfield rtf textfield

Last synced: 19 days ago
JSON representation

Flutter custom widget to create Rich TextField. It includes textspan for hint, label. Control the text style with RTFTextFieldController.

• Host: GitHub
• URL: https://github.com/yelmuratoff/rtf_textfield
• Owner: yelmuratoff
• License: mit
• Created: 2024-02-11T00:41:24.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-11T00:42:55.000Z (11 months ago)
• Last Synced: 2024-12-24T20:14:43.610Z (24 days ago)
• Topics: dart, flutter, rich, rich-editor, rich-text, rich-text-editor, rich-textfield, rtf, textfield
• Language: Dart
• Homepage: https://pub.dev/packages/rtf_textfield
• Size: 301 KB
• Stars: 2
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        




    

        

    





 Flutter custom widget to create Rich TextField 🚀 




Included RTFTextFieldController for customize text, hint and label TextSpan 😊

   


    Show some ❤️ and star the repo to support the project! 





  

  

  

  





  

  

  






## 📌 Features

- ✅ Customizable hint

- ✅ Customizable label

- ✅ Data serialization *(Store and fetch styled text in JSON format)*

- ✅ Customizable text features with `RTFTextFieldController` *(change color, style, size, wight, etc.)*

## 📌 Getting Started

Follow these steps to use this package

### Add dependency

```yaml

dependencies:

  rtf_textfield: ^1.0.1

```

### Add import package

```dart

import 'package:rtf_textfield/rtf_textfield.dart';

```

### Easy to use

Simple example of use `RTFTextField`


Put this code in your project at an screen and learn how it works 😊



  

    

      



 

Widget part:

```dart

RTFTextField(

   onTapOutside: (event) {

      FocusManager.instance.primaryFocus?.unfocus();

   },

   decoration: const RichInputDecoration(

      border: OutlineInputBorder(

      borderRadius: BorderRadius.all(Radius.circular(16)),

   ),

      enabledBorder: OutlineInputBorder(

         borderSide: BorderSide(

            color: Colors.grey,

         ),

         borderRadius: BorderRadius.all(Radius.circular(16)),

      ),

      labelTextSpan: TextSpan(

         text: 'Enter your name',

         children: [

            TextSpan(

               text: ' *',

               style: TextStyle(

                  color: Colors.red,

               ),

            ),

         ],

      ),

      hintTextSpan: TextSpan(

         text: 'Yelaman',

         ),

      ),

   controller: controller,

),

```

Change text weight using `RTFTextFieldController`:

```dart

controller.toggleBold();

```

### 📌 Examples

You can check more examples of using this package [here](example/lib)






  
Thanks to all contributors of this package