Drawing Horizontal Lines in Flutter: A Complete Guide

<div style="text-align: center;"> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDMwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPCEtLSBIb3Jpem9udGFsIExpbmUgRXhhbXBsZSAtLT4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI0ZGRiIgc3Ryb2tlPSIjMDAwIi8+CiAgPGxpbmUgeDE9IjUwIiB5MT0iMTAwIiB4Mj0iMjUwIiB5Mj0iMTAwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=" alt="Horizontal Line Example" width="300" /> </div>

Horizontal lines are essential UI elements in Flutter applications. This guide covers various techniques to create horizontal lines, from simple dividers to custom painted lines with advanced styling options.

Basic Horizontal Lines

1. Using Divider Widget

Divider(
  color: Colors.grey,
  thickness: 1,
  height: 20,
)

2. Using Container

Container(
  height: 1,
  color: Colors.grey,
  margin: EdgeInsets.symmetric(vertical: 10),
)

3. Using SizedBox with DecoratedBox

SizedBox(
  height: 1,
  child: DecoratedBox(
    decoration: BoxDecoration(
      color: Colors.grey,
    ),
  ),
)

Advanced Horizontal Lines

1. Custom Painted Line

CustomPaint(
  size: Size(double.infinity, 2),
  painter: LinePainter(
    color: Colors.blue,
    strokeWidth: 2,
  ),
)

2. Dashed Line

CustomPaint(
  size: Size(double.infinity, 2),
  painter: DashedLinePainter(
    color: Colors.grey,
    strokeWidth: 1,
    dashWidth: 5,
    dashSpace: 3,
  ),
)

3. Gradient Line

Container(
  height: 2,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.green],
    ),
  ),
)

Special Cases

1. Animated Line

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  height: isExpanded ? 2 : 1,
  color: Colors.blue,
)

2. Interactive Line

GestureDetector(
  onTap: () {
    // Handle tap
  },
  child: Container(
    height: 2,
    color: Colors.blue,
  ),
)

3. Responsive Line

LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth,
      height: 1,
      color: Colors.grey,
    );
  },
)

Best Practices

1. Performance

• Use appropriate widgets for the use case
• Avoid unnecessary rebuilds
• Consider using const constructors
• Implement proper caching

2. Accessibility

• Ensure sufficient contrast
• Consider touch targets
• Provide semantic labels
• Support screen readers

3. Design

• Maintain consistent styling
• Use appropriate spacing
• Consider visual hierarchy
• Follow material design guidelines

Common Issues and Solutions

1. Line Overflow

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Container(
    width: 300,
    height: 1,
    color: Colors.grey,
  ),
)

2. Responsive Issues

MediaQuery.of(context).size.width * 0.8

3. Animation Performance

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  // ... other properties
)

Conclusion

Horizontal lines are versatile UI elements in Flutter. Remember to:

• Choose the right implementation for your needs
• Consider performance implications
• Ensure accessibility
• Follow design guidelines
• Test across different devices

Happy coding!