Flutter 文本溢出带有边框半径的父容器

Question

I created a parent container with border radius circular but the text does not follow the same and overflows the container on the bottom left.How to make the text adjust to parent container?

Answer 1

Just add some padding using the padding parameter in your container and you are good to go!

Container(padding: EdgeInsets.all(10),)

You'll find everything about it here.

Answer 2

use the property clipBehavior and set it to Clip.antiAlias like the example below

Container(
      margin: EdgeInsets.only(left: 10, right: 10),
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: const BorderRadius.all(Radius.circular(10)),
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 6,
            offset: const Offset(0, 3),
          ),
        ],
        child: Container(
        colors: Colors.amber,
        child:Text('hello world'),
       ),
      ),

Answer 3

Just your text to new container and give the height and width to it, and do not to forget to change overflow property in Text widget. You can also wrap these widgets in to FittedBox, to size text to the container.