BlockComponentConfiguration provides common configuration options for block components, controlling their padding, text styles, placeholders, and more.Overview The BlockComponentConfiguration class allows you to customize:
Block padding and margins
Text and placeholder styles
Text alignment
Indent padding
Class definition class BlockComponentConfiguration { const BlockComponentConfiguration ({ this .padding = _padding, this .indentPadding = _indentPadding, this .placeholderText = _placeholderText, this .textStyle = _textStyle, this .placeholderTextStyle = _placeholderTextStyle, this .blockSelectionAreaMargin = _blockSelectionAreaPadding, this .textAlign = _textAlign, }); final EdgeInsets Function ( Node node) padding; final EdgeInsets Function ( Node node, TextDirection textDirection) indentPadding; final BlockComponentTextStyleBuilder textStyle; final String Function ( Node node) placeholderText; final BlockComponentTextStyleBuilder placeholderTextStyle; final EdgeInsets Function ( Node node) blockSelectionAreaMargin; final TextAlign Function ( Node node) textAlign; }
Source: lib/src/editor/block_component/base_component/block_component_configuration.dart:10-73 Constructor BlockComponentConfiguration() Creates a new block component configuration.
padding
EdgeInsets Function(Node)
default: "EdgeInsets.symmetric(vertical: 4.0)"
Function that returns the padding for a block component based on the node. Works only for the block itself, not its children.
indentPadding
EdgeInsets Function(Node, TextDirection)
default: "EdgeInsets.only(left: 24.0) for LTR"
Function that returns the indent padding for blocks that need to be indented. Respects text direction (LTR/RTL).
textStyle
BlockComponentTextStyleBuilder
default: "TextStyle()"
Function that returns the text style for the block component.
placeholderText
String Function(Node)
default: "' '"
Function that returns the placeholder text when the block is empty.
placeholderTextStyle
BlockComponentTextStyleBuilder
default: "TextStyle(color: Colors.grey)"
Function that returns the text style for placeholder text. Inherits from textStyle.
blockSelectionAreaMargin
EdgeInsets Function(Node)
default: "EdgeInsets.symmetric(vertical: 0.0)"
Function that returns the margin for the block selection area.
textAlign
TextAlign Function(Node)
default: "TextAlign.start"
Function that returns the text alignment for blocks with text content (paragraph, heading, quote, lists).
Properties All properties are function-based to allow dynamic configuration based on the node:
padding final EdgeInsets Function ( Node node) padding;
Controls the vertical and horizontal padding around the block.
Default : EdgeInsets.symmetric(vertical: 4.0)Example :padding : (node) { if (node.type == HeadingBlockKeys .type) { return const EdgeInsets . symmetric (vertical : 30 ); } return const EdgeInsets . symmetric (vertical : 10 ); }
indentPadding final EdgeInsets Function ( Node node, TextDirection textDirection) indentPadding;
Controls the padding for indented blocks. Automatically adjusts for text direction.
Default :
LTR: EdgeInsets.only(left: 24.0)
RTL: EdgeInsets.only(right: 24.0)
textStyle final BlockComponentTextStyleBuilder textStyle;
Defines the text style for the block content.
Type definition :typedef BlockComponentTextStyleBuilder = TextStyle Function ( Node node, { TextSpan ? textSpan, });
Example :textStyle : (node, {textSpan}) { if (node.type == HeadingBlockKeys .type) { return const TextStyle ( fontSize : 24 , fontWeight : FontWeight .bold, ); } return const TextStyle (); }
placeholderText final String Function ( Node node) placeholderText;
Defines the placeholder text shown when a block is empty.
Default : ' ' (single space)Example :placeholderText : (node) { if (node.type == ParagraphBlockKeys .type) { return 'Type something...' ; } if (node.type == HeadingBlockKeys .type) { return 'Heading' ; } return ' ' ; }
placeholderTextStyle final BlockComponentTextStyleBuilder placeholderTextStyle;
Defines the text style for placeholder text.
Default : TextStyle(color: Colors.grey)blockSelectionAreaMargin final EdgeInsets Function ( Node node) blockSelectionAreaMargin;
Defines the margin around the block selection area.
Default : EdgeInsets.symmetric(vertical: 0.0)textAlign final TextAlign Function ( Node node) textAlign;
Defines the text alignment for text-based blocks.
Default : TextAlign.startExample :textAlign : (node) { final align = node.attributes[ 'align' ]; if (align == 'center' ) return TextAlign .center; if (align == 'right' ) return TextAlign .right; return TextAlign .start; }
Methods copyWith() Creates a copy of this configuration with some properties replaced.
BlockComponentConfiguration copyWith ({ EdgeInsets Function ( Node node) ? padding, BlockComponentTextStyleBuilder ? textStyle, String Function ( Node node) ? placeholderText, BlockComponentTextStyleBuilder ? placeholderTextStyle, EdgeInsets Function ( Node node) ? blockSelectionAreaMargin, TextAlign Function ( Node node) ? textAlign, EdgeInsets Function ( Node node, TextDirection textDirection) ? indentPadding, })
Returns : A new BlockComponentConfiguration with specified properties replaced.BlockComponentConfigurable mixin The BlockComponentConfigurable mixin provides convenient access to configuration properties:
mixin BlockComponentConfigurable < T extends StatefulWidget > on State < T > { BlockComponentConfiguration get configuration; Node get node; EdgeInsets get padding => configuration. padding (node); TextStyle textStyleWithTextSpan ({ TextSpan ? textSpan}) => configuration. textStyle (node, textSpan : textSpan); TextStyle placeholderTextStyleWithTextSpan ({ TextSpan ? textSpan}) => configuration. placeholderTextStyle (node, textSpan : textSpan); String get placeholderText => configuration. placeholderText (node); TextAlign get textAlign => configuration. textAlign (node); }
Source: lib/src/editor/block_component/base_component/block_component_configuration.dart:76-91 Usage examples Basic configuration final configuration = BlockComponentConfiguration ( padding : (node) => const EdgeInsets . symmetric (vertical : 8 ), textStyle : (node, {textSpan}) => const TextStyle (fontSize : 16 ), placeholderText : (node) => 'Type here...' , );
Node-specific configuration final configuration = BlockComponentConfiguration ( padding : (node) { if (node.type == HeadingBlockKeys .type) { return const EdgeInsets . symmetric (vertical : 20 ); } return const EdgeInsets . symmetric (vertical : 8 ); }, textStyle : (node, {textSpan}) { if (node.type == HeadingBlockKeys .type) { final level = node.attributes[ 'level' ] as int ? ?? 1 ; return TextStyle ( fontSize : 28 - (level * 2 ). toDouble (), fontWeight : FontWeight .bold, ); } return const TextStyle (); }, );
Using with a block builder final configuration = BlockComponentConfiguration ( padding : (node) => const EdgeInsets . symmetric (vertical : 12 ), textStyle : (node, {textSpan}) => const TextStyle (fontSize : 18 ), ); final builder = HeadingBlockComponentBuilder ( configuration : configuration, );
BlockComponentBuilder Build custom block components
Block Components Guide Learn how to customize block components