Flutter Quill: Editor de Rich Text no aplicativo Flutter
Olá pessoal…!!!!. Hoje começamos com um tópico interessante que é usado para rich text. Flutter Quill é um editor de rich text e também um componente Quill para Flutter.
Conteudo
Introdução:
FlutterQuill é um editor de rich text e um componente Quill para Flutter. Esta biblioteca é um editor WYSIWYG construído para a plataforma móvel moderna, com compatibilidade web em desenvolvimento. Essa dependência é muito útil para qualquer aplicativo editor. Não precisamos de nenhum outro lado do código para nenhum editor de texto.
Adicionar dependência:
Para adicionar a dependência primeiro, você deve abrir o pubspec. ymal e adicione algumas dependências,
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.5
flutter_quill: ^6.4.4
Temos que adicionar o pacote atualizado de flutter_quill. Que é usado como um Editor de Rich Text em Flutter.
Configuração:
A classe Quill Toolbar permite personalizar quais opções de formatação estão disponíveis.
- Font Size:- Dentro da barra de ferramentas do editor, um menu suspenso com recursos de dimensionamento de fonte está disponível. Isso pode ser ativado ou desativado com showFontSize. Quando ativado, os valores de tamanho de fonte padrão podem ser modificados por meio de fontSizeValues opcional. FontSizeValues aceita um Map<String, String> que consiste em um título String para o tamanho da fonte e um valor String para o tamanho da fonte. Exemplo:
fontSizeValues: const {'Small': '7', 'Medium': '20.5', 'Large': '40'},- Font Family:- Se você quiser usar a família de fontes, você deve adicionar a família à pasta de ativos e passar fontfamilyValues.
- Custom Buttons:- Você pode adicionar botões personalizados ao final da barra de ferramentas, por meio da opção de botões personalizados, que é uma lista de QuillCustomButton.
QuillCustomButton(
icon:Icons.ac_unit,
onTap: () {
debugPrint('snowflake');
}- showAlignmentButtons:- Em showAlignmentButtons, temos muitas propriedades como controller, iconSize, iconTheme, showLeftAlignment, showCenterAlignment, showRightAlignment, showJustifyAlignment, afterButtonPressed.
- Translation:- O pacote oferece traduções para a barra de ferramentas e o editor do quill, ele seguirá a localidade do sistema, a menos que você defina sua própria localidade com:
QuillToolbar(locale: Locale('fr'), ...)
QuillEditor(locale: Locale('fr'), ...)
Implementação:
Na implementação do Flutter Quill primeiro, temos que criar um projeto flutter com o nome flutter_quill_demo. Existem duas coisas no QuillController e no Quill-editor. Em Quill-controlador.
QuillController _controller = QuillController.basic();
Aqui definimos o controlador como QuillController.basic(). No Toolbar() podemos passar muitas coisas como QuillController, toolbarIconAlignment, toolbarIconAlignment, showDividers, showBoldButton, showBoldButton, showUnderLineButton, showJustifyAlignment e muito mais.
E o segundo é QuillEditor.basic(), neste editor podemos digitar qualquer coisa.
Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 20,left: 10,right: 10,bottom: 20),
width: MediaQuery.of(context).size.width,
height: 80,
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://user-images.githubusercontent.com/10923085/119221946-2de89000-baf2-11eb-8285-68168a78c658.png'),
fit: BoxFit.cover
)
),
),
Padding(padding: const EdgeInsets.only(top: 0),
child:
QuillToolbar.basic(controller: _controller,
fontSizeValues: const {'Small': '7', 'Medium': '20.5', 'Large': '40'},
showAlignmentButtons: false ,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
boxShadow: [BoxShadow(
color: Colors.lightBlueAccent,
offset: Offset(5.0, 5.0) ,
blurRadius: 10.0,
spreadRadius: 2.0
),
BoxShadow(
color: Colors.white,
offset: Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0
)
]
),
child:
QuillEditor.basic(controller: _controller, readOnly: false),),
)
],
),
),
);Quando executamos o aplicativo, devemos obter a saída da tela como a captura de tela abaixo.
Nesta imagem, como você pode ver, podemos adicionar cores ao nosso texto. E com isso, podemos criar uma lista de texto atraente.
Nesta imagem, você pode ver que podemos alterar o estilo da fonte para determinado texto. e também para parágrafos específicos.
Código Fonte
import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
QuillController _controller = QuillController.basic();
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 20,left: 10,right: 10date,bottom: 20),
width: MediaQuery.of(context).size.width,
height: 80,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://user-images.githubusercontent.com/10923085/119221946-2de89000-baf2-11eb-8285-68168a78c658.png'),
fit: BoxFit.cover
)
),
),
Padding(padding: const EdgeInsets.only(top: 0),
child:
QuillToolbar.basic(controller: _controller),),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
boxShadow: [BoxShadow(
color: Colors.lightBlueAccent,
offset: Offset(5.0, 5.0) ,
blurRadius: 10.0,
spreadRadius: 2.0
),
BoxShadow(
color: Colors.white,
offset: Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0
)
]
),
child:
QuillEditor.basic(controller: _controller, readOnly: false),),
)
],
),
),
);
}
}
