Almost there

forui/lib/forui.dart

@@ -15,3 +15,4 @@ export 'src/theme/themes.dart';
 // Widgets
 export 'src/widgets/box/box.dart';
 export 'src/widgets/card/card.dart';
+export 'src/widgets/separator/separator.dart';

forui/lib/src/theme/theme_data.dart

@@ -19,13 +19,21 @@ class FThemeData with Diagnosticable {
   /// The card style.
   final FCardStyle cardStyle;
 
+  /// The separator style.
+  final FSeparatorStyle separatorStyle;
+
+  /// The vertical separator style.
+  final FSeparatorStyle verticalSeparatorStyle;
+
   /// Creates a [FThemeData].
   FThemeData({
     required this.colorScheme,
     required this.font,
     required this.style,
     required this.boxStyle,
     required this.cardStyle,
+    required this.separatorStyle,
+    required this.verticalSeparatorStyle,
   });
 
   /// Creates a [FThemeData] that inherits the given arguments' properties.
@@ -35,7 +43,9 @@ class FThemeData with Diagnosticable {
     required this.style,
   }):
     boxStyle = FBoxStyle.inherit(colorScheme: colorScheme),
-    cardStyle = FCardStyle.inherit(colorScheme: colorScheme, style: style);
+    cardStyle = FCardStyle.inherit(colorScheme: colorScheme, style: style),
+    separatorStyle = FSeparatorStyle.inherit(colorScheme: colorScheme),
+    verticalSeparatorStyle = FSeparatorStyle.inheritVertical(colorScheme: colorScheme);
 
   /// Creates a copy of this [FThemeData] with the given properties replaced.
   FThemeData copyWith({
@@ -44,12 +54,16 @@ class FThemeData with Diagnosticable {
     FStyle? style,
     FBoxStyle? boxStyle,
     FCardStyle? cardStyle,
+    FSeparatorStyle? separatorStyle,
+    FSeparatorStyle? verticalSeparatorStyle,
   }) => FThemeData(
     colorScheme: colorScheme ?? this.colorScheme,
     font: font ?? this.font,
     style: style ?? this.style,
     boxStyle: boxStyle ?? this.boxStyle,
     cardStyle: cardStyle ?? this.cardStyle,
+    separatorStyle: separatorStyle ?? this.separatorStyle,
+    verticalSeparatorStyle: verticalSeparatorStyle ?? this.separatorStyle,
   );
 
   @override
@@ -60,7 +74,9 @@ class FThemeData with Diagnosticable {
       ..add(DiagnosticsProperty<FFont>('font', font, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty<FStyle>('style', style, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty<FBoxStyle>('boxStyle', boxStyle, level: DiagnosticLevel.debug))
-      ..add(DiagnosticsProperty<FCardStyle>('cardStyle', cardStyle, level: DiagnosticLevel.debug));
+      ..add(DiagnosticsProperty<FCardStyle>('cardStyle', cardStyle, level: DiagnosticLevel.debug))
+      ..add(DiagnosticsProperty<FSeparatorStyle>('separatorStyle', separatorStyle, level: DiagnosticLevel.debug))
+      ..add(DiagnosticsProperty<FSeparatorStyle>('verticalSeparatorStyle', verticalSeparatorStyle, level: DiagnosticLevel.debug));
   }
 
   @override
@@ -70,8 +86,18 @@ class FThemeData with Diagnosticable {
     font == other.font &&
     style == other.style &&
     boxStyle == other.boxStyle &&
-    cardStyle == other.cardStyle;
+    cardStyle == other.cardStyle &&
+    separatorStyle == other.separatorStyle &&
+    verticalSeparatorStyle == other.verticalSeparatorStyle;
 
   @override
-  int get hashCode => colorScheme.hashCode ^ font.hashCode ^ style.hashCode ^ boxStyle.hashCode ^ cardStyle.hashCode;
+  int get hashCode =>
+    colorScheme.hashCode ^
+    font.hashCode ^
+    style.hashCode ^
+    boxStyle.hashCode ^
+    cardStyle.hashCode ^
+    separatorStyle.hashCode ^
+    verticalSeparatorStyle.hashCode;
+
 }

forui/lib/src/widgets/separator/separator.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+import 'package:forui/forui.dart';
+
+final class FSeparator extends StatelessWidget {
+
+  final FSeparatorStyle? style;
+  final bool vertical;
+
+  FSeparator({this.style, this.vertical = false});
+
+  @override
+  Widget build(BuildContext context) {
+    final style = this.style ?? (vertical ? context.theme.verticalSeparatorStyle : context.theme.separatorStyle);
+    return Padding(
+      padding: style.padding,
+      child: vertical ?
+        SizedBox(
+          width: style.thickness,
+          child: ColoredBox(
+            color: style.color,
+          ),
+        ) :
+        SizedBox(
+          height: style.thickness,
+          child: ColoredBox(
+            color: style.color,
+          ),
+        ),
+    );
+  }
+
+}
+
+final class FSeparatorStyle with Diagnosticable {
+
+  final Color color;
+  final EdgeInsetsGeometry padding;
+  /// The thickness of
+  final double thickness;
+
+  FSeparatorStyle({required this.color, required this.padding, this.thickness = 2});
+
+  FSeparatorStyle.inherit({required FColorScheme colorScheme}):
+    color = colorScheme.secondary,
+    padding = const EdgeInsets.only(top: 5, bottom: 5),
+    thickness = 2;
+
+  FSeparatorStyle.inheritVertical({required FColorScheme colorScheme}):
+    color = colorScheme.secondary,
+    padding = const EdgeInsets.only(left: 5, right: 5),
+    thickness = 2;
+
+}