DEV Community: Luís Gustavo

Utilizando o CustomPaint para criar assinatura.

Luís Gustavo — Sun, 21 Jan 2024 23:32:51 +0000

Hoje vamos aprender como utilizar o CustomPaint para criar uma estrutura de assinatura de nome.

Isso pode ser muito útil em aplicativos que precisam solicitar assinaturas para usuários para se assegurar de algo, por exemplo uma aplicativo de folha de ponto.

Quem trabalha no modelo CLT sabe que todo final de mês precisamos assinar nossa folha de ponto para confirmar que estamos de acordo com os horários que trabalhamos, pois com base nesses horários é que vamos receber nosso salário.

Criando o nosso projeto.

Vou utilizar o VSCode, mas você pode utilizar a IDE/Editor de sua preferência. Abra o VSCode e criei um novo projeto.

Vamos selecionar o opção Empty Application.

Selecione a pasta onde irá salvar o projeto.

E agora precisamos dar um nome a esse projeto, que no meu caso eu coloquei signature, mas você pode ficar a vontade pra colocar o nome que quiser.

Como o projeto criado vamos dar inicio ao desenvolvimento do nosso app.

Criando a nossa Pagina Inicial

Dentro da past lib do nosso projeto vamos criar mais uma pasta de dar o nome de pages, e dentro dessa pasta vamos criar um arquivo chamado home_page.dart. Essa será a pagina inicial do nosso aplicativo.

No arquivo main.dart vamos definir a rota inicial da nossa aplicação como '/' e apontar ela para a nossa home_page.dart.



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
      },
    );
  }

Voltando ao arquivo home_page.dart vamos adicionar um botão na tela de dar no nome dele de "Criar assinatura".



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: ElevatedButton(
                onPressed: ()  {},
                child: const Text('Criar assinatura'),
              ),
            ),

          ],
        ),
      ),
    );
  }

Criando Página de Assinatura

O próximo passo será criar o arquivo signature_page.dart dentro da pasta pages.

Antes de dar inicio a construção da tela onde iremos fazer a nossa assinatura, primeiro vamos criar um classe de modelo que vai representar a nossa linha.

Criando nossa classe de modelo DrawLine

Dentro da pasta lib crie uma nova pasta e dê o nome de models, depois crie um arquivo como o nome de draw_line.dart.

No arquivo draw_line.dart vamos criar uma classe como mesmo nome, e dentro dessa classe vamos receber o parâmetro List<Offset> points que irá representar os pontos(x,y) que nossa linha vai percorrer.



class DrawLine {
  DrawLine({
    required this.points,
  });
  final List<Offset> points;
}

Agora vamos voltar no nosso arquivo signature_page.dart de vamos criar um StatefulWidget, que a principio ficará conforme exemplo abaixo.



class SignaturePage extends StatefulWidget {
  const SignaturePage({super.key});

  @override
  State<SignaturePage> createState() => _SignaturePageState();
}

class _SignaturePageState extends State<SignaturePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(''),
      ),
      body: Container(),
    );
  }
}

Abaixo da classe _SignaturePageState vamos criar a nossa classe que irá ser responsável por desenhar nossas linhas.

Criando classe para desenhar as linhas

Vamos dar o nome de _Signature e vamos estender a classe CustomPainter. Nessa classe vamos implementar os métodos shouldRepaint e paint.

No método shouldRepaint vamos retornar true. O método shouldRepaint é chamado quando uma nova instância da classe é fornecida, para verificar se a nova instância realmente representa informações diferentes.

O método paint é chamado sempre que o objeto personalizado precisa ser repintado e é nesse método que vamos fazer o nosso desenho.



class _Signature extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

No método paint vamos criar uma instância da da classe Paint() e definir as propriedades color para Colors.black e o strokeWidth igual a 2 para definir a cor da linha e a largura do traçado.



class _Signature extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2;
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Desenhando as linhas

Agora precisamos definir como nossas linhas serão desenhadas. A estratégia que iremos utilizar é a seguinte.

Vamos ter uma lista de linhas [linha0, linha1, linha2...] e cada linha será representada pela classe DrawLine e cada linha terá o sua lista de pontos [ponto0, ponto1, ponto2...] que será representado pelo parâmetro Offset da classe DrawLine.

Para fazer a assinatura vamos utilizar o widget GestureDetector, esse widget nos permite fazer captura gestos na na tela do celular, como pro exemplo o gesto de arrastar os dedos sobre a tela.

Vamos adicionar esse widget no nosso arquivo signature_page.dart, envolver ele em outro widget chamado Stack com um alinhamento central alignment: Alignment.center, e implementar as funções dos parâmetros onPanStart e onPanUpdate.

onPanStart: Quando o dedo entrou em contato com a tela e começou a se mover.

onPanUpdate: Quando o dedo está em contato com a tela e em movimento.



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Assinatura'),
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          GestureDetector(
            onPanStart: _onPanStart,
            onPanUpdate: _onPanUpdate,
          ),
        ],
      ),
    );
  }

  void _onPanStart(DragStartDetails details) {}

  void _onPanUpdate(DragUpdateDetails details) {}

No método _onPanStart ou seja, quando o usuário tocar na tela e começar a movimentar o dedo, vamos criar uma nova linha.

Para isso, vamos criar uma variável que vai representar a nossa lista de linhas late List<DrawLine> _lines e inicializar ela no método initState().



  @override
  void initState() {
    super.initState();
    _lines = [];
  }

Pra deixar nosso código mais organizado, vamos criar um método pra isso, void _createLine(List<Offset> point) e receber nossa lista de inicial de pontos.

Agora é só chamar essa função no método _onPanStart e envolver ele em método chamado setState que será o responsável em atualizar a nossa tela.

O parâmetro DragStartDetails details nos dá a posição atual do eixo X e Y Offset(x,y) onde o usuário tocou na tela e começou a movimentar os dedos através da variável localPosition.



  void _createLine(List<Offset> point) {
    _lines.add(DrawLine(points: point));
  }

  void _onPanStart(DragStartDetails details) {
    setState(() {
      _createLine([details.localPosition]);
    });
  }

No método _onPanUpdate vamos pegar a última linha adicionada na nossa lista de linhas e atualizar os pontos dela.

Vamos criar um método separado pra isso também void _updateLine(Offset point) e chamar esse método no método _onPanUpdate envolvendo ele em um setState pra atualizar a nossa tela, igual fizemos no _onPanStart.



  void _updateLine(Offset point) {
    _lines.last.points.add(point);
  }

  void _onPanUpdate(DragUpdateDetails details) {
    setState(() {
      _updateLine(details.localPosition);
    });
  }

Agora vamos voltar para a nossa classe _Signature onde vamos implementar a lógica para desenhar as nossas linhas.

No método paint vamos percorrer as nossas linhas e pintar os nossos pontos com o método void drawLine(Offset p1, Offset p2, Paint paint,).

Esse método recebe 3 parâmetros, o p1 é o ponto inicial e o p2 o ponto final da linha, o parâmetro paint é as características de como essa linha vai ser desenhada.



for (final line in lines) {
  for (var i = 0; i < line.points.length - 1; i++) {
    final currentPoint = line.points[i];
    if (i > 0) {
      final previousPoint = line.points[i - 1];
      canvas.drawLine(previousPoint, currentPoint, paint);
    }
  }
}

Vamos entender o que foi feito aqui.

No primeiro for (final line in lines) vamos percorrer as linhas que criamos e no segundo vamos percorrer os pontos nos eixos x e y Offset(x,y) de cada linha for (var i = 0; i < line.points.length - 1; i++).

No método drawLine(previousPoint, currentPoint, paint); vamos passar o ponto anterior e o ponto atual para que a linha seja desenhada. O parâmetro paint vamos passar o parâmetro já foi definido conforme mostramos na sessão anterior Criando classe para desenhar as linhas

O verificação do if(i > 0) é para garantir que vamos começar a desenhar a linha a partir do segundo ponto, pois precisamos saber qual é o ponto anterior para desenhar a linha.

Para que tudo funcione, agora precisamos adicionar o nosso widget CustomPaint no método build.

Para deixar nosso código mais organizado vamos extrair o GestureDetector para um novo método.



  GestureDetector _buildCurrentPath() {
    return GestureDetector(
      onPanStart: _onPanStart,
      onPanUpdate: _onPanUpdate,
      child: Container(
        color: Colors.transparent,
        width: MediaQuery.sizeOf(context).width,
        height: MediaQuery.sizeOf(context).height,
        child: CustomPaint(
          painter: _Signature(_lines),
        ),
      ),
    );
  }



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Assinatura'),
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          _buildCurrentPath(),
        ],
      ),
    );
  }

Agora precisamos voltar ao arquivo main.dart e implementar a rota para a tela de SignaturePage e chamar essa rota no método onPressed do ElevatedButton no arquivo home_page.dart



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
        '/signature': (context) => const SignaturePage(),
      },
    );
  }



ElevatedButton(
  onPressed: ()  {
    Navigator.pushNamed(context, '/signature');
  },
  child: const Text('Criar assinatura'),
)

Se tudo estiver OK você já deve estar conseguindo fazer as linhas conforme exemplo abaixo.

Incrementando o nosso projeto

Agora vamos aprimorar nossa implementação salvar a assinatura como uma imagem PNG.

Primeiro, no arquivo signature_page.dart vamos colocar a nossa tela no modo paisagem para facilitar a assinatura. No método initState() vamos alterar a orientação do dispositivo.



SystemChrome.setPreferredOrientations([
  DeviceOrientation.landscapeLeft,
]);



  @override
  void initState() {
    super.initState();
    _lines = [];

    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
    ]);
  }

Proximo passo é criar uma pasta com o nome de widgets e dentro dela criar o arquivo horizontal_line.dart e na sequência criar uma classe StatelessWidget com o nome de HorizontalLine e implementar o seguinte código abaixo.



  @override
  Widget build(BuildContext context) {
    return Positioned(
      bottom: 100,
      child: Container(
        width: MediaQuery.sizeOf(context).width * 0.6,
        decoration: const BoxDecoration(
          border: Border(
            bottom: BorderSide(),
          ),
        ),
      ),
    );
  }

Agora vamos adicionar esse widget uma linha abaixo do nosso método _buildCurrentPath() no arquivo signature_page.dart.



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Assinatura'),
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          _buildCurrentPath(),
          const HorizontalLine(),
        ],
      ),
    );
  }

Se tudo estiver OK, você estará vendo a seguinte tela.

Para conseguirmos localizar o widget que vamos transformar em uma image PNG, precisamos criar uma GlobalKey late GlobalKey _renderObjectKey iniciar ela no método initState() e adicionar um novo widget RepaintBoundary sobre o nosso Container.



  GestureDetector _buildCurrentPath() {
    return GestureDetector(
      onPanStart: _onPanStart,
      onPanUpdate: _onPanUpdate,
      child: RepaintBoundary(
        key: _renderObjectKey,
        child: Container(
          color: Colors.transparent,
          width: MediaQuery.sizeOf(context).width,
          height: MediaQuery.sizeOf(context).height,
          child: CustomPaint(
            painter: _Signature(_lines),
          ),
        ),
      ),
    );
  }

Vamos criar um método _saveSignature() para salvar a nossa assinatura e adicionar esse método dentro do onPressed de um FloatingActionButton.

Assim que salvarmos a assinatura, vamos fechar a tela de retornar o resultado para a tela de HomePage



Future<void> _saveSignature() async {
  final nav = Navigator.of(context);
  final boundary = _renderObjectKey.currentContext?.findRenderObject()
      as RenderRepaintBoundary?;

  if (boundary != null) {
    final image = await boundary.toImage(
      pixelRatio: 3,
    );

    final byteData = await image.toByteData(format: ImageByteFormat.png);

    if (byteData != null) {
      final pngBytes = byteData.buffer.asUint8List();
      final bs64 = base64Encode(pngBytes);
      debugPrint(bs64.length.toString());
      nav.pop(pngBytes);
    }
  }
}



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Assinatura'),
      ),
      body: Stack(
        alignment: Alignment.center,
        children: [
          _buildCurrentPath(),
          const HorizontalLine(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _saveSignature,
        child: const Icon(
          Icons.save,
        ),
      ),
    );
  }

Agora precisamos recuperar essa assinatura que estamos retornando da tela de SignaturePage, para isso, vamos precisar fazer algumas mudanças nessa tela HomePage.

Primeiro vamos criar 2 variáveis, Uint8List? _imageMemory e bool _showSignature = false

_imageMemory: Onde vamos armazenar a imagem da assinatura.

_showSignature: Para determinar se mostramos a assinatura ou não.

Segundo passo é envolver o no botão "Criar assinatura" em outros 2 widgtes, uma Column com alinhamento central mainAxisAlignment: MainAxisAlignment.center, e um SingleChildScrollView.

Terceiro passo é adicionar um widget Visibility juntamente com um InteractiveViewer para fazermos o controle se mostramos a assinatura ou não. O InteractiveViewer permite você dar um zoom na assinatura para ampliar ela.

O quarto e último passo é receber o retorno da tela SignaturePage e atualizar a HomePage para mostrar a assinatura. Nesse quarto passo vamos também altera a orientação da nossa tela para DeviceOrientation.portraitUp para voltar para o modo retrato.

Segue código atualizado da HomePage.



class _HomePageState extends State<HomePage> {

  Uint8List? _imageMemory;

  bool _showSignature = false;

@override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Home Page'),

      ),

      body: SingleChildScrollView(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Center(

              child: ElevatedButton(

                onPressed: () async {

                  final result =

                      await Navigator.pushNamed(context, '/signature')

                          as Uint8List?;

              <span class="k">if</span> <span class="p">(</span><span class="n">result</span> <span class="o">!=</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
                <span class="n">setState</span><span class="p">(()</span> <span class="p">{</span>
                  <span class="n">_imageMemory</span> <span class="o">=</span> <span class="n">result</span><span class="p">;</span>
                  <span class="n">_showSignature</span> <span class="o">=</span> <span class="n">_imageMemory</span> <span class="o">!=</span> <span class="kc">null</span><span class="p">;</span>
                <span class="p">});</span>
              <span class="p">}</span>

              <span class="n">setState</span><span class="p">(()</span> <span class="p">{</span>
                <span class="n">SystemChrome</span><span class="o">.</span><span class="na">setPreferredOrientations</span><span class="p">([</span>
                  <span class="n">DeviceOrientation</span><span class="o">.</span><span class="na">portraitUp</span><span class="p">,</span>
                <span class="p">]);</span>
              <span class="p">});</span>
            <span class="p">},</span>
            <span class="nl">child:</span> <span class="kd">const</span> <span class="n">Text</span><span class="p">(</span><span class="s">'Criar assinatura'</span><span class="p">),</span>
          <span class="p">),</span>
        <span class="p">),</span>
        <span class="n">Visibility</span><span class="p">(</span>
          <span class="nl">visible:</span> <span class="n">_showSignature</span><span class="p">,</span>
          <span class="nl">child:</span> <span class="n">_showSignature</span>
              <span class="o">?</span> <span class="n">InteractiveViewer</span><span class="p">(</span><span class="nl">child:</span> <span class="n">Image</span><span class="o">.</span><span class="na">memory</span><span class="p">(</span><span class="n">_imageMemory</span><span class="o">!</span><span class="p">))</span>
              <span class="o">:</span> <span class="kd">const</span> <span class="n">SizedBox</span><span class="o">.</span><span class="na">shrink</span><span class="p">(),</span>
        <span class="p">),</span>
      <span class="p">],</span>
    <span class="p">),</span>
  <span class="p">),</span>
<span class="p">);</span>



}

}

Esse é o resultado final!!!!

Referência:
https://www.kodeco.com/25237210-building-a-drawing-app-in-flutter.

Repositório GitHub:
https://github.com/luisgustavoo/drawing

Entendendo o CustomPainter do Flutter

Luís Gustavo — Wed, 10 Jan 2024 15:37:41 +0000

Recentemente a @fernandakipper fez uma live em seu canal, onde ela e o DevSoutinho fizeram uma batalha de CSS. Essa batalha tinha com o objetivo desenhar bandeiras dos países utilizando apenas CSS. Resolvi entrar na brincadeira e fazer esse desafio utilizando o CustomPainter do Flutter.

A bandeira escolhida para o desafio foi a bandeira do Brasil, claro!! rs.

Para iniciarmos o desafio primeiro precisamos criar um projeto no VSCode/Android Studio. No meu caso vou utilizar o VSCode, mas você pode utilizar a IDE/Editor de sua preferência.

Abra o VSCode e criei um novo projeto.

Depois escolha a opção Empty Application.

Selecione onde o projeto vai ser salvo

Agora precisamos dar um nome a esse projeto, coloque o nome que vc achar melhor. No meu caso coloquei o nome de custom_painter_flag

Com o nosso projeto já criado, vamos dar inicio a construção da nossa bandeira. Vamos criar uma arquivo chamado de home_page.dart. Esse arquivo vai ser a página principal do nosso aplicativo.

Desenhando o fundo da bandeira

Agora vamos criar um arquivo chamado square.dart. Lembrado que nosso foco aqui é a apenas em entender o CustomPainter, então não se atente a arquitetura, estrutura de pastas, etc.. Estou fazendo da forma mais simples possível.

Dentro do arquivo square.dart vamos criar uma classe e vamos chama-lá de Square. Essa classe vai estender a classe CustomPainter.



class Square extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    throw UnimplementedError();
  }

}

Voltamos no arquivo home_page.dart e criamos o que eu chamo de lousa/quadro, onde vamos fazer a nossa arte, rs. Definimos um tamanho de 200 de altura de 300 de largura para nosso quadro. E para organizar nossos elementos vamos utilizar o Widget Stack para posicionar nossos desenhos uns sobre os outros.



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              painter: Square(),
              child: const SizedBox(
                height: 200,
                width: 300,
              ),
            ),
          ],
        ),
      ),
    );
  }

No arquivo square.dart vamos implementar os métodos shouldRepaint e paint. No método shouldRepaint vamos retornar false a principio. O método shouldRepaint é chamado quando uma nova instância da classe é fornecida, para verificar se a nova instância realmente representa informações diferentes. O método paint é chamado sempre que o objeto personalizado precisa ser repintado e é nesse método que vamos fazer o nosso desenho.



class Square extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

O método paint fornece um parâmetro chamado Size size que o mesmo tamanho que definimos lá no nosso Widget SizedBox arquivo home_page.dart que foi de 300 de altura e 200 de largura.



 CustomPaint(
    painter: Square(),
    child: const SizedBox(
      height: 200,
      width: 300,
    ),
  ),

Como já sabemos, precisamos desenhar um retângulo verde. Vou criar uma instância da classe Paint e definir a cor dela como verde e também um instância da classe Path onde vamos utilizar ela para desenhar nossas linhas. Agora precisamos definir os pontos que vamos percorrer para fazer as nossas linhas, como se fosse em um papel.

Vamos voltar as aulas de matemática e relembrar o plano cartesiano. Para pintar o nosso retângulo, vamos percorrer os eixos X e Y no nosso quadro.

A imagem abaixo representa os pontos que temos que percorrer para desenhar o retângulo

Agora vamos de fato começar a pintura!

Vamos mover para o ponto inicial [0,0]. A função moveTo(0, 0) recebe os parâmetros X e Y.

> Obs: A partir de agora quando ver a escrita [Número, Número] entenda como [eixoX, eixoY]



class Square extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.green;

    final path = Path()..moveTo(0, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Agora vamos desenhar uma linha até o segundo ponto [0,200]. A função lineTo(0, size.height) também recebe os parâmetros X e Y, como eu disse anteriormente o parâmetro size fornecido pelo função paint são os mesmos definidos no Widget SizedBox então size.height = 200.



class Square extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.green;

    final path = Path()..moveTo(0, 0) 
    ..lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Vamos desenhar a próxima linha [300,200], lineTo(size.width, size.height)



class Square extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.green;

    final path = Path()..moveTo(0, 0) 
    ..lineTo(0, size.height)
    ..lineTo(size.width, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Se você chegou até aqui, provavelmente você deve estar vendo essa forma geométrica.

Calmaa... ainda precisamos finalizar os outros 2 pontos. Então vamos lá!!!

Vamos desenhar a próxima linha [300,0], lineTo(size.width, 0)



class Square extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.green;

    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

E por fim, finalizamos voltando ao ponto inicial [0,0], lineTo(0, 0)



class Square extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.green;

    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Agora sim você deve estar vendo o retângulo completo.

Primeira parte finalizada com sucesso!!! Agora vamos para criação do Losango.

Desenhando losango da bandeira

Vamos seguir a mesma linha do retângulo, primeiro vamos criar um arquivo chamado rhombus.dart e em seguida criar a classe Rhombus que estende CustomPainter e já colocar o retorno no método shouldRepaint como false .



class Rhombus extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

No arquivo home_page.dart vamos definir a largura de 250 e altura de 150 do nosso quadro para desenhar o losango.



 CustomPaint(
    painter: Rhombus(),
    child: const SizedBox(
      height: 150,
      width: 250,
    ),
  ),



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              painter: Square(),
              child: const SizedBox(
                height: 200,
                width: 300,
              ),
            ),
            CustomPaint(
              painter: Rhombus(),
              child: const SizedBox(
                height: 150,
                width: 250,
              ),
            ),
          ],
        ),
      ),
    );
  }

Segue imagem representando plano cartesiano do nosso quadro.

Segue imagem dos pontos que vamos ter que percorrer no quadro para desenhar o losango.

Bora colocar a mão na massa e iniciar a construção do nosso losango!!!

Primeiramente vamos criar a variável paint e path como já é de costume e movendo para ponto inicial [125,0] onde vamos começar a desenhar as linhas. Vamos criar também duas variáveis para definir onde está localizado o meio do eixo X(middleHorizontalFrame) e o meio do eixo Y(middleVerticalFrame).



class Rhombus extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.yellow;

    final middleHorizontalFrame = size.width / 2;
    final middleVerticalFrame = size.height / 2;

    final path = Path()..moveTo(middleHorizontalFrame, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Agora vamos desenhar uma linha até o ponto [0,75] lineTo(0, middleVerticalFrame)



class Rhombus extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.yellow;

    final middleHorizontalFrame = size.width / 2;
    final middleVerticalFrame = size.height / 2;

    final path = Path()
      ..moveTo(middleHorizontalFrame, 0)
      ..lineTo(0, middleVerticalFrame);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

O próximo passo é desenhar uma linha até o ponto [125,150] lineTo(middleHorizontalFrame, size.height)



class Rhombus extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.yellow;

    final middleHorizontalFrame = size.width / 2;
    final middleVerticalFrame = size.height / 2;

    final path = Path()
      ..moveTo(middleHorizontalFrame, 0)
      ..lineTo(0, middleVerticalFrame)
      ..lineTo(middleHorizontalFrame, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Agora vamos desenhar uma linha até o ponto [250,75] lineTo(size.width, middleVerticalFrame)



class Rhombus extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.yellow;

    final middleHorizontalFrame = size.width / 2;
    final middleVerticalFrame = size.height / 2;

    final path = Path()
      ..moveTo(middleHorizontalFrame, 0)
      ..lineTo(0, middleVerticalFrame)
      ..lineTo(middleHorizontalFrame, size.height)
      ..lineTo(size.width, middleVerticalFrame);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Finalmente finalizamos voltando para o ponto inicial [125,0] lineTo(middleHorizontalFrame, 0)



class Rhombus extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.yellow;

    final middleHorizontalFrame = size.width / 2;
    final middleVerticalFrame = size.height / 2;

    final path = Path()
      ..moveTo(middleHorizontalFrame, 0)
      ..lineTo(0, middleVerticalFrame)
      ..lineTo(middleHorizontalFrame, size.height)
      ..lineTo(size.width, middleVerticalFrame)
      ..lineTo(middleHorizontalFrame, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Se tudo estiver certo, você deve estar vendo essa imagem abaixo.

Desenhando globo da bandeira

Para desenhar o globo da bandeira vamos utilizar um recurso diferente, vamos utilizar o Widget Container para fazer isso.
Vamos criar um Container com a altura e largura de 100 pixels, e utilizar a propriedade decoration para decorar esse Container. Na propriedade shape do Widget BoxDecoration vamos definir ela como o tipo BoxShape.circle e a cor azul Colors.blue. A propriedade clipBehavior é pra "cortar" o Widget filho do Container para não ultrapassar o círculo.



  Container(
    height: 100,
    width: 100,
    clipBehavior: Clip.antiAlias,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.blue,
    ),
  ),

Agora vamos adicionar esse Container no método build do arquivo home_page.dart



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              painter: Square(),
              child: const SizedBox(
                height: 200,
                width: 300,
              ),
            ),
            CustomPaint(
              painter: Rhombus(),
              child: const SizedBox(
                height: 150,
                width: 250,
              ),
            ),
            Container(
              height: 100,
              width: 100,
              clipBehavior: Clip.antiAlias,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }

Agora nossa bandeira já está tomando forma.

Criando a faixa da bandeira

Agora precisamos criar a nossa faixa da bandeira, essa parte requer um pouco mais de atenção, pois ela é um pouco mais complexa que as desenvolvidas até aqui.

Para desenhar nossa faixa vamos utilizar o que chamamos de
Curva de Bézier.
Vamos criar um arquivo e chamar de flag_banner.dart e criar a classe FlagBanner com o método shouldRepaint retornando false.



class FlagBanner extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Dentro do arquivo home_page.dart iremos criar o nosso quadro onde vamos pintar nossa faixa com uma altura de 100 pixels e largura 100 pixels, para ficar em conformidade com o tamanho do nosso globo que também é de 100 pixel de altura e largura.



CustomPaint(
  painter: FlagBanner(),
  child: const SizedBox(
    height: 100,
    width: 100,
  ),
),

Vamos envolver esse novo quadro em uma nova pilha de widgets com o Widget Stack.



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              painter: Square(),
              child: const SizedBox(
                height: 200,
                width: 300,
              ),
            ),
            CustomPaint(
              painter: Rhombus(),
              child: const SizedBox(
                height: 150,
                width: 250,
              ),
            ),
            Container(
              height: 100,
              width: 100,
              clipBehavior: Clip.antiAlias,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue,
              ),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  CustomPaint(
                    painter: FlagBanner(),
                    child: const SizedBox(
                      height: 100,
                      width: 100,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

Voltando ao arquivo flag_banner.dart, dentro do método paint vamos fazer diferente agora, vamos criar uma instância da da classe Paint e definir as propriedades color para Colors.white o style para PaintingStyle.stroke para pintar apenas as bordas do conteúdo e não o interior, o strokeWidth igual a 20 para definir largura do traçado.



class FlagBanner extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;


  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Para auxiliar na construção vamos utilizar o Figma para facilitar o entendimento. Vamos criar um Frame de dividir ele am 4 partes iguais na horizontal de na vertical. Pra isso iremos utilizar o LayoutGrid e alterar a propriedade size para 24.

Vá até o menu localizado no canto superior esquerdo do Figma e seleciono a opção pen para iniciar o desenho da faixa.

Faça uma linha na diagonal da base o primeiro quadrado até o final do da base do último quadrado.

Logo em seguida vá até o menu novamente e selecione a opção Bend Tools.

Selecione a ponta e arraste até o final do quadro

No menu lateral direito altere o stroke para 20.

Aqui temos um noção de como deve ficar a nossa faixa.

Agora vamos transformar isso em código!!!

No arquivo flag_banner.dart vamos dividir o nosso quadro em 4 partes como fizemos no Figma, e posicionar no ponto inicial [0,25] onde iremos traçar a linha diagonal. Como definimos nosso quadro com altura de 100 pixels, cada quadrado deverá ter 25 pixels, ou seja o valor da variável verticalFrames será 25.



class FlagBanner extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

    final verticalFrames = size.height / 4;

    final path = Path()
      ..moveTo(0, verticalFrames);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Para fazer a linha curva vamos utilizar o método cubicTo( double x1, double y1, double x2, double y2, double x3, double y3,). Segue exemplos dos pontos x1, y1, x2, y2... abaixo.

Vamos definir o ponto X1 no ponto final do nosso eixo X size.width, que seria o mesmo que 100.



class FlagBanner extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

    // 100 / 4 = 25
    final verticalFrames = size.height / 4;

    final path = Path()
      ..moveTo(0, verticalFrames)
      ..cubicTo(
        size.width // x1
       // y1, 
       // x2, 
       // y2, 
       // x3, 
       // y3,
      );

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Agora vamos posicionar o y1 a 25 pixels de distância



class FlagBanner extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

    // 100 / 4 = 25
    final verticalFrames = size.height / 4;

    final path = Path()
      ..moveTo(0, verticalFrames)
      ..cubicTo(
        size.width, // x1
        verticalFrames // y1, 
       // x2, 
       // y2, 
       // x3, 
       // y3,
      );

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

As demais posições vão fica no mesmo lugar, x2, y2, x3 e y3.



class FlagBanner extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

    // 100 / 4 = 25
    final verticalFrames = size.height / 4;

    final path = Path()
      ..moveTo(0, verticalFrames)
      ..cubicTo(
        size.width, // x1
        verticalFrames, // y1,
        size.width, // x2,
        size.height, // y2,
        size.width, // x3,
        size.height, // y3,
      );

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Se tudo estiver certo teremos a seguinte imagem abaixo.

Estamos quase finalizando a nossa bandeira, agora precisamos criar as estrelas.

Criando as estrelas

Pra criar as nossas estrelas, primeiro como de costume vamos criar o nosso arquivo star.dart e a classe Star que estende CustomPainter e já implementar o método shouldRepaint que irá retornar false.



class Star extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

No arquivo home_page.dart vamos definir o tamanho do nosso quadro que a princípio será de 20 pixels de altura e largura.



CustomPaint(
  painter: Star(),
  child: SizedBox(
    height: 20,
    width: 20,
  ),
),

Pra podermos visualizar a nossa estrela, vamos envolver nosso quadro em um Widget Positioned de definir as propriedades. bottom e left pra 70 pixels.

Nosso método build ficará assim.



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            CustomPaint(
              painter: Square(),
              child: const SizedBox(
                height: 200,
                width: 300,
              ),
            ),
            CustomPaint(
              painter: Rhombus(),
              child: const SizedBox(
                height: 150,
                width: 250,
              ),
            ),
            Container(
              height: 100,
              width: 100,
              clipBehavior: Clip.antiAlias,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue,
              ),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  CustomPaint(
                    painter: FlagBanner(),
                    child: const SizedBox(
                      height: 100,
                      width: 100,
                    ),
                  ),
                  Positioned(
                    bottom: 70,
                    left: 70,
                    child: CustomPaint(
                      painter: Star(),
                      child: const SizedBox(
                        height: 20,
                        width: 20,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

Seguindo o mesmo modelo da faixa da bandeira vamos utilizar o Figma pra auxiliar na construção da nossa estrela. Vamos criar um Frame adicionar LayoutGrid a ele e definir a propriedade size para 12, assim vamos ter um quadro divido em 8 partes iguais.

Agora vamos traçar uma linha diagonal utilizando 3 quadrados na vertical e 3 na horizontal.

Agora vamos fazer outra linha na horizontal também utilizando 3 quadrados na vertical e 3 na horizontal, e assim vamos seguindo os pontos que temos que percorrer em linhas para criarmos a nossa estrela.

Segue exemplo completo

Agora vamos transformar isso em código!!

No arquivo star.dart vamos implementar método paint da classe Star.
Primeiro passo é definir a cor da nossa estrela e dividir o nosso quadro em 8 partes iguais, igual ilustramos no Figma. Como definimos que o nosso quadro terá 20 pixels de altura e largura, cada parte(quadrado) terá 8 quadrados de 2,5 pixels.



class Star extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.white;

    // Divide o quadro em 8 partes iguais, na vertical e horizontal
    // 20 / 8 =  2,5, ou seja cada quadradinho do nosso quadro tem 2,5px
    final verticalFrames = size.height / 8;
    final horizontalFrames = size.width / 8;
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Para facilitar, vamos criar algumas variáveis onde já vamos deixar definido a quantidade de quadrados que vamos percorrer na vertical e horizontal no nosso quadro traçando as linhas.



class Star extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.white;

    // Divide o quadro em 8 partes iguais, na vertical e horizontal
    // 20 / 8=  2,5, ou seja cada quadradinho do nosso quadro tem 2,5px
    final verticalFrames = size.height / 8;
    final horizontalFrames = size.width / 8;

    final threeVerticalFrames = verticalFrames * 3;
    final fiveVerticalFrames = verticalFrames * 5;
    final sixVerticalFrames = verticalFrames * 6;

    final oneHorizontalFrames = horizontalFrames * 1;
    final twoHorizontalFrames = horizontalFrames * 2;
    final threeHorizontalFrames = horizontalFrames * 3;
    final middleHorizontalFrame = size.width / 2;
    final fiveHorizontalFrames = horizontalFrames * 5;
    final sixHorizontalFrames = horizontalFrames * 6;
    final sevenHorizontalFrames = horizontalFrames * 7;
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

O que fizemos basicamente foi, pegar o valor que representa um quadradinho do nosso quadro que é 2,5 e multiplicar pela quantidade de quadrados que queremos percorrer. Exemplo de 3 quadrados: 2,5px * 3 = 7,5px

Agora vamos dar inicio ao nosso desenho, primeiro vamos posicionar no ponto inicial do nosso quadro [10,0]. Lembrando que nosso quadro tem 20 pixels largura, logo 10 pixels representa o meio do nosso quadro, moveTo(middleHorizontalFrame, 0).



class Star extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.white;

    // Divide o quadro em 8 partes iguais, na vertical e horizontal
    // 20 / 8=  2,5, ou seja cada quadradinho do nosso quadro tem 2,5px
    final verticalFrames = size.height / 8;
    final horizontalFrames = size.width / 8;

    final threeVerticalFrames = verticalFrames * 3;
    final fiveVerticalFrames = verticalFrames * 5;
    final sixVerticalFrames = verticalFrames * 6;

    final oneHorizontalFrames = horizontalFrames * 1;
    final twoHorizontalFrames = horizontalFrames * 2;
    final threeHorizontalFrames = horizontalFrames * 3;
    final middleHorizontalFrame = size.width / 2;
    final fiveHorizontalFrames = horizontalFrames * 5;
    final sixHorizontalFrames = horizontalFrames * 6;
    final sevenHorizontalFrames = horizontalFrames * 7;

    final path = Path()..moveTo(middleHorizontalFrame, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Nosso próximo ponto vamos percorrer 3 quadrado na horizontal e vertical [7,5 , 7,5], lineTo(threeHorizontalFrames, threeVerticalFrames).

No próximo não percorreremos nenhum(0) quadrado na horizontal e 3 na vertical [0, 7,5], lineTo(0, threeVerticalFrames)



class Star extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.white;

    // Divide o quadro em 8 partes iguais, na vertical e horizontal
    // 20 / 8=  2,5, ou seja cada quadradinho do nosso quadro tem 2,5px
    final verticalFrames = size.height / 8;
    final horizontalFrames = size.width / 8;

    final threeVerticalFrames = verticalFrames * 3;
    final fiveVerticalFrames = verticalFrames * 5;
    final sixVerticalFrames = verticalFrames * 6;

    final oneHorizontalFrames = horizontalFrames * 1;
    final twoHorizontalFrames = horizontalFrames * 2;
    final threeHorizontalFrames = horizontalFrames * 3;
    final middleHorizontalFrame = size.width / 2;
    final fiveHorizontalFrames = horizontalFrames * 5;
    final sixHorizontalFrames = horizontalFrames * 6;
    final sevenHorizontalFrames = horizontalFrames * 7;

    final path = Path()
      ..moveTo(middleHorizontalFrame, 0)
      ..lineTo(threeHorizontalFrames, threeVerticalFrames)
      ..lineTo(0, threeVerticalFrames);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Seguindo a mesma lógica do ponto anterior o próximo vamos percorrer 2 quadrados na horizontal e 5 na vertical [5, 12,5], lineTo(twoHorizontalFrames, fiveVerticalFrames).



class Star extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.white;

    // Divide o quadro em 8 partes iguais, na vertical e horizontal
    // 20 / 8=  2,5, ou seja cada quadradinho do nosso quadro tem 2,5px
    final verticalFrames = size.height / 8;
    final horizontalFrames = size.width / 8;

    final threeVerticalFrames = verticalFrames * 3;
    final fiveVerticalFrames = verticalFrames * 5;
    final sixVerticalFrames = verticalFrames * 6;

    final oneHorizontalFrames = horizontalFrames * 1;
    final twoHorizontalFrames = horizontalFrames * 2;
    final threeHorizontalFrames = horizontalFrames * 3;
    final middleHorizontalFrame = size.width / 2;
    final fiveHorizontalFrames = horizontalFrames * 5;
    final sixHorizontalFrames = horizontalFrames * 6;
    final sevenHorizontalFrames = horizontalFrames * 7;

    final path = Path()
      ..moveTo(middleHorizontalFrame, 0)
      ..lineTo(threeHorizontalFrames, threeVerticalFrames)
      ..lineTo(0, threeVerticalFrames)
      ..lineTo(twoHorizontalFrames, fiveVerticalFrames);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

E pra finalizar, vamos seguir a lógica dos pontos anteriores vamos percorrer os demais pontos.



class Star extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.white;

    // Divide o quadro em 8 partes iguais, na vertical e horizontal
    // 20 / 8=  2,5, ou seja cada quadradinho do nosso quadro tem 2,5px
    final verticalFrames = size.height / 8;
    final horizontalFrames = size.width / 8;

    final threeVerticalFrames = verticalFrames * 3;
    final fiveVerticalFrames = verticalFrames * 5;
    final sixVerticalFrames = verticalFrames * 6;

    final oneHorizontalFrames = horizontalFrames * 1;
    final twoHorizontalFrames = horizontalFrames * 2;
    final threeHorizontalFrames = horizontalFrames * 3;
    final middleHorizontalFrame = size.width / 2;
    final fiveHorizontalFrames = horizontalFrames * 5;
    final sixHorizontalFrames = horizontalFrames * 6;
    final sevenHorizontalFrames = horizontalFrames * 7;

    final path = Path()
      ..moveTo(middleHorizontalFrame, 0)
      ..lineTo(threeHorizontalFrames, threeVerticalFrames)
      ..lineTo(0, threeVerticalFrames)
      ..lineTo(twoHorizontalFrames, fiveVerticalFrames)
      ..lineTo(oneHorizontalFrames, size.height)
      ..lineTo(middleHorizontalFrame, sixVerticalFrames)
      ..lineTo(sevenHorizontalFrames, size.height)
      ..lineTo(sixHorizontalFrames, fiveVerticalFrames)
      ..lineTo(size.width, threeVerticalFrames)
      ..lineTo(fiveHorizontalFrames, threeVerticalFrames)
      ..lineTo(middleHorizontalFrame, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

Se tudo estiver OK, nós teremos a seguinte imagem abaixo.

E pra finalizar vamos criar uma método para gerar nossas estrelas de forma aleatórias.



  List<({double leftPositionStar, double bottomPositionStar, double starSize})>
      _generateStars() {
    final list = <({
      double leftPositionStar,
      double bottomPositionStar,
      double starSize
    })>[];
    var bottomPositionStar = 0.0;
    var leftPositionStar = 0.0;
    var starSize = 2.0;

    const spacingBetweenStars = 10;

    while (list.length != 26) {
      if (list.isEmpty) {
        bottomPositionStar = 70;
        leftPositionStar = 70;
        starSize = 8;
        final itemList = (
          leftPositionStar: leftPositionStar,
          bottomPositionStar: bottomPositionStar,
          starSize: starSize
        );
        list.add(itemList);
      } else {
        bottomPositionStar = double.parse(
          (Random.secure().nextInt(55) + 10).toString(),
        );
        leftPositionStar = double.parse(
          (Random.secure().nextInt(55) + 10).toString(),
        );
        starSize = double.parse(
          (Random.secure().nextInt(8) + 2).toString(),
        );

        final generatedItem = (
          leftPositionStar: leftPositionStar,
          bottomPositionStar: bottomPositionStar,
          starSize: starSize
        );

        for (final item in list) {
          if ((item.leftPositionStar - generatedItem.leftPositionStar).abs() <
                  spacingBetweenStars &&
              (item.bottomPositionStar - generatedItem.bottomPositionStar)
                      .abs() <
                  spacingBetweenStars) {
            continue;
          }
        }

        list.add(generatedItem);
      }
    }

    return list;
  }
}

O método build do arquivo home_page.dart ficará da seguinte forma.



@override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Stack(

          alignment: Alignment.center,

          children: [

            CustomPaint(

              painter: Square(),

              child: const SizedBox(

                height: 200,

                width: 300,

              ),

            ),

            CustomPaint(

              painter: Rhombus(),

              child: const SizedBox(

                height: 150,

                width: 250,

              ),

            ),

            Container(

              height: 100,

              width: 100,

              clipBehavior: Clip.antiAlias,

              decoration: const BoxDecoration(

                shape: BoxShape.circle,

                color: Colors.blue,

              ),

              child: Stack(

                alignment: Alignment.center,

                children: [

                  CustomPaint(

                    painter: FlagBanner(),

                    child: const SizedBox(

                      height: 100,

                      width: 100,

                    ),

                  ),

                  ..._generateStars().map(

                    (star) {

                      return Positioned(

                        bottom: star.bottomPositionStar,

                        left: star.leftPositionStar,

                        child: CustomPaint(

                          painter: Star(),

                          child: SizedBox(

                            height: star.starSize,

                            width: star.starSize,

                          ),

                        ),

                      );

                    },

                  ),

                ],

              ),

            ),

          ],

        ),

      ),

    );

  }

E o resultado final foi esse!!!!

Obrigado! Espero que tenham gostado 😃

Repositório do GitHub
https://github.com/luisgustavoo/custom_painter_test

Referência
https://medium.com/flutterando/desenhe-o-que-quiser-com-custom-paint-no-flutter-b8557d794823