multi_border

Description:

multi border

A custom decoration for quickly adding multiple borders of varying colors and widths to your widgets.

Features #

Set each border's color.
Set each border's width.
Set a border radius for rectangular borders.
Rectangular or circular borders.
MultiBorderDecoration.evenBorders() constructor simplifies creating borders of even widths.

Getting started #
Import:
import 'package:multi_border/multi_border.dart';
copied to clipboard
Add a MultiBorderDecoration to your Container widget:
Container(
decoration: MultiBorderDecoration(
borderSides: [
BorderSide(color: Colors.blue.shade100, width: 8),
BorderSide(color: Colors.blue.shade200, width: 12),
BorderSide(color: Colors.blue.shade300, width: 16)
],
),
child: const Text('Wrap me with colorful borders'),
);
copied to clipboard
Or, use the MultiBorderDecoration.evenBorders() constructor to create borders of equal width.

This will create a border for each color in [borderColors] of width [width].

Container(
decoration: MultiBorderDecoration.evenBorders(
width: 8,
borderColors: [
Colors.blue.shade100,
Colors.blue.shade200,
Colors.blue.shade300,
],
),
child: const Text('Wrap me with colorful borders'),
);
copied to clipboard
Examples #
Sharp rectangle with even borders: #

Container(
decoration: MultiBorderDecoration.evenBorders(
width: 8,
borderColors: const [
Color(0xFFF14A42),
Color(0xFFF27D3B),
Color(0xFFF2A83A),
Color(0xFFF8C43F),
],
),
child: Container(
width: 100,
height: 100,
color: const Color(0xFF4B3D2F),
child: const Icon(Icons.thumb_up, color: Color(0xFFCEC1B6)),
),
);
copied to clipboard
Rounded rectangle with even borders: #

Container(
clipBehavior: Clip.hardEdge,
decoration: MultiBorderDecoration.evenBorders(
width: 8,
innerRadius: BorderRadius.circular(8),
borderColors: const [
Color(0xFFF14A42),
Color(0xFFF27D3B),
Color(0xFFF2A83A),
Color(0xFFF8C43F),
],
),
child: Container(
width: 100,
height: 100,
color: const Color(0xFF4B3D2F),
child: const Icon(Icons.thumb_up, color: Color(0xFFCEC1B6)),
),
);
copied to clipboard
Rounded rectangle with varying width borders: #

Container(
clipBehavior: Clip.hardEdge,
decoration: MultiBorderDecoration(
innerRadius: const BorderRadius.only(
topLeft: Radius.circular(16),
bottomRight: Radius.circular(16),
),
borderSides: const [
BorderSide(color: Color(0xFFF14A42), width: 4),
BorderSide(color: Color(0xFFF27D3B), width: 8),
BorderSide(color: Color(0xFFF2A83A), width: 12),
BorderSide(color: Color(0xFFF8C43F), width: 16),
],
),
child: Container(
width: 100,
height: 100,
color: const Color(0xFF4B3D2F),
child: const Icon(Icons.thumb_up, color: Color(0xFFCEC1B6)),
),
);
copied to clipboard
Circle with even borders: #

Container(
clipBehavior: Clip.antiAlias,
decoration: MultiBorderDecoration.evenBorders(
shape: BoxShape.circle,
width: 8,
borderColors: const [
Color(0xFFF14A42),
Color(0xFFF27D3B),
Color(0xFFF2A83A),
Color(0xFFF8C43F),
],
),
child: Container(
width: 100,
height: 100,
color: const Color(0xFF4B3D2F),
child: const Icon(Icons.thumb_up, color: Color(0xFFCEC1B6)),
),
);
copied to clipboard
Circle with varying width borders: #

Container(
clipBehavior: Clip.antiAlias,
decoration: MultiBorderDecoration(
shape: BoxShape.circle,
borderSides: const [
BorderSide(color: Color(0xFFF14A42), width: 4),
BorderSide(color: Color(0xFFF27D3B), width: 8),
BorderSide(color: Color(0xFFF2A83A), width: 12),
BorderSide(color: Color(0xFFF8C43F), width: 16),
],
),
child: Container(
width: 100,
height: 100,
color: const Color(0xFF4B3D2F),
child: const Icon(Icons.thumb_up, color: Color(0xFFCEC1B6)),
),
);
copied to clipboard