Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make text as big as the width allows in flutter

I have a Container where I need to show a barcode and I'd love to have the barcode to be as wide as possible on the screen. For now I set the font size at a reasonable size that suits all devices, but it's only temporary of course. How can I solve this? This is the code I am using for building the 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))         ]       ),     )   ); } 
like image 390
bimbo1989 Avatar asked Aug 03 '18 14:08

bimbo1989


People also ask

How do you make the text bigger on a Flutter?

You can change the font size of text in a Text Widget using style property. Create a TextStyle object with fontSize and specify this object as style for Text Widget.


1 Answers

I believe what you're looking for is FittedBox.

BoxFit applies whichever 'fit' you want to stretch/scale the child to fit in the box. It doesn't perform a pure 'stretch' on the text but rather the space it should take up. You shouldn't specify the text's size at the same time.

That looks like this:

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"),               ),             ),           ),         ),       ),     );   } } 

If you're wanting to actually 'stretch' the text (i.e. make the actual characters wider or taller) you'll have to do something a bit more custom.

If that's the case, look at CustomPaint, CustomPainter, TextPainter, and the Canvas translate & scale options. Basically, you would need to create a class extending CustomPainter in which you created a TextPainter, laid it out at a particular size, painted it onto the canvas, and then scaled it to fit the actual size of the CustomPainter (or do you scale the canvas first - I forget...). Then you'd pass an instance of that class to CustomPaint.

like image 163
rmtmckenzie Avatar answered Oct 06 '22 07:10

rmtmckenzie