Tutorial su tela 01 | Come usare la tela nel flutter?

0. Cosa creeremo?

Oggi ti dirò come usare la tela per disegnare la nostra forma , questo è un tutorial passo passo, andiamo! Innanzitutto, lascia che ti mostri cosa creeremo!

Logo di Flutter Open

Sì, hai ragione, creeremo questo logo di Flutter Open.

1. Coordinata o dimensione dell'immagine

Prima di iniziare a lavorare, dovremmo conoscere l'immagine del design del logo, come ad esempio la dimensione del cerchio, la posizione del rettangolo e così via, quindi dovremmo sapere, l'immagine sotto ti mostrerà le coordinate o le dimensioni del o forma, dovresti notare che il punto zero è left_top nella schermata e l'immagine è 584 * 648 pixel.

Le note dei cerchi con coordinata centrale e raggio.il logo del flutter verso l'alto ruotato con coordinata punto

Se vuoi disegnare una forma da solo, dovresti farlo da solo con PS o altri strumenti di modifica delle immagini.

Inoltre, non dimenticare i colori.

const BLUE_NORMAL = Colore (0xff54c5f8);
const GREEN_NORMAL = Colore (0xff6bde54);
const BLUE_DARK2 = Colore (0xff01579b);
const BLUE_DARK1 = Colore (0xff29b6f6);

2. Dimensione del progetto VS Dimensione logica del dispositivo

Quando progettiamo la forma, utilizziamo solo il pixel che ci piace, ma ci sono così tanti dispositivi con dimensioni dello schermo diverse e anche la dimensione della logica è diversa, a volte mettiamo semplicemente la nostra forma personalizzata nel contenitore, in modo da poter disegnare la dimensione come tanto quanto il widget principale. Ad esempio, la dimensione di questo logo è 548 * 648 come design, ma la dimensione logica per mostrare questo logo è 200 * 400, quindi mostrerebbe come di seguito:

Cosa possiamo fare con questo, vediamo il codice qui sotto

Innanzitutto, dovremmo definire una classe util

import 'pacchetto: flutter / material.dart';
import 'dart: math';
class SizeUtil {
  const statica _DESIGN_WIDTH = 580;
  const statica _DESIGN_HEIGHT = 648;

  // dimensione logica nel dispositivo
  Dimensione statica _logicSize;

  // radio pixel del dispositivo.

  larghezza statica {
    return _logicSize.width;
  }

  altezza statica {
    return _logicSize.height;
  }

  dimensione del set statico (dimensione) {
    _logicSize = size;
  }

  // @ param w è il design w;
  doppio statico getAxisX (doppio w) {
    return (w * larghezza) / _DESIGN_WIDTH;
  }

// la direzione y
  doppio statico getAxisY (doppio h) {
    ritorno (h * altezza) / _DESIGN_HEIGHT;
  }

  // valore della direzione diagonale con dimensione del disegno s.
  statico doppio getAxisBoth (double s) {
    ritorna *
        sqrt ((larghezza * larghezza + altezza * altezza) /
            (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT));
  }
}

Ciò ti consentirà di modificare le dimensioni del design in base alla dimensione logica. Il secondo lo usa semplicemente. Puoi iniziare la dimensione con la dimensione del dispositivo, ciò significa che puoi disegnare la forma tanto quanto lo schermo se non assegni un'altra dimensione.

SizeUtil.size = MediaQuery.of (context) .size;

3. Definire CustomPainter

Questa è la classe più importante per definire la nostra forma, qui viene scritta tutta la logica per disegnare la forma.

Innanzitutto, creare una classe estende CustomPainter e crea un disegno. Se la dimensione non è inferiore a 1.0, assegnarla come dimensione logica.

la classe OpenPainter estende CustomPainter {
@oltrepassare
vernice vuota (tela, dimensioni dimensioni) {
if (size.width> 1.0 && size.height> 1.0) {
  print ( "> 1.9");
  SizeUtil.size = size;
}
var paint = Paint ()
  ..style = PaintingStyle.fill
  ..color = BLUE_NORMAL
  ..isAntiAlias ​​= true;
}
 @oltrepassare
  bool shouldRepaint (CustomPainter oldDelegate) => false;
}

Quindi, disegna il logo Flutter. Ma prima, dovremmo usare "canvas.drawPath" per disegnare un quadrilatero.

void _drawFourShape (Canvas canvas,
    {Offset left_top,
    Offset right_top,
    Offset right_bottom,
    Offset left_bottom,
    Dimensioni dimensioni,
    dipingere}) {
  left_top = _convertLogicSize (left_top, size);
  right_top = _convertLogicSize (right_top, dimensione);
  right_bottom = _convertLogicSize (right_bottom, size);
  left_bottom = _convertLogicSize (left_bottom, size);
  var path1 = Path ()
    ..moveTo (left_top.dx, left_top.dy)
    ..lineTo (right_top.dx, right_top.dy)
    ..lineTo (right_bottom.dx, right_bottom.dy)
    ..lineTo (left_bottom.dx, left_bottom.dy);
  canvas.drawPath (path1, paint);
}
Offset _convertLogicSize (Offset off, Dimensione dimensione) {
  return Offset (SizeUtil.getAxisX (off.dx), SizeUtil.getAxisY (off.dy));
}

Infine, disegneremo i cerchi nella funzione di "pittura (tela, dimensioni)".

var circleCenter = Offset (SizeUtil.getAxisX (294), SizeUtil.getAxisY (175));
paint.color = BLUE_NORMAL;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (174), pittura);
paint.color = GREEN_NORMAL;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (124), pittura);
paint.color = Colors.white;
canvas.drawCircle (circleCenter, SizeUtil.getAxisBoth (80), pittura);

Infine, dovremmo salvare la tela.

canvas.save ();
canvas.restore ();

4. Utilizzare OpenPainter

Definiamo OpenPainter ora, quindi come possiamo usare OpenPainter. La maggior parte della classe di importazione è CustomPaint. dovresti usarlo come widget principale.

CustomPaint (
  pittore: OpenPainter (),
)

Quindi possiamo utilizzare CustomPaint come widget comune per mostrare la nostra forma. Nella nostra home page, possiamo usare questo in questo modo.

scaffold (
  appBar: AppBar (
    titolo: testo ("prima tela"),
  ),
  body: Container (
      bambino: Centro (
    child: Container (
      larghezza: 280,
      altezza: 320.0,
      figlio: CustomPaint (
        pittore: OpenPainter (),
      ),
    ),
  )),
)

Mostrerà così.

con dimensioni logiche di larghezza: 280, altezza: 320.0,

Se cambiamo la dimensione del contenitore come diciamo sopra 200 * 400 per una dimensione logica , sarà un po 'diverso.

Contenitore(
// larghezza: 280,
// altezza: 320.0,
          larghezza: 200,
          altezza: 400,
          figlio: CustomPaint (
            pittore: OpenPainter (),
          ),
        )
con dimensioni logiche di larghezza: 200, altezza: 400.0,

Se non impostiamo la dimensione, la dimensione nella funzione 'pittura (tela, dimensione)' sarà zero, adatteremo la dimensione del dispositivo, controlliamo se è giusto o no, questa volta dovremmo annullare il widget principale di Center , quindi possiamo visitarlo.

scaffold (
// appBar: AppBar (
// title: Text ("First Canvas"),
//),
      body: Container (
        child: Container (
// larghezza: 280,
// altezza: 320.0,
          figlio: CustomPaint (
            pittore: OpenPainter (),
          ),
        ),
      ),
    );
con la dimensione logica della dimensione del dispositivo

È bello, abbiamo completato il logo di Flutter Open. Questo è stato creato dalla community open source Flutter. Carri armati per il vostro supporto.

L'intero progetto è qui: https://github.com/FlutterOpen/flutter-canvas. Se ti piace o ti aiuta un po ', per favore dammi una stella in GitHub.

_______________fine________________

Pagina Facebook: https://www.facebook.com/flutteropen

Gruppo Facebook: https://www.facebook.com/groups/948618338674126/