Flutter Quill - Plugin WYSIWYG o de Contenido Enriquecido de HTML
Te muestro como emplear el plugin de Flutter Quill en Flutter para habilitar texto Enriquecido en tu aplicación.
Te voy a mostrar cómo puedes emplear un plugin similar al de CKEditor o en resumen a los plugins de tipo WYSIWYG What You See Is What You Get es decir lo que veces lo que obtienes que tenemos en html aquí la diferencia fundamental es que por aquí no se emplea html A diferencia de cualquier aplicación web por ejemplo con CKEditor.
Entonces el plugin a la final viene siendo como el que puedes ver en pantalla desde aquí puedes cambiar por ejemplo la tipografía Aunque es la tipografía realmente de la barra de control el tamaño de la fuente puedes colocarlo aquí en un numeral y otras cositas por ejemplo un bloque de código y lo que puedes ver en pantalla realmente por lo tanto es el típico plugin que nos permite colocar contenido enriquecido sobre un campo de texto es así de simple el plugin en cuestión viene siendo el que puedes ver en pantalla:
https://pub.dev/packages/flutter_quill
El llamado flurer quill viene siendo este esta es la página oficial y vamos a ver cómo lo configuras una vez instalado que es el típico en el y colocarlo:
dependencies:
flutter:
sdk: flutter
***
flutter_quill:Lo importas y por aquí creas una instancia tal cual puedes ver aquí tenemos otras yo coloqué el basit te estoy mostrando la configuración:
import 'package:flutter_quill/flutter_quill.dart';
***
final QuillController _controllerHtmlEditor = QuillController.basic();
@override
void dispose() {
_controllerHtmlEditor.dispose();
super.dispose();
}
***Que yo tengo creas tu instancia haces el dispose como muchos otros recursos por ejemplo las animaciones aquí lo que estoy haciendo es inicializar en este caso como puede ser un comentario existente entonces esta es la forma de inicializar en caso de que te interese obtenemos el document que viene siendo lo escrito por el usuario y aquí se emplean el par de funciones que te mostraba antes en otro video que era Front Delta y html tu Delta:
_controllerHtmlEditor.document = Document.fromDelta(htmlToDelta(c)),Esto es otra vez si estás empleando o el contenido lo estás guardando en html entonces es importante hacer esta conversión si el contenido lo estás guardando localmente en la aplicación no haría falta hacer la conversión si acaso Delta porque lo vas a guardar.
Aquí puedes ver el resultado es empleando una función de promesa y todo lo demás porque es una petición en este caso a mi resapi pero este paso es opcional otra vez eso es para inicializar el contenido y aquí sería cómo establecemos el plugin tal cual puedes ver es un poco extraño porque se divide en dos bloques uno es para la barra que viene siendo esta parte de aquí arriba la barra de herramientas se pudiera decir en los colores el background la lista etcétera ahí lo colocas y la parte de la caja que en este caso de manera opcional le coloqué un pequeño estilo para que no apareciera un espacio vacío y no se supiera 1ué es eso entonces para hacerle aquí el interlineado tal cual puedes ver y colocamos aquí el tamaño que es importante y finalmente el nombre del plugin y le pasas la instancia que creamos anteriormente y eso sería ya prácticamente todo ya con eso tuviéramos el plugin que estás viendo aquí en pantalla:
QuillSimpleToolbar(
controller: _controllerHtmlEditor,
configurations: const QuillSimpleToolbarConfigurations(),
),
Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Theme.of(context).primaryColor),
color: appTheme.darkTheme ? Colors.black26 : Colors.black12),
height: 300,
child: QuillEditor.basic(
controller: _controllerHtmlEditor,
configurations: const QuillEditorConfigurations(),
),
),- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter