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

Метод 1: использование Material Design Flutter
Среда Dart Flutter предоставляет богатый набор компонентов пользовательского интерфейса, включая виджет «Карточка», который предлагает встроенную поддержку контуров карточек. Вот пример того, как создать контур карточки с помощью Flutter:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Outline Example'),
        ),
        body: Center(
          child: Card(
            elevation: 4.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
              side: BorderSide(color: Colors.blue, width: 2.0),
            ),
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Text('This is a card outline.'),
            ),
          ),
        ),
      ),
    );
  }
}

Метод 2: использование пользовательской краски
Dart предоставляет виджет «CustomPaint», который позволяет создавать собственные элементы пользовательского интерфейса, рисуя на холсте. Вот пример создания контура карточки с помощью Custom Paint:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Outline Example'),
        ),
        body: Center(
          child: CustomPaint(
            painter: CardOutlinePainter(),
            child: Container(
              width: 200,
              height: 100,
              child: Center(
                child: Text('This is a card outline.'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
class CardOutlinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2.0
      ..style = PaintingStyle.stroke;
    final path = Path()
      ..addRRect(RRect.fromLTRBAndCorners(
        0.0,
        0.0,
        size.width,
        size.height,
        topLeft: Radius.circular(8.0),
        topRight: Radius.circular(8.0),
        bottomLeft: Radius.circular(8.0),
        bottomRight: Radius.circular(8.0),
      ));
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Метод 3: использование оформления контейнера
Другой метод создания контуров карточек — настройка оформления виджета «Контейнер». Вот пример:

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Outline Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.0),
              border: Border.all(color: Colors.blue, width: 2.0),
            ),
            child: Center(
              child: Text('This is a card outline.'),
            ),
          ),
        ),
      ),
    );
  }
}

Контуры карточек — эффективный способ повысить визуальную привлекательность пользовательского интерфейса вашего приложения. В этой статье мы рассмотрели три метода создания контуров карточек с помощью Dart, включая использование Flutter Material Design, Custom Paint и Container Decoration. Используя эти методы, вы сможете создавать потрясающие дизайны пользовательского интерфейса, которые очаруют ваших пользователей.