From 036afc009f455855467a7e47c60c43e9921c9588 Mon Sep 17 00:00:00 2001 From: Mehdi Zarepour Date: Fri, 27 Nov 2020 11:17:01 +0330 Subject: [PATCH] Add `decoration` to customize editor, issue #2 --- example/lib/main.dart | 19 +++++++ lib/src/widget/font_option_switch.dart | 13 ++++- lib/src/widget/text_alignment.dart | 22 +++++++-- lib/text_editor.dart | 68 +++++++++++++++++++++++--- 4 files changed, 107 insertions(+), 15 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index 69c58c8..960996d 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -77,6 +77,25 @@ class _MyHomePageState extends State { text: text, textStyle: textStyle, textAlingment: textAlign, + decoration: EditorDecoration( + doneButton: Icon(Icons.close, color: Colors.white), + fontFamily: Icon(Icons.title, color: Colors.white), + colorPalette: Icon(Icons.palette, color: Colors.white), + alignment: AlignmentDecoration( + left: Text( + 'left', + style: TextStyle(color: Colors.white), + ), + center: Text( + 'center', + style: TextStyle(color: Colors.white), + ), + right: Text( + 'right', + style: TextStyle(color: Colors.white), + ), + ), + ), onEditCompleted: (style, align, text) { setState(() { _text = text; diff --git a/lib/src/widget/font_option_switch.dart b/lib/src/widget/font_option_switch.dart index fa9ac5a..a9d1550 100644 --- a/lib/src/widget/font_option_switch.dart +++ b/lib/src/widget/font_option_switch.dart @@ -3,6 +3,11 @@ import 'package:provider/provider.dart'; import 'package:text_editor/src/font_option_model.dart'; class FontOptionSwitch extends StatefulWidget { + final Widget fontFamilySwitch; + final Widget colorPaletteSwitch; + + FontOptionSwitch({this.fontFamilySwitch, this.colorPaletteSwitch}); + @override _FontOptionSwitch createState() => _FontOptionSwitch(); } @@ -14,8 +19,12 @@ class _FontOptionSwitch extends State { builder: (context, model, child) => GestureDetector( onTap: () => model.changeFontOptionStatus(model.status), child: model.status == FontOptionStatus.fontFamily - ? _ColorOption() - : _FontOption(), + ? (widget.colorPaletteSwitch == null + ? _ColorOption() + : widget.colorPaletteSwitch) + : (widget.fontFamilySwitch == null + ? _FontOption() + : widget.fontFamilySwitch), ), ); } diff --git a/lib/src/widget/text_alignment.dart b/lib/src/widget/text_alignment.dart index bc382ca..e2f5dbc 100644 --- a/lib/src/widget/text_alignment.dart +++ b/lib/src/widget/text_alignment.dart @@ -3,6 +3,12 @@ import 'package:provider/provider.dart'; import 'package:text_editor/src/text_style_model.dart'; class TextAlignment extends StatelessWidget { + final Widget left; + final Widget center; + final Widget right; + + TextAlignment({this.left, this.center, this.right}); + void _onChangeAlignment(TextStyleModel textStyleModel) { switch (textStyleModel.textAlign) { case TextAlign.left: @@ -16,14 +22,20 @@ class TextAlignment extends StatelessWidget { } } - IconData _mapTextAlignToIcon(TextAlign align) { + Widget _mapTextAlignToWidget(TextAlign align) { switch (align) { case TextAlign.left: - return Icons.format_align_left; + return left == null + ? Icon(Icons.format_align_left, color: Colors.white) + : left; case TextAlign.center: - return Icons.format_align_center; + return center == null + ? Icon(Icons.format_align_center, color: Colors.white) + : center; default: - return Icons.format_align_right; + return right == null + ? Icon(Icons.format_align_right, color: Colors.white) + : right; } } @@ -32,7 +44,7 @@ class TextAlignment extends StatelessWidget { return Consumer( builder: (context, model, child) => GestureDetector( onTapUp: (_) => _onChangeAlignment(model), - child: Icon(_mapTextAlignToIcon(model.textAlign), color: Colors.white), + child: _mapTextAlignToWidget(model.textAlign), ), ); } diff --git a/lib/text_editor.dart b/lib/text_editor.dart index b868cca..1a896c5 100644 --- a/lib/text_editor.dart +++ b/lib/text_editor.dart @@ -37,12 +37,15 @@ class TextEditor extends StatefulWidget { /// Widget's background color final Color backgroundColor; - // Editor's font families + /// Editor's font families final List fonts; - // Editor's default text + /// Editor's default text final String text; + /// Decoration to customize the editor + final EditorDecoration decoration; + /// Create a [TextEditor] widget /// /// [fonts] list of font families that you want to use in editor. @@ -58,6 +61,7 @@ class TextEditor extends StatefulWidget { this.onTextAlignChanged, this.onTextStyleChanged, this.onTextChanged, + this.decoration, }); @override @@ -67,6 +71,7 @@ class TextEditor extends StatefulWidget { class _TextEditorState extends State { TextStyleModel _textStyleModel; FontOptionModel _fontOptionModel; + Widget _doneButton; @override void initState() { @@ -77,6 +82,11 @@ class _TextEditorState extends State { ); _fontOptionModel = FontOptionModel(_textStyleModel, widget.fonts); + // Initialize decorator + _doneButton = widget.decoration?.doneButton == null + ? Text('Done', style: TextStyle(color: Colors.white)) + : widget.decoration.doneButton; + super.initState(); } @@ -108,9 +118,16 @@ class _TextEditorState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - TextAlignment(), + TextAlignment( + left: widget.decoration?.alignment?.left, + center: widget.decoration?.alignment?.center, + right: widget.decoration?.alignment?.right, + ), SizedBox(width: 20), - FontOptionSwitch(), + FontOptionSwitch( + fontFamilySwitch: widget.decoration?.fontFamily, + colorPaletteSwitch: widget.decoration?.colorPalette, + ), // TODO: Add text background color // SizedBox(width: 20), // TextBackgroundColor(), @@ -122,10 +139,7 @@ class _TextEditorState extends State { alignment: Alignment.centerRight, child: GestureDetector( onTap: _editCompleteHandler, - child: Text( - 'Done', - style: TextStyle(color: Colors.white), - ), + child: _doneButton, ), ), ), @@ -175,3 +189,41 @@ class _TextEditorState extends State { ); } } + +/// Decoration to customize text alignment widgets' design. +/// +/// Pass your custom widget to `left`, `right` and `center` to customize their design +class AlignmentDecoration { + /// Left alignment widget + final Widget left; + + /// Center alignment widget + final Widget center; + + /// Right alignment widget + final Widget right; + + AlignmentDecoration({this.left, this.center, this.right}); +} + +/// Decoration to customize the editor +/// +/// By using this class, you can customize the text editor's design +class EditorDecoration { + /// Done button widget + final Widget doneButton; + final AlignmentDecoration alignment; + + /// Font family switch widget + final Widget fontFamily; + + /// Color palette switch widget + final Widget colorPalette; + + EditorDecoration({ + this.doneButton, + this.alignment, + this.fontFamily, + this.colorPalette, + }); +}