Add decoration to customize editor, issue #2

example/lib/main.dart

@@ -77,6 +77,25 @@ class _MyHomePageState extends State<MyHomePage> {
                   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;

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<FontOptionSwitch> {
       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),
       ),
     );
   }

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<TextStyleModel>(
       builder: (context, model, child) => GestureDetector(
         onTapUp: (_) => _onChangeAlignment(model),
-        child: Icon(_mapTextAlignToIcon(model.textAlign), color: Colors.white),
+        child: _mapTextAlignToWidget(model.textAlign),
       ),
     );
   }

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<String> 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<TextEditor> {
   TextStyleModel _textStyleModel;
   FontOptionModel _fontOptionModel;
+  Widget _doneButton;
 
   @override
   void initState() {
@@ -77,6 +82,11 @@ class _TextEditorState extends State<TextEditor> {
     );
     _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<TextEditor> {
                   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<TextEditor> {
                     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<TextEditor> {
     );
   }
 }
+
+/// 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,
+  });
+}