Utilize native input text components of Android / iOS on a Flutter project
Native.TextField.Made.with.FlexClip.mp4
Modern chat apps often allow users to paste rich content and send images.
![](https://private-user-images.githubusercontent.com/15151778/333465274-0ccb85cc-a3f3-49fe-8c62-1dc73b53ca58.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwMDcwNDIsIm5iZiI6MTcyMjAwNjc0MiwicGF0aCI6Ii8xNTE1MTc3OC8zMzM0NjUyNzQtMGNjYjg1Y2MtYTNmMy00OWZlLThjNjItMWRjNzNiNTNjYTU4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI2VDE1MTIyMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTEwNTE4MDI0NmIzNDQxOWUyOTk5MDNjZmE0MDc1ZTU2ZWZlN2Q2Zjk0MjE1ZGRkMzUwYjk5NTNhOWVmZDU3MmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.NUxMWdWTAsm4konhe6EGKQmC7c8O_xIJChKxRCjsj68)
However, the TextField
widget in the Flutter SDK currently lacks this feature. On Android, for example, long-pressing the TextField
does not show the “Paste” option.
To enable the “pasting” of rich content in a TextField, we are utilizing native UI components: EditText on Android and UITextView on iOS. This is achieved by employing custom platform-specific code, and hosting platform-specific provided by Flutter, as detailed in the Platform Channels documentation, and hosting platform-specific UI components in a Flutter widget.
For more information, see:
- Hosting native iOS views in your Flutter app with Platform Views
- Hosting native Android views in your Flutter app with Platform Views
![](https://private-user-images.githubusercontent.com/15151778/333468548-8b945069-a9bf-4821-a8ff-116d5e0c62c2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwMDcwNDIsIm5iZiI6MTcyMjAwNjc0MiwicGF0aCI6Ii8xNTE1MTc3OC8zMzM0Njg1NDgtOGI5NDUwNjktYTliZi00ODIxLWE4ZmYtMTE2ZDVlMGM2MmMyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI2VDE1MTIyMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVmMmVmMjVlMzIwYjk1ODk5MWY5NGI4OGYwYTNlNGE2ZTkwYTdmYzM3Njc4ZmU2OTE0MmExZTIzMTc5MGQyMWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.P-XMQLQKASjaXVuYRDEVwCapCYdCVdl5LQDu9CgrHGQ)
Additionally, the Flutter SDK supports image insertion via the keyboard on Android, as highlighted in PR