mydomain
No ADS
No ADS

Flutter Border Tutorial with Examples

  1. Border
  2. Border.all constructor
  3. Border.fromBorderSide constructor
  4. Border.symmetric constructor

1. Border

No ADS
Border creates a border for a box, including 4 edges: top, bottom, left, right.
Border constructor
const Border (
    {BorderSide top: BorderSide.none,
    BorderSide right: BorderSide.none,
    BorderSide bottom: BorderSide.none,
    BorderSide left: BorderSide.none}
)
  • Flutter BorderSide
Example:
(ex1)
Container(
    width: 250,
    height: 200,
    decoration: BoxDecoration(
      border: Border(
        top: BorderSide(width: 15.0, color: Color(0xFFFF7F7F7F)),
        left: BorderSide(width: 20.0, color: Color(0xFFFFDFDFDF)),
        right: BorderSide(width: 5.0, color: Color(0xFFFF000000)),
        bottom: BorderSide(width: 10.0, color: Color(0xFFFF000000)),
      ),
    )
)
Example: Use 2 nested Container(s) and Border to simulate a button:
(ex3)
Container(
  decoration:  BoxDecoration(
    border: Border(
      top: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
      left: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
      right: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
      bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
    ),
  ),
  child: Container(
    width: 200,
    height: 50,
    padding:  EdgeInsets.symmetric(horizontal: 20.0, vertical: 2.0),
    alignment: Alignment.center,
    decoration: BoxDecoration(
      border: Border(
        top: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),
        left: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),
        right: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)),
        bottom: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)),
      ),
      color: Color(0xFFBFBFBF),
    ),
    child: Text(
        'OK',
        textAlign: TextAlign.center,
        style: TextStyle(color: Color(0xFF000000))
    ),
  ),
)

2. Border.all constructor

No ADS
Border.all constructor creates a consistent border (same on all edges) from color, width, and style parameters.
Border.all constructor
Border.all(
  {Color color: const Color(0xFF000000),
  double width: 1.0,
  BorderStyle style: BorderStyle.solid}
)
Example:
Container(
    width: 250,
    height: 100,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      border: Border.all(
          width: 5.0,
          color: Color(0xFFFF7F7F7F)
      ),
    ),
    child: Text("Flutter")
)

3. Border.fromBorderSide constructor

Border.fromBorderSide constructor creates a consistent border (same for all edges) with parameters given by the BorderSide object.
Border.fromBorderSide constructor
const Border.fromBorderSide(
    BorderSide side
)
Example:
Container(
    width: 250,
    height: 100,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      border: Border.fromBorderSide(
          BorderSide (
              width: 5,
              color: Colors.green,
              style: BorderStyle.solid
          )
      ),
    ),
    child: Text("Flutter")
)

4. Border.symmetric constructor

No ADS
Border.symmetric constructor creates a vertically and horizontally symmetrical border.
vertical parameter is applied to left and right edges. horizontal parameter is applied to top and bottom edges. The default values for the vertical and horizontal parameters are BorderSide.none and not null.
Border.symmetric constructor
const Border.symmetric(
    {BorderSide vertical: BorderSide.none,
    BorderSide horizontal: BorderSide.none}
)
Example:
Container(
    width: 250,
    height: 100,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      border: Border.symmetric (
        vertical: BorderSide (
            width: 5,
            color: Colors.green,
            style: BorderStyle.solid
        ),
        horizontal:  BorderSide (
            width: 3,
            color: Colors.blue,
            style: BorderStyle.solid
        ),
      ),
    ),
    child: Text("Flutter")
)
No ADS

Flutter Programming Tutorials

Show More
No ADS