Невозможно установить цвет градиента для моей пользовательской границы фигуры в приложении флаттера - PullRequest
Новая
       27

Невозможно установить цвет градиента для моей пользовательской границы фигуры в приложении флаттера

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

Я создал пользовательскую фигуру с помощью класса CustomBorder и хочу установить цвет градиента для своей пользовательской формы. Пожалуйста, посмотрите приведенный ниже код, который я пробовал. 

 Container(
            decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.bottomLeft,
              end: Alignment.topRight,
              colors: [Colors.orangeAccent, Colors.orange]
            )
          ),
            child: Material(
              color: Colors.deepOrangeAccent,
              shape: CustomShapeBorder(),
              child: IconButton(
                icon: FaIcon(FontAwesomeIcons.instagram),
                iconSize: 30.0,
                padding: const EdgeInsets.only(top: 60.0, left: 30.0),
                color: Colors.white,
              ),
            ),
          )

Мой класс CustomShapeBorder (): 

lass CustomShapeBorder extends ShapeBorder {
  final double distanceFromWall = 12;
  final double controlPointDistanceFromWall = 5;


  @override
  // TODO: implement dimensions
  EdgeInsetsGeometry get dimensions => null;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    // TODO: implement getInnerPath
    return null;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    // TODO: implement getOuterPath
    return getClip(Size(260.0,180.0));
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
    // TODO: implement paint
  }

  @override
  ShapeBorder scale(double t) {
    // TODO: implement scale
    return null;
  }

  Path getClip(Size size) {
    Path clippedPath = new Path();

    clippedPath.lineTo(0, size.height);
    clippedPath.quadraticBezierTo(30, size.height + 10, size.width * 0.20, size.height - 50);
    clippedPath.quadraticBezierTo(70, size.height - 120, size.width * 0.40, size.height * 0.35);
    clippedPath.quadraticBezierTo(180, (size.height - (size.height* 0.6)), size.width - 40 , 32 );
    clippedPath.quadraticBezierTo(250, 0, size.width, 0);
    clippedPath.lineTo(size.width, 0);
    clippedPath.close();
    return clippedPath;
  }
}

Вывод: (Просто обратитесь к верхняя пользовательская форма, забудьте нижнюю) Изображение 1

Если я удаляю цвет : Colors.deepOrangeAccent из дочерний: Материал тогда вывод:

Изображение 2

...