Hello Everyone…!!!!. Today we start with an interesting topic that is used for rich text. Flutter Quill is a rich text editor and also a Quill component for Flutter.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Content
Introduction:
FlutterQuill is a rich text editor and a Quill component for Flutter. This library is a WYSIWYG editor built for the modern mobile platform, with web compatibility under development. This dependency is very useful for any editor app. We don’t need any other side for code for any texting editor.
Add Dependency:
To add the dependency first you have to open pubspec. ymal file and then add some dependencies,
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_quill: ^6.1.6We have to add the updated package of flutter_quill. Which is used as a Rich Text Editor in a flutter.
Configuration:
The Quill Toolbar class lets you customize which formatting options are available.
> Font Size:- Within the editor toolbar, a drop-down with font-sizing capabilities is available. This can be enabled or disabled with showFontSize. When enabled, the default font-size values can be modified via optional fontSizeValues. FontSizeValues accepts a Map<String, String> consisting of a String title for the font size and a String value for the font size. Example:
fontSizeValues: const {'Small': '7', 'Medium': '20.5', 'Large': '40'},>Font Family:- If you want to use the font family, you have to add the family to the assets folder and pass in fontfamilyValues.
>Custom Buttons:- You may add custom buttons to the end of the toolbar, via the custom buttons option, which is a List of QuillCustomButton.
QuillCustomButton(
icon:Icons.ac_unit,
onTap: () {
debugPrint('snowflake');
}>showAlignmentButtons:- In showAlignmentButtons, we have many properties like controller, iconSize, iconTheme, showLeftAlignment, showCenterAlignment, showRightAlignment, showJustifyAlignment, afterButtonPressed.
>Translation:- The package offers translations for the quill toolbar and editor, it will follow the system locale unless you set your own locale with:
QuillToolbar(locale: Locale('fr'), ...)
QuillEditor(locale: Locale('fr'), ...)Implementation:
In the implementation of Flutter Quill first, we have to create a Flutter project with the name flutter_quill_demo. There are two things in QuillController and Quill-editor. In Quill-controller.
QuillController _controller = QuillController.basic();here we define the controller as QuillController.basic(). In the Toolbar() we can pass many things like QuillController, toolbarIconAlignment, toolbarIconAlignment, showDividers, showBoldButton, showBoldButton, showUnderLineButton, showJustifyAlignment and many more.
And second is QuillEditor.basic(), in this editor we can type anything.
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),),
)
],
),
),
);When we run the application, we ought to get the screen’s output like the underneath screen capture.
In this picture, as you see we can add colors to our text. And by this, we can create an attractive text list.
In this picture, you can see that we can change the font style for particular text. and also for particular paragraphs.
GitHub Link:
Find the source code of the Flutter Quill:
GitHub – flutter-devs/flutter_quill_demo
You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
