CODEWITHSUNDEEP
flutterdart
RitchyCZE
RitchyCZE

Reputation: 75

FittedBox for fit text to container doesn't work

I'm trying to fit text to the container with FittedBox, but it doesn't work. On device text goes to the right and it does not break to the next line. (On device I have right overflowed warning). Do someone know what's wrong with this code? I think there is some issue with Row and Column combination so then FittedBox doesn't affect text, but I'm not sure. Thanks.

class HomePage extends StatelessWidget {
  final Greetings greetings = new Greetings();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SafeArea(
              child:
                  SizedBox(height: MediaQuery.of(context).size.height * 0.025)),
          Center(child: greetings),
          /*ListView(
            children: [greetings],
          )*/
        ],
      ),
    );
  }
}

class Greetings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var bought = true;
    var color;
    if (bought) {
      color = Colors.blue[700];
    } else {
      color = Colors.red;
    }

    return Container(
        decoration: BoxDecoration(
            color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
        height: MediaQuery.of(context).size.height * 0.40,
        width: MediaQuery.of(context).size.width * 0.85,
        child: Padding(
            padding: new EdgeInsets.all(20),
            child: Row(
              //mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
              children: [
                Column(
                  //mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'hi',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: 10),
                    FittedBox(
                        fit: BoxFit.contain,
                        child: Text(
                          'kodsajhnidoasdoisahioasdohiasdhioúsadiophas',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 15,
                              fontWeight: FontWeight.normal),
                        )),
                  ],
                )
              ],
            )));
  }
}

Upvotes: 1

Views: 4087

Answers (2)

Soheil Qorbani
Soheil Qorbani

Reputation: 121

At first, FittedBox does not break the text to the new line, it just decreases or increases the fontSize of the text. secondly, you are not providing any constraints for the FittedBox wrap it with a container and set its width.

Upvotes: 2

Jitesh Mohite
Jitesh Mohite

Reputation: 34250

Just use Flexible Widget to make it parent for Column

  Flexible( 
          child: Column(
           //...
         ));

Full Example:

Container(
      decoration: BoxDecoration(
          color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
      height: MediaQuery.of(context).size.height * 0.40,
      width: MediaQuery.of(context).size.width * 0.85,
      child: Padding(
        padding: new EdgeInsets.all(20),
        child: Row(
          //mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
          children: [
            Flexible(
              child: Column(
                //mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'hi',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 10),
                  FittedBox(
                      fit: BoxFit.contain,
                      child: Text(
                        'kodsajhnidoasdoisahioasdohiasdhioúsadiophas',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 15,
                            fontWeight: FontWeight.normal),
                      )),
                ],
              ),
            )
          ],
        ),
      ),
    );

Row Widget causing the issue as it is taking full space horizontally, by adding Flexible it can shrink/grow according to text.

Upvotes: 1

Related Questions