¿Cómo tener una forma de círculo como esta en flutter?

Posteriormente a investigar en diversos repositorios y sitios webs al concluir hemos descubierto la respuesta que te compartimos aquí.

Solución:

Puedes dibujar casi cualquier cosa usando CustomPaint, echa un vistazo:

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

En el siguiente código, dibujo algo como ese círculo:

import "package:flutter/material.dart";

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


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


class _HomeState extends State 
  @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;
  

para implementar la vista previa de su imagen, necesita usar Stack Class con elementos posicionados. Hice un widget como se muestra en tu imagen. los círculos en las esquinas se pueden hacer con un contenedor con radio de borde.

  Container(
    width: MediaQuery.of(context).size.width,
    height: 250,
    margin: EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: [
        BoxShadow(
          color: Color(0x40000000),
          blurRadius: 5.0,
          spreadRadius: 0.0,
          offset: Offset(0.0, 2.0),
        ),
      ],
    ),
    child: Stack(
      children: [
        Container(
          padding: EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Step 3',
                style: TextStyle(
                  color: Colors.blue,
                ),
              ),
              SizedBox(height: 5),
              Text(
                'It is a long established fact that a reader will be '
                  'distracted by the readable content of a page when '
                  'looking at its layout.',
                style: TextStyle(
                  color: Colors.black54,
                ),
              )
            ],
          ),
        ),
        Positioned(
          top: 150,
          right: MediaQuery.of(context).size.width - 200,
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Color(0xFFB5E1F9),
              borderRadius: BorderRadius.all(
                Radius.circular(200),
              ),
            ),
            child: Center(
              child: Container(
                width: 150,
                height: 150,
                decoration: BoxDecoration(
                  color: Color(0xFF4FB6F0),
                  borderRadius: BorderRadius.all(
                    Radius.circular(150),
                  ),
                ),
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 30,
          left: 30,
          child: Text(
            'Write now',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ],
    ),
  );

Reseñas y puntuaciones del artículo

Recuerda mostrar este ensayo si lograste el éxito.

---

---

Utiliza Nuestro Buscador