Как спроектировать этот нестандартный ящик во флаттере - PullRequest
Новая
       33

Как спроектировать этот нестандартный ящик во флаттере

0 голосов
/ 24 марта 2020

Эй, я пытался несколькими способами создать следующий дизайн Drawer:

Drawer Design

Когда я использовал OverflowBox по сравнению с ClipOval, эта конструкция была как-то Результат: 

ClipOval(
  child: OverflowBox(
    maxHeight: double.infinity,
    maxWidth: double.infinity,
    child: DecoratedBox(
      decoration: BoxDecoration(
        color: AppColors.backgroundColor
      ),
      child: Container(
        height: AppConstants.screenHeight,
        width: AppConstants.screenWidth,
      ),
    ),
  ),
);

Current Design Result

Как я могу получить вышеуказанный дизайн. Я знаю, что это должно быть сделано наверняка с помощью переполнения и некоторого типа машинки для стрижки, но почему-то я не могу заставить это работать.

1 Ответ

1 голос
/ 24 марта 2020

Я бы сделал это с прозрачным ящиком, на котором вы рисуете свою фигуру с CustomPainter. Сделайте ящик прозрачным, используя тему и canvasColor: Colors.transparent Важно : установите elevation ящика на 0, в противном случае вы увидите край прозрачного ящика. 

Scaffold(
  appBar: AppBar(title: Text(title)),
  body: Center(child: Text('Custom Drawer Shape')),
  drawer: Theme(
    data: Theme.of(context).copyWith(
      canvasColor: Colors.transparent,  // set the Color of the drawer transparent; we'll paint above it with the shape
    ),
    child: Drawer(
      elevation: 0,   // set elevation to 0, otherwise you see the transparent drawer a little bit
      child: Container(
        padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
        child: CustomPaint(
          painter: DrawerPainter(color: Colors.white), // this is your custom painter
          child: ListView(
            padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
            children: <Widget>[
              // Add your menu e.g. with ListTile
            ],
          ),
        ),
      ),
    ),
  ),
);

// Class which draws the custom shape
class DrawerPainter extends CustomPainter {
  final Color color;
  DrawerPainter({this.color = Colors.black});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = color
      ..strokeWidth = 3
      ..style = PaintingStyle.fill;
    canvas.drawPath(getShapePath(size.width, size.height), paint);
  }

  // This is the path of the shape we want to draw
  Path getShapePath(double x, double y) {
    return Path()
      ..moveTo(0, 0)
      ..lineTo(x / 2, 0)
      ..quadraticBezierTo(x, y / 2, x / 2, y)
      ..lineTo(0, y);
  }

  @override
  bool shouldRepaint(DrawerPainter oldDelegate) {
    return oldDelegate.color != color;
  }
}
...