web-dev-qa-db-fra.com

Séparateur horizontal avec texte au milieu dans Flutter?

Existe-t-il un widget intégré dans Flutter pour créer un séparateur avec du texte au milieu? Un guide sur la façon de le faire? Comme ceci: (le texte "OU" au milieu de la ligne horizontale)

voici la capture d'écran de ce que je veux réaliser

user-interfacedartfluttermaterial-design
16
Deche

Vous pouvez essayer d'utiliser le widget Row .

Row(
    children: <Widget>[
        Expanded(
            child: Divider()
        ),       

        Text("OR"),        

        Expanded(
            child: Divider()
        ),
    ]
)
51
Jerome Escalante

Example Implementation of a divider with Text

Pour développer la réponse de Jérôme - Voici un exemple qui montre comment l'intégrer à d'autres contenus et qui a également des encarts supplémentaires pour se rapprocher de l'image réelle que vous souhaitez:

          Column(children: <Widget>[
            Row(
              children: <Widget>[Text("above")],
            ),
            Row(children: <Widget>[
              Expanded(
                child: new Container(
                    margin: const EdgeInsets.only(left: 10.0, right: 20.0),
                    child: Divider(
                      color: Colors.black,
                      height: 36,
                    )),
              ),
              Text("OR"),
              Expanded(
                child: new Container(
                    margin: const EdgeInsets.only(left: 20.0, right: 10.0),
                    child: Divider(
                      color: Colors.black,
                      height: 36,
                    )),
              ),
            ]),
            Row(
              children: <Widget>[Text("below ")],
            ),
          ])
19
Oswin Noetzelmann

Il n'y a pas de widget Flutter qui fait ça, j'ai créé sur moi-même. Tu peux le faire comme ça

import 'package:flutter/material.Dart';
import 'package:flutter/widgets.Dart';

class HorizontalOrLine extends StatelessWidget {
  const HorizontalOrLine({
    this.label,
    this.height,
  });

  final String label;
  final double height;

  @override
  Widget build(BuildContext context) {

    return Row(children: <Widget>[
      Expanded(
        child: new Container(
            margin: const EdgeInsets.only(left: 10.0, right: 15.0),
            child: Divider(
              color: Colors.black,
              height: height,
            )),
      ),

      Text(label),

      Expanded(
        child: new Container(
            margin: const EdgeInsets.only(left: 15.0, right: 10.0),
            child: Divider(
              color: Colors.black,
              height: height,
            )),
      ),
    ]);
  }
}

L'utilisation sera:

HorizontalOrLine(height: 10,label: "OR")
0
Anas Naguib

La meilleure solution consiste à créer un CustomPainter et à tracer une ligne

Suis les étapes: enter image description here

CustomPainter:

class Drawhorizontalline extends CustomPainter {
      Paint _Paint;
      bool reverse;

   Drawhorizontalline(this.reverse) {
     _Paint = Paint()
          ..color = PPColors.tertiaryColor
          ..strokeWidth = 1
          ..strokeCap = StrokeCap.round;
   }

  @override
  void Paint(Canvas canvas, Size size) {
      if (reverse) {
         canvas.drawLine(Offset(-250.0, 0.0), Offset(-10.0, 0.0), _Paint);
      } else {
         canvas.drawLine(Offset(10.0, 0.0), Offset(250.0, 0.0), _Paint);
      }
  }

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

Utilisez ce CustomPainter

Widget getSeparateDivider() {
return Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    CustomPaint(Painter: Drawhorizontalline(true)),
    Text(
      "OR",
      style: TextStyle(
          color: PPColors.primaryColor,
          fontWeight: FontWeight.bold,
          fontSize: PPUIHelper.FontSizeLarge),
    ),
    CustomPaint(Painter: Drawhorizontalline(false))
  ],
 );
}
0
Atul

Vous pouvez simplement utiliser un conteneur pour y parvenir:

new Container(height: 40, width: 1, color: Colors.grey,
                        margin: const EdgeInsets.only(left: 10.0, right: 10.0),),

Si vous voulez une ligne verticale, changez la hauteur de sa taille et contrôlez l '"épaisseur" de votre ligne avec la largeur.

Inversez ces logiques entre largeur/hauteur si vous souhaitez tracer une ligne horizontale.

Utilisez-le en ligne avec votre texte au milieu de vos deux conteneurs.

0
MUKESH BHATI
import 'package:flutter/material.Dart';

class HorizontalLineTitle extends StatelessWidget {
  final String title;
  final Color color;
  final double lineHeight;
  final double lineWidth;
  final double paddingTop;
  final double paddingBottom;

  HorizontalLineTitle({
    @required this.title,
    @required this.color,
    this.lineHeight,
    this.lineWidth,
    this.paddingTop,
    this.paddingBottom,
  });

  Widget _line() {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final boxWidth = constraints.constrainWidth();
        final dashWidth = lineWidth ?? 10.0;
        final dashHeight = lineHeight ?? 1.0;
        final dashCount = (boxWidth / (2 * dashWidth)).floor();
        return Flex(
          children: List.generate(dashCount, (_) {
            return SizedBox(
              width: dashWidth,
              height: dashHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color),
              ),
            );
          }),
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          direction: Axis.horizontal,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    var widgets = <Widget>[];
    widgets.add(Expanded(child: _line()));
    if (title != null && title != '') {
      widgets.add(Padding(
        padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
        child: Text(
          title,
          style: Theme.of(context).textTheme.title,
        ),
      ));
    } else {
      widgets.add(Container(width: 2.0));
    }
    widgets.add(Expanded(child: _line()));
    return Padding(
      padding: EdgeInsets.fromLTRB(
          0.0, paddingTop ?? 0.0, 0.0, paddingBottom ?? 0.0),
      child: Row(
        children: widgets,
      ),
    );
  }
}

Ce widget peut être utilisé pour avoir la même chose dont vous avez besoin mais avec des lignes pointillées. Je voulais juste publier ceci afin que les gens puissent l'utiliser pour le personnaliser selon leurs besoins.

0
Andre Honsberg