Mobilutvikling med Flutter · leksjon

CustomPainter og Canvas

Fordyp deg i egendefinert tegning med `CustomPainter` og `Canvas`-API-et for å lage unike former, grafer og visuelle effekter.

Leksjon 1 av 411 trinn

CustomPainter og Canvas er en gratis leksjon i Mobilutvikling med Flutter på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mobilutvikling med Flutter, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Introduksjon til egendefinert tegning

Flutter-widgeter er kraftige, men noen ganger trenger du å tegne noe helt unikt. Tenk på egendefinerte grafer, unike former eller spesielle visuelle effekter!

Det er her egendefinert tegning kommer inn. Det gir deg kontroll på pikselnivå over det som vises på skjermen, slik at du kan lage nesten hva som helst.

Bli kjent med CustomPainter

Klassen CustomPainter står sentralt i egendefinert tegning i Flutter. Du utvider denne klassen for å definere hva og hvordan det skal tegnes.

Den tilbyr et canvas du kan tegne på.
Den krever at du implementerer to viktige metoder: paint og shouldRepaint.

Canvas: tegneflaten din

Metoden paint mottar et Canvas-objekt. Se for deg Canvas som en tom tegneflate, klar for tegneinstruksjonene dine.

Den bruker et todimensjonalt kartesisk koordinatsystem: øverste venstre hjørne er (0,0). X-verdiene øker mot høyre, og Y-verdiene øker nedover.

Stilisere med Paint

Før du tegner, må du fortelle Flutter hvordan det skal tegne. Dette gjør du ved hjelp av et Paint-objekt. Paint-objektet definerer egenskaper som:

Color: Hvilken farge skal tegningen ha?
StrokeWidth: Hvor tykke skal linjene være?
Style: Skal formen fylles (PaintingStyle.fill) eller bare vises som en omrisslinje (PaintingStyle.stroke)?

Tegne grunnleggende former: linje

La oss tegne vår første figur: en enkel linje! Vi bruker canvas.drawLine() og oppgir start- og sluttpunkter (Offset) samt Paint-stilen vår.

Prøv å kjøre dette eksempelet:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draw Line')),
        body: Center(
          child: CustomPaint(
            painter: LinePainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

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

    final p1 = Offset(0, size.height / 2);
    final p2 = Offset(size.width, size.height / 2);

    canvas.drawLine(p1, p2, paint);
  }

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

Tegne grunnleggende figurer: sirkel

Det er like enkelt å tegne en sirkel med canvas.drawCircle(). Du trenger et sentrumspunkt, en radius og et Paint-objekt.

Legg merke til hvordan vi bruker size.width / 2 og size.height / 2 for å sentrere tegningene våre.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draw Circle')),
        body: Center(
          child: CustomPaint(
            painter: CirclePainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

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

    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 4;

    canvas.drawCircle(center, radius, paint);
  }

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

Tegne grunnleggende figurer: rektangel

For å tegne et rektangel bruker vi canvas.drawRect(). Denne metoden tar et Rect-objekt som definerer rektangelets posisjon og størrelse.

En Rect.fromLTWH-konstruktør er nyttig for å definere et rektangel ut fra venstreposisjon, topposisjon, bredde og høyde.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draw Rectangle')),
        body: Center(
          child: CustomPaint(
            painter: RectanglePainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

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

    final rect = Rect.fromLTWH(size.width * 0.2, size.height * 0.2, size.width * 0.6, size.height * 0.6);

    canvas.drawRect(rect, paint);
  }

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

Metoden shouldRepaint

shouldRepaint-metoden i CustomPainter er avgjørende for ytelsen. Den forteller Flutter om den egendefinerte tegningen må tegnes på nytt.

Returner true hvis den nye delegaten (den oppdaterte tegneren) har andre data som vil endre tegningen.
Returner false hvis tegningen blir identisk. Dette hindrer unødvendige omtegninger og sparer CPU-kapasitet.

For statiske tegninger er false ofte tilstrekkelig.

Tegne komplekse figurer med Path

For mer komplekse eller uregelmessige figurer bruker du et Path-objekt. Med en Path kan du definere en serie sammenhengende linjer og kurver.

Du kan flytte til et punkt (moveTo), tegne linjer til punkter (lineTo) og til slutt lukke banen (close) før du tegner den med canvas.drawPath().

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Draw Triangle')),
        body: Center(
          child: CustomPaint(
            painter: TrianglePainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

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, size.height * 0.1);
    path.lineTo(size.width * 0.9, size.height * 0.9);
    path.lineTo(size.width * 0.1, size.height * 0.9);
    path.close();

    canvas.drawPath(path, paint);
  }

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

Test kunnskapene dine!

Hvilket av følgende utsagn om egendefinert tegning i Flutter er SANT?

Besvar den i den interaktive leksjonen

Oppsummering: Grunnleggende egendefinert tegning

Du har tatt dine første steg innen egendefinert tegning i Flutter! Du har lært:

CustomPainter er inngangspunktet ditt for egendefinerte visuelle elementer.
Canvas-objektet er tegneflaten din, med origo øverst til venstre.
Paint-objektet definerer stilen (farge, strek, fyll).
Hvordan du tegner grunnleggende figurer som linjer, sirkler og rektangler.
shouldRepaint bidrar til å optimalisere ytelsen.
Path gjør det mulig å tegne komplekse, egendefinerte figurer.

Fortsett å eksperimentere for å gi de unike designene dine liv!

Gratis å komme i gang

Lær deg Dart med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «CustomPainter og Canvas» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Mobilutvikling med Flutter, inkludert «CustomPainter og Canvas», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva lærer jeg i «CustomPainter og Canvas»?

Fordyp deg i egendefinert tegning med `CustomPainter` og `Canvas`-API-et for å lage unike former, grafer og visuelle effekter. Du øver på Mobilutvikling med Flutter med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Mobilutvikling med Flutter?

Ingen tidligere erfaring er nødvendig. Mobilutvikling med Flutter på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «CustomPainter og Canvas»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Mobilutvikling med Flutter-leksjonen?

Ja. Alle Mobilutvikling med Flutter-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

CustomPainter og Canvas
Implisitte animasjoner
Eksplisitte animasjoner og Heroes
Forskjøvede og fysikkbaserte animasjoner

← Tilbake til Mobilutvikling med Flutter