web-dev-qa-db-ja.com

このような円形状を羽ばたく方法は？

私の羽ばたきプロジェクトでは、このような円の形を作ろうとしています。コンテナでborder-radiusを使用してみました。しかし、期待したとおりに機能しませんでした。

だから、どうやってこの与えられた写真のような形を作ることができますか？

画像

こんな容器を使ってみました。

    Container(
            height: 72,
            width: 211,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(50),
                topLeft: Radius.circular(30))
            ),
          )
user-interfaceflutterdartgeometryshapes
5
Rahi

CustomPaintを使用すると、ほとんど何でも描くことができます。

https://api.flutter.dev/flutter/rendering/CustomPainter-class.html

以下のコードでは、そのような円を描きます。

enter image description here

import "package:flutter/material.Dart";

void main() {
  runApp(MaterialApp(title: "", home: Home()));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Container(
            width: double.infinity,
            height: double.infinity,
            child: CustomPaint(
              Painter: CirclePainter(),
            )),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final Paint lightBluePaint = Paint()..color = Color(0xFFbde5fa);
  final Paint bluePaint = Paint()..color = Color(0xFF5abef2);
  final TextPainter textPainter = TextPainter(
    textDirection: TextDirection.ltr,
  );

  final TextStyle textStyle = TextStyle(
      color: Colors.white.withAlpha(240),
      fontSize: 18,
      letterSpacing: 1.2,
      fontWeight: FontWeight.w900);

  @override
  void Paint(Canvas canvas, Size size) {
    var rect = Rect.fromLTRB(
        -100, size.height - 120, size.width * 0.7, size.height + 250);

    final Path circle = Path()..addOval(rect);
    final Path smallCircle = Path()..addOval(rect.inflate(50));

    canvas.drawPath(smallCircle, lightBluePaint);
    canvas.drawPath(circle, bluePaint);

    drawText(canvas, size, 'Write now');
  }

  void drawText(Canvas canvas, Size size, String text) {
    textPainter.text = TextSpan(style: textStyle, text: text);
    textPainter.layout();
    textPainter.Paint(canvas, Offset(50, size.height - 60));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
1
alexpfx