Introducció

En aquest tema, explorarem com crear gràfics personalitzats en Flutter utilitzant la classe CustomPaint i el seu Canvas. Aquestes eines permeten dibuixar formes, línies, textos i altres elements gràfics directament a la pantalla, oferint un alt nivell de control sobre l'aparença de la teva aplicació.

Conceptes Clau

CustomPainter: Una classe que defineix com dibuixar en un Canvas.
Canvas: Una superfície de dibuix que proporciona mètodes per dibuixar formes, textos, imatges, etc.
Paint: Una classe que defineix l'estil i el color per dibuixar.

Estructura Bàsica

CustomPainter

La classe CustomPainter és on definim el nostre codi de dibuix. Aquesta classe té dos mètodes importants:

paint(Canvas canvas, Size size): Aquí és on escrivim el codi per dibuixar.
shouldRepaint(CustomPainter oldDelegate): Retorna true si el dibuix ha de ser actualitzat.

Exemple Bàsic

A continuació, es mostra un exemple bàsic de com utilitzar CustomPainter per dibuixar un cercle:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Paint Example')),
        body: Center(
          child: CustomPaint(
            size: Size(200, 200),
            painter: CirclePainter(),
          ),
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 50, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Explicació del Codi

CustomPaint: El widget CustomPaint és on es defineix la mida i el painter.
CirclePainter: La classe CirclePainter hereta de CustomPainter i defineix el mètode paint.
paint: Dibuixa un cercle blau al centre del Canvas.

Dibuixant Formes Complexes

Dibuixant un Rectangle

class RectanglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    final rect = Rect.fromLTWH(50, 50, 100, 100);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Dibuixant una Línia

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

    canvas.drawLine(Offset(0, 0), Offset(size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Exercicis Pràctics

Exercici 1: Dibuixar un Triangle

Descripció: Crea un CustomPainter que dibuixi un triangle equilàter al centre del Canvas.

Solució:

class TrianglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.purple
      ..style = PaintingStyle.fill;

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

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Exercici 2: Dibuixar un Text

Descripció: Crea un CustomPainter que dibuixi un text al centre del Canvas.

Solució:

class TextPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final textPainter = TextPainter(
      text: TextSpan(
        text: 'Hola, Flutter!',
        style: TextStyle(color: Colors.black, fontSize: 24),
      ),
      textDirection: TextDirection.ltr,
    );

    textPainter.layout(minWidth: 0, maxWidth: size.width);
    final offset = Offset((size.width - textPainter.width) / 2, (size.height - textPainter.height) / 2);
    textPainter.paint(canvas, offset);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Resum

En aquesta secció, hem après com utilitzar CustomPaint i Canvas per crear gràfics personalitzats en Flutter. Hem vist exemples de com dibuixar cercles, rectangles, línies, triangles i text. Aquests conceptes són fonamentals per crear interfícies d'usuari riques i personalitzades.

En el següent tema, explorarem com utilitzar animacions en Flutter per fer que les nostres aplicacions siguin més dinàmiques i atractives.

Pintura Personalitzada i Canvas

Introducció

Conceptes Clau

Estructura Bàsica

CustomPainter

Exemple Bàsic

Explicació del Codi

Dibuixant Formes Complexes

Dibuixant un Rectangle

Dibuixant una Línia

Exercicis Pràctics

Exercici 1: Dibuixar un Triangle

Exercici 2: Dibuixar un Text

Resum

Curs de Desenvolupament Flutter

Mòdul 1: Introducció a Flutter

Mòdul 2: Conceptes Bàsics de Programació en Dart

Mòdul 3: Widgets de Flutter

Mòdul 4: Gestió de l'Estat

Mòdul 5: Navegació i Enrutament

Mòdul 6: Xarxes i APIs

Mòdul 7: Persistència i Emmagatzematge

Mòdul 8: Conceptes Avançats de Flutter

Mòdul 9: Proves i Depuració

Mòdul 10: Desplegament i Manteniment

Mòdul 11: Flutter per a Web i Escriptori