GF Border

GF Border Info

Usage

The simple code of a basic GFBorder is as shown below.

Solid Border

Solid Border is basic border used for the many components. GF Border property [dashedLine] takes array of doubles like [2, 0] to display solid border.

Container(
  margin: EdgeInsets.symmetric(
      horizontal: 15, vertical: 15),
  child: GFBorder(
    color: Color(0xFF19CA4B),
    dashedLine: [2, 0],
    type: GFBorderType.rect,
    child: Image.asset(
      'assets image here',
      width: MediaQuery.of(context).size.width,
      fit: BoxFit.fitWidth,
    ),
  ),
),

Dashed Border

Dashed Border is customised border with dashed patterns used in UI designs. GF Border property [dashedLine] takes array of doubles like [4, 6] to display dashed border.

Container(
  margin: EdgeInsets.symmetric(
      horizontal: 15, vertical: 15),
  child: GFBorder(
    dashedLine: [4, 6],
    type: GFBorderType.rect,
    color: Color(0xFF19CA4B),
    child: Image.asset(
      'assets image here',
      width: MediaQuery.of(context).size.width,
      fit: BoxFit.fitWidth,
    ),
  ),
),

Dotted Border

Dotted Border is customised border with dotted patterns used in many UI designs. GF Border property [dashedLine] takes array of doubles like [2, 1] to display dotted border.

Container(
  margin: EdgeInsets.symmetric(
      horizontal: 15, vertical: 15),
  child: GFBorder(
    color: Color(0xFF19CA4B),
    dashedLine: [2, 1],
    type: GFBorderType.rect,
    child: Image.asset(
      'assets image here',
      width: MediaQuery.of(context).size.width,
      fit: BoxFit.fitWidth,
    ),
  ),
),

GF Border Types

GFBorderType.rect

GF Border property type takes GFBorderType.rect to display borders with no rounded corner.

Container(
  margin: EdgeInsets.symmetric(
      horizontal: 15, vertical: 15),
  child: GFBorder(
    color: Color(0xFF19CA4B),
    dashedLine: [2, 0],
    type: GFBorderType.rect,
    child: Container(
      height: 100,
      color: Color(0xFFE9FFEF),
    ),
  ),
),

GFBorderType.rRect

GF Border property type takes GFBorderType.rRect to display borders with rounded corner.

Container(
  margin: EdgeInsets.symmetric(
      horizontal: 15, vertical: 15),
  child: GFBorder(
    radius: Radius.circular(20),
    color: Color(0xFF19CA4B),
    dashedLine: [2, 0],
    type: GFBorderType.rRect,
    child: Container(
      height: 100,
      color: Color(0xFFE9FFEF),
    ),
  ),
),

GFBorderType.oval

GF Border property type takes GFBorderType.oval to display oval shape borders.

Container(
  width: 50,
  height: 60,
  child: GFBorder(
    type: GFBorderType.oval,
    dashedLine: [2, 0],
    color: Color(0xFF19CA4B),
    strokeWidth: 2,
    child: Center(child: Text('Oval Border')),
  ),
),

GFBorderType.circle

GF Border property type takes GFBorderType.circle to display circular shape borders.

Container(
  width: 100,
  height: 100,
  child: GFBorder(
    type: GFBorderType.circle,
    dashedLine: [4, 6],
    color: Color(0xFF19CA4B),
    strokeWidth: 2,
    child: Center(
        child: Text(
      'Circular Border',
      textAlign: TextAlign.center,
    )),
  ),
),

Custom Properties

Look and feel of the GFBorder can be customized using the GFBorder properties.

child	child of type [Widget] which can be any component or text, etc
padding	padding for [child] where in padding is given to the border types
strokeWidth	storkeWidth of type [double] which is used to define the thickness of the border
color	color of type [Color] or GFColor which is used to change the color of the border type
dashedLine	dashedLine of type [List<double>] which is used for the linear and simple dashed line of border
type	type of [GFBorderType] which is used to define the different types of borders ie, circle, Rect, RRect and oval
radius	radius of type [Radius] used to give a curved border only when the border type is RRect, in other cases radius will not work