web-dev-qa-db-fra.com

Tracez des lignes avec flottement

Existe-t-il un moyen d'afficher les bordures asymétriques en haut et en bas? J'ai trouvé la solution ci-dessous en utilisant deux images (top_layout et bottom_layout.png). Existe-t-il un autre moyen de créer ces barres de couleur avec des ombres sans utiliser d'images statiques?

return Container(
      color: const Color.fromARGB(255, 236, 0, 140),
      child: Container(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.white,
          margin:
              EdgeInsets.only(top: 60.0, bottom: 20.0, left: 15.0, right: 15.0),
          child: Stack(
            children: <Widget>[
              Positioned.fill(
                child: Image.asset(
                  "assets/imgs/top_layout.png",
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.topCenter,
                ),
              ),
              Positioned.fill(
                child: Image.asset(
                  "assets/imgs/xbottom_layout.png",
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.bottomLeft,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
dartflutterflutter-layout
3
user969068

Comment dessiner des lignes dans Flutter en utilisant le widget CustomPaint

enter image description here

Pour peindre dans Flutter, vous utilisez le widget CustomPaint . Le widget CustomPaint prend un objet CustomPainter comme paramètre. Dans cette classe, vous devez remplacer la méthode Paint, qui vous donne un canevas sur lequel vous pouvez peindre. Voici le code pour tracer la ligne dans l'image ci-dessus.

@override
void Paint(Canvas canvas, Size size) {
  final p1 = Offset(50, 50);
  final p2 = Offset(250, 150);
  final Paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 4;
  canvas.drawLine(p1, p2, Paint);
}

Remarques:

  • La méthode drawLine trace une ligne reliant les deux points que vous lui donnez.
  • Un Offset est une paire de (dx, dy) double, décalé par rapport au coin supérieur gauche du widget CustomPaint.

Une autre option

Vous pouvez faire quelque chose de similaire avec la méthode drawPoints en utilisant la méthode PointMode.polygon option.

enter image description here

@override
void Paint(Canvas canvas, Size size) {
  final pointMode = ui.PointMode.polygon;
  final points = [
    Offset(50, 100),
    Offset(150, 75),
    Offset(250, 250),
    Offset(130, 200),
    Offset(270, 100),
  ];
  final Paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 4
    ..strokeCap = StrokeCap.round;
  canvas.drawPoints(pointMode, points, Paint);
}

Le contexte

Voici le code main.Dart afin que vous puissiez le voir en contexte.

import 'Dart:ui' as ui;
import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        Painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void Paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }

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

Voir également

Voir cet article pour ma réponse plus complète.

5
Suragch

Dans ce cas, vous souhaitez plutôt utiliser le widget Custom Painter . Vous pouvez dessiner la forme en fonction des coordonnées.

Référez-vous à ce tutoriel pour plus d'informations. Dessin de formes personnalisées dans Flutter à l'aide de CustomPainter

2
Adlan Arif Zakaria