Я действительно новичок во Flutter, я пытаюсь воспроизвести дизайн на этом изображении См. Образец изображения прямо здесь Моя проблема заключается в том, как сделать нижнюю часть изображения изогнутой, как на фото... Ваша помощь будет высоко оценен.
вы можете использовать этот код
Container(
height: 200.0,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.vertical(
bottom: Radius.elliptical(
MediaQuery.of(context).size.width, 100.0)),
),
),
или вы можете использовать CustomPainter
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ProfileScreen(),
);
}
}
// class to draw the profile screen
class ProfileScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: const Color(0xffea5d49),
leading: Icon(
Icons.menu,
color: Colors.white,
),
),
body: Stack(
alignment: Alignment.center,
children: [
CustomPaint(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
painter: HeaderCurvedContainer(),
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Text(
'Profile',
style: TextStyle(
fontSize: 35.0,
letterSpacing: 1.5,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
),
Container(
width: MediaQuery.of(context).size.width / 2,
height: MediaQuery.of(context).size.width / 2,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
// image: DecorationImage(
// image: AssetImage(null),
// fit: BoxFit.cover,
// ),
),
),
],
),
],
),
),
);
}
}
// CustomPainter class to for the header curved-container
class HeaderCurvedContainer extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..color = const Color(0xffea5d49);
Path path = Path()
..relativeLineTo(0, 150)
..quadraticBezierTo(size.width / 2, 250.0, size.width, 150)
..relativeLineTo(0, -150)
..close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
Вы можете попробовать класс CustomClipper
ClipPath(
clipper: CurveImage(),
child: Container(
width: MediaQuery.of(context).size.width,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjHtidokLaIsJlVNVtCk_DJXAIvPJyvTFnYA&usqp=CAU"))
),
),
),
В приведенном выше коде я назвал одно пользовательское имя объекта клипера CurveImage(), это поможет вам преобразовать ваше изображение в форму кривой.
Сорт
class CurveImage extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height-30);
path.quadraticBezierTo(size.width / 4, size.height,
size.width / 2, size.height);
path.quadraticBezierTo(size.width - (size.width / 4), size.height,
size.width, size.height - 30);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Просто используйте этот пакет, flutter_custom_clippers, со многими пользовательскими формами, легкость использования