blob: b2bc66c2387e1b5ce4fae4b3eee7ca0b8885f6f9 [file] [log] [blame]
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'basic_types.dart';
import 'border_radius.dart';
import 'borders.dart';
/// The shape to use when rendering a [Border] or [BoxDecoration].
///
/// Consider using [ShapeBorder] subclasses directly (with [ShapeDecoration]),
/// instead of using [BoxShape] and [Border], if the shapes will need to be
/// interpolated or animated. The [Border] class cannot interpolate between
/// different shapes.
enum BoxShape {
/// An axis-aligned, 2D rectangle. May have rounded corners (described by a
/// [BorderRadius]). The edges of the rectangle will match the edges of the box
/// into which the [Border] or [BoxDecoration] is painted.
///
/// See also:
///
/// * [RoundedRectangleBorder], the equivalent [ShapeBorder].
rectangle,
/// A circle centered in the middle of the box into which the [Border] or
/// [BoxDecoration] is painted. The diameter of the circle is the shortest
/// dimension of the box, either the width or the height, such that the circle
/// touches the edges of the box.
///
/// See also:
///
/// * [CircleBorder], the equivalent [ShapeBorder].
circle,
// Don't add more, instead create a new ShapeBorder.
}
/// Base class for box borders that can paint as rectangles, circles, or rounded
/// rectangles.
///
/// This class is extended by [Border] and [BorderDirectional] to provide
/// concrete versions of four-sided borders using different conventions for
/// specifying the sides.
///
/// The only API difference that this class introduces over [ShapeBorder] is
/// that its [paint] method takes additional arguments.
///
/// See also:
///
/// * [BorderSide], which is used to describe each side of the box.
/// * [RoundedRectangleBorder], another way of describing a box's border.
/// * [CircleBorder], another way of describing a circle border.
/// * [BoxDecoration], which uses a [BoxBorder] to describe its borders.
abstract class BoxBorder extends ShapeBorder {
/// Abstract const constructor. This constructor enables subclasses to provide
/// const constructors so that they can be used in const expressions.
const BoxBorder();
/// The top side of this border.
///
/// This getter is available on both [Border] and [BorderDirectional]. If
/// [isUniform] is true, then this is the same style as all the other sides.
BorderSide get top;
/// The bottom side of this border.
BorderSide get bottom;
}
/// A border of a box, comprised of four sides: top, right, bottom, left.
///
/// The sides are represented by [BorderSide] objects.
///
/// {@tool sample}
///
/// All four borders the same, two-pixel wide solid white:
///
/// ```dart
/// Border.all(width: 2.0, color: const Color(0xFFFFFFFF))
/// ```
/// {@end-tool}
/// {@tool sample}
///
/// The border for a material design divider:
///
/// ```dart
/// Border(bottom: BorderSide(color: Theme.of(context).dividerColor))
/// ```
/// {@end-tool}
/// {@tool sample}
///
/// A 1990s-era "OK" button:
///
/// ```dart
/// Container(
/// decoration: const 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(
/// padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 2.0),
/// decoration: const 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: const Text(
/// 'OK',
/// textAlign: TextAlign.center,
/// style: TextStyle(color: Color(0xFF000000))
/// ),
/// ),
/// )
/// ```
/// {@end-tool}
///
/// See also:
///
/// * [BoxDecoration], which uses this class to describe its edge decoration.
/// * [BorderSide], which is used to describe each side of the box.
/// * [Theme], from the material layer, which can be queried to obtain appropriate colors
/// to use for borders in a material app, as shown in the "divider" sample above.
class Border extends BoxBorder {
/// Creates a border.
///
/// All the sides of the border default to [BorderSide.none].
///
/// The arguments must not be null.
const Border({
this.top = BorderSide.none,
this.right = BorderSide.none,
this.bottom = BorderSide.none,
this.left = BorderSide.none,
}) : assert(top != null),
assert(right != null),
assert(bottom != null),
assert(left != null);
/// Creates a border whose sides are all the same.
///
/// The `side` argument must not be null.
const Border.fromBorderSide(BorderSide side)
: assert(side != null),
top = side,
right = side,
bottom = side,
left = side;
/// A uniform border with all sides the same color and width.
///
/// The sides default to black solid borders, one logical pixel wide.
factory Border.all({
Color color = const Color(0xFF000000),
double width = 1.0,
BorderStyle style = BorderStyle.solid,
}) {
final BorderSide side =
BorderSide(color: color, width: width, style: style);
return Border.fromBorderSide(side);
}
@override
final BorderSide top;
/// The right side of this border.
final BorderSide right;
@override
final BorderSide bottom;
/// The left side of this border.
final BorderSide left;
}
/// A border of a box, comprised of four sides, the lateral sides of which
/// flip over based on the reading direction.
///
/// The lateral sides are called [start] and [end]. When painted in
/// left-to-right environments, the [start] side will be painted on the left and
/// the [end] side on the right; in right-to-left environments, it is the
/// reverse. The other two sides are [top] and [bottom].
///
/// The sides are represented by [BorderSide] objects.
///
/// If the [start] and [end] sides are the same, then it is slightly more
/// efficient to use a [Border] object rather than a [BorderDirectional] object.
///
/// See also:
///
/// * [BoxDecoration], which uses this class to describe its edge decoration.
/// * [BorderSide], which is used to describe each side of the box.
/// * [Theme], from the material layer, which can be queried to obtain appropriate colors
/// to use for borders in a material app, as shown in the "divider" sample above.
class BorderDirectional extends BoxBorder {
/// Creates a border.
///
/// The [start] and [end] sides represent the horizontal sides; the start side
/// is on the leading edge given the reading direction, and the end side is on
/// the trailing edge. They are resolved during [paint].
///
/// All the sides of the border default to [BorderSide.none].
///
/// The arguments must not be null.
const BorderDirectional({
this.top = BorderSide.none,
this.start = BorderSide.none,
this.end = BorderSide.none,
this.bottom = BorderSide.none,
}) : assert(top != null),
assert(start != null),
assert(end != null),
assert(bottom != null);
@override
final BorderSide top;
/// The start side of this border.
///
/// This is the side on the left in left-to-right text and on the right in
/// right-to-left text.
///
/// See also:
///
/// * [TextDirection], which is used to describe the reading direction.
final BorderSide start;
/// The end side of this border.
///
/// This is the side on the right in left-to-right text and on the left in
/// right-to-left text.
///
/// See also:
///
/// * [TextDirection], which is used to describe the reading direction.
final BorderSide end;
@override
final BorderSide bottom;
}