#android #ios #flutter #dart
Вопрос:
Пожалуйста, может ли кто-нибудь помочь мне создать такую форму в правом верхнем углу экрана мобильного телефона: 
Заранее спасибо.
Ответ №1:
Вы можете использовать виджет стека и в качестве его дочернего элемента Расположенный виджет с контейнером, в котором есть круг, после чего вы можете вытолкнуть круг за пределы экрана, чтобы отображалась только его часть
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: MyApp._title,
home: Scaffold(
body: Column(
children: [
CircleCorner(),
],
)),
);
}
}
class CircleCorner extends StatelessWidget {
const CircleCorner({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SizedBox(
width: size.width,
height: 300,
child: Stack(
children: [
Positioned(
top: -460,
right: -380,
child: Container(
width: 600.0,
height: 600.0,
decoration: new BoxDecoration(
color: Colors.black87,
shape: BoxShape.circle,
),
),
),
],
),
);
}
}
Комментарии:
1. Ваш ответ работает, но, как вы можете видеть, изображение, которое не похоже на круг.
2. тогда в чем же дело? вы ссылаетесь на значок внутри изображения? является ли это частью этого? или черная штука-это не круг?
3. я имею в виду черную вещь, а не иконку внутри нее
4. Вы можете изменить положение и размер контейнера, чтобы получить желаемую форму, если вы не хотите использовать круг, вытесненный за пределы экрана, вы можете использовать пользовательский художник для создания точной формы, я изменил изображение, может быть, это больше похоже на то, что вы хотите
Ответ №2:
Я бы предложил это, конечно, некоторые изменения должны быть внесены в соответствии с вашими требованиями
class Demo extends StatelessWidget {
const Demo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.white,
child: Stack(
fit: StackFit.expand,
children: [
CustomPaint(
painter: BackgroundPainter(),
),
const Padding(
padding: EdgeInsets.only(top: 50, right: 50),
child: Align(
alignment: Alignment.topRight,
child: Icon(Icons.menu, size: 50),
),
),
],
),
),
);
}
}
class Point {
final double _xAxis;
final double _yAxis;
Point(this._xAxis, this._yAxis);
}
class BackgroundPainter extends CustomPainter {
final Paint _bluePaint;
BackgroundPainter()
: _bluePaint = Paint()
..color = Colors.lightBlue.shade300
..style = PaintingStyle.fill;
@override
void paint(Canvas canvas, Size size) {
paintBlue(size, canvas);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
void paintBlue(Size size, Canvas canvas) {
final path = Path();
path.moveTo(size.width, 0);
path.lineTo(size.width * 0.60, 0);
_addPointsToPath(path, [
Point(size.width * 0.55, size.height * 0.25),
Point(size.width, size.height * 0.25),
]);
canvas.drawPath(path, _bluePaint);
}
void _addPointsToPath(Path path, List<Point> points) {
for (var i = 0; i < points.length - 2; i ) {
final xDiff = (points[i]._xAxis points[i 1]._xAxis) / 2;
final yDiff = (points[i]._yAxis points[i 1]._yAxis) / 2;
path.quadraticBezierTo(points[i]._xAxis, points[i]._yAxis, xDiff, yDiff);
}
final secondLastPoint = points[points.length - 2];
final lastPoint = points[points.length - 1];
path.quadraticBezierTo(secondLastPoint._xAxis, secondLastPoint._yAxis,
lastPoint._xAxis, lastPoint._yAxis);
}
}
