web-dev-qa-db-fra.com

Comment rendre le texte aussi grand que la largeur le permet en flottement

J'ai un conteneur où je dois montrer un code-barres (c'est une application pour les cartes de fidélité virtuelles) et j'aimerais que le code-barres soit aussi large que possible sur l'écran. Pour l'instant, j'ai défini la taille de la police à une taille raisonnable qui convient à tous les appareils, mais ce n'est que temporaire bien sûr. Comment puis-je résoudre ça? C'est le code que j'utilise pour construire le Widget.

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
      title: Text(_title),
    ),
    body: Container(
    padding: const EdgeInsets.all(12.0),
    child: Column(
      children: <Widget>[ 
        SizedBox(
          width: double.infinity,
          child: Text(_barcode, style: TextStyle(fontFamily: 'Code128', fontSize: 90.0))
        ),
        Text(_barcode, style: TextStyle(fontSize: 40.0))
        ]
      ),
    )
  );
}
flutterflutter-layout
7
bimbo1989

Je crois que ce que vous recherchez est FittedBox .

BoxFit s'applique quel que soit le "fit" que vous souhaitez étirer/mettre à l'échelle pour que l'enfant tienne dans la boîte. Il n'effectue pas un "étirement" pur sur le texte mais plutôt l'espace qu'il doit occuper. Vous ne devez pas spécifier la taille du texte en même temps.

Cela ressemble à ceci:

import 'package:flutter/material.Dart';

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() {
    return new MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Container(
              color: Colors.blue,
              width: 300.0,
              height: 200.0,
              child: FittedBox(
                fit: BoxFit.contain,
                child: Text("Whee"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Si vous voulez réellement `` étirer '' le texte (c'est-à-dire rendre les caractères réels plus larges ou plus hauts), vous devrez faire quelque chose d'un peu plus personnalisé.

Si c'est le cas, regardez CustomPaint , CustomPainter , TextPainter , et le Canvastranslate & échelle options. Fondamentalement, vous devez créer une classe étendant CustomPainter dans laquelle vous avez créé un TextPainter, l'a disposé à une taille particulière, l'a peint sur le canevas, puis l'a mis à l'échelle pour l'adapter à la taille réelle de CustomPainter (ou mettez-vous à l'échelle le toile d'abord - j'oublie ...). Ensuite, vous passeriez une instance de cette classe à CustomPaint.

12
rmtmckenzie

vous pouvez utiliser un widget de boîte équipée.

FittedBox(child:Text('text sample'));

https://api.flutter.dev/flutter/widgets/FittedBox-class.html

2
hamza ahmad

Enveloppez le texte dans un widget FittedBox, pour forcer le texte à être entouré par une boîte. La taille de la FittedBox dépendra du widget de son parent. Dans la FittedBox, le widget Texte peut simplement "couvrir" la boîte, de sorte que le texte ne s'étire pas pour remplir l'espace disponible dans la FittedBox. L'énumération BoxFit.fill est un moyen d'étirer le texte pour l'adapter à tout l'espace disponible dans la FittedBox. Vous pouvez modifier les dimensions de la boîte en modifiant la hauteur et la largeur du parent de la FittedBox, le conteneur.

Container(
  height: _height,
  width: _width,
  FittedBox(               
    fit: BoxFit.fill,
    child: Text("Whee"),
  )
)
0
wowlol

Utilisation TextPainter.width et une boucle for pour trouver la plus grande taille de police appropriée (l'ajout de +1 n'est pas très efficace, vous pouvez affiner cela):

import 'package:flutter/material.Dart';

main() => runApp(MaterialApp(
      home: MyHomePage(),
      theme: ThemeData(platform: TargetPlatform.iOS),
    ));

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text autoscale'),
      ),
      body: Padding(
        padding: EdgeInsets.all(32.0),
        child: Center(
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              final text = 'Hello World';
              final style = TextStyle(fontWeight: FontWeight.bold); // apply your barcode font here
              final fontSize = calculateAutoscaleFontSize(text, style, 30.0, constraints.maxWidth);
              return Text(
                text,
                style: style.copyWith(fontSize: fontSize),
                maxLines: 1,
              );
            },
          ),
        ),
      ),
    );
  }
}

double calculateAutoscaleFontSize(String text, TextStyle style, double startFontSize, double maxWidth) {
  final textPainter = TextPainter(textDirection: TextDirection.ltr);

  var currentFontSize = startFontSize;

  for (var i = 0; i < 100; i++) {
    // limit max iterations to 100
    final nextFontSize = currentFontSize + 1;
    final nextTextStyle = style.copyWith(fontSize: nextFontSize);
    textPainter.text = TextSpan(text: text, style: nextTextStyle);
    textPainter.layout();
    if (textPainter.width >= maxWidth) {
      break;
    } else {
      currentFontSize = nextFontSize;
      // continue iteration
    }
  }

  return currentFontSize;
}
0
boformer