تصویر هلالی شکل در فلاتر

- 4 ماه پیش
توسط ابر سیاه آپدیت شد
ابر سیاه ( 2204 تجربه )
4 ماه پیش

سلام دوستان
میخوام صفحه ای مشابه تصویر زیر بسازم

Image of Page

مشکلم اینجاست که نمی تونم تصویر هلالی شکل رو در بیارم لطفا راهنمایی کنید
خیلی برام مهم هست

تشکر

بهترین پاسخ انتخاب شده توسط ابر سیاه
محمد حیدری
4 ماه پیش

سلام شما در گام اول یه stack بساز و اولین عنصرش رو یه کلاس بذار بنام مثلا test . بعدش یه کلاس جدید به همون نام تعریف کن و کد های زیر رو داخلش بذر . شما در واقع از کلاس CustomClipper باید استفاده کنی . موفق باشی
'
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
class TEST extends StatelessWidget {
TEST(this.image);
final Image image;
@override
Widget build(BuildContext context) {
return new ClipPath(

  clipper: new DiagonalClipper(),
  child: new DecoratedBox(
    position: DecorationPosition.foreground,
    decoration: new BoxDecoration(
      gradient: new LinearGradient(
          colors: [Color(0xFF17b0e6), Color(0Xff0274bc)],
          begin: const FractionalOffset(1, 0.0),
          end: const FractionalOffset(1, 1),
          stops: [0.0, 1.0],
          tileMode: TileMode.clamp
      ),
    ),
    child: image,
  ),

);

}
}

class DiagonalClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = new Path();
path.lineTo(0.0, size.height - 30);

var firstControlPoint = new Offset(size.width / 4, size.height);
var firstPoint = new Offset(size.width / 2, size.height);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
    firstPoint.dx, firstPoint.dy);

var secondControlPoint =
new Offset(size.width - (size.width / 4), size.height);
var secondPoint = new Offset(size.width, size.height - 30);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
    secondPoint.dx, secondPoint.dy);

path.lineTo(size.width, 0.0);
path.close();

return path;

}

@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
'

محمد حیدری ( 855 تجربه )
4 ماه پیش

سلام شما در گام اول یه stack بساز و اولین عنصرش رو یه کلاس بذار بنام مثلا test . بعدش یه کلاس جدید به همون نام تعریف کن و کد های زیر رو داخلش بذر . شما در واقع از کلاس CustomClipper باید استفاده کنی . موفق باشی
'
import 'package:flutter/material.dart';
import 'package:meta/meta.dart';
class TEST extends StatelessWidget {
TEST(this.image);
final Image image;
@override
Widget build(BuildContext context) {
return new ClipPath(

  clipper: new DiagonalClipper(),
  child: new DecoratedBox(
    position: DecorationPosition.foreground,
    decoration: new BoxDecoration(
      gradient: new LinearGradient(
          colors: [Color(0xFF17b0e6), Color(0Xff0274bc)],
          begin: const FractionalOffset(1, 0.0),
          end: const FractionalOffset(1, 1),
          stops: [0.0, 1.0],
          tileMode: TileMode.clamp
      ),
    ),
    child: image,
  ),

);

}
}

class DiagonalClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = new Path();
path.lineTo(0.0, size.height - 30);

var firstControlPoint = new Offset(size.width / 4, size.height);
var firstPoint = new Offset(size.width / 2, size.height);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
    firstPoint.dx, firstPoint.dy);

var secondControlPoint =
new Offset(size.width - (size.width / 4), size.height);
var secondPoint = new Offset(size.width, size.height - 30);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
    secondPoint.dx, secondPoint.dy);

path.lineTo(size.width, 0.0);
path.close();

return path;

}

@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
'

محمد حیدری ( 855 تجربه )
4 ماه پیش

نمیدونم چرا به هم ریخت شکل کدها . اگه مشکلت حل نشد بگو برات کدها رو بفرستم

ابر سیاه ( 2204 تجربه )
4 ماه پیش

@irse247
سلام داداش ممنون

لطفا لطف کن برام ایمیلش کن
abresiahjj@gmail.com

بسیار تشکر

برای ارسال پاسخ باید وارد سایت شوید