В Flutter виджет «Контейнер» — это универсальный инструмент для создания пользовательских интерфейсов. Добавление границ к контейнерам — обычное требование в дизайне пользовательского интерфейса. В этой статье мы рассмотрим различные методы добавления верхней границы к контейнеру Flutter и предоставим примеры кода для каждого подхода. Давайте погрузимся!

Метод 1: BoxDecoration

Container(
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Colors.black,
        width: 2.0,
        style: BorderStyle.solid,
      ),
    ),
  ),
  child: // Your child widget goes here
)

Метод 2. Пользовательская граница

Container(
  child: Stack(
    children: [
      Positioned.fill(
        top: 0,
        child: Container(
          height: 2.0,
          color: Colors.black,
        ),
      ),
      // Your child widget goes here
    ],
  ),
)

Метод 3. Пользовательский разделитель

Container(
  child: Column(
    children: [
      Divider(
        color: Colors.black,
        thickness: 2.0,
      ),
      // Your child widget goes here
    ],
  ),
)

Метод 4: позиционированная граница

Container(
  child: Stack(
    children: [
      Positioned(
        left: 0,
        top: 0,
        right: 0,
        child: Container(
          height: 2.0,
          color: Colors.black,
        ),
      ),
      // Your child widget goes here
    ],
  ),
)

Метод 5. Пользовательский виджет

class TopBorderContainer extends StatelessWidget {
  final Widget child;
  const TopBorderContainer({required this.child});
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 2.0,
          color: Colors.black,
        ),
        child,
      ],
    );
  }
}
// Usage:
TopBorderContainer(
  child: // Your child widget goes here
)

В этой статье мы рассмотрели несколько способов добавления верхней границы к контейнеру Flutter. Приведенные примеры демонстрируют различные методы, включая BoxDecoration, пользовательские границы, разделители, позиционированные границы и даже создание собственного виджета. В зависимости от вашего конкретного варианта использования и дизайнерских предпочтений вы можете выбрать метод, который лучше всего соответствует вашим требованиям. Поэкспериментируйте с этими подходами и улучшите визуальную привлекательность пользовательского интерфейса Flutter!