在圆形框装饰内添加文本小部件答案

【问题标题】：Adding text widget inside circular box decoration在圆形框装饰内添加文本小部件
【发布时间】：2021-05-30 14:21:45
【问题描述】：

我想在圆形框装饰内添加文字。我有以下代码，但文本一半在圆圈内，一半在圆圈外。如何调整它以确保文本始终保持在圆圈内？还有，怎样才能把圈子变大？

 child: Container(
    padding: const EdgeInsets.all(12),
    child: Text(
      title,
      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 16),
 
    ),
    decoration: BoxDecoration(
      shape:BoxShape.circle,
      image: DecorationImage(    
          image: returnImage(id),
          fit: BoxFit.fill,
          colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.5), BlendMode.dstATop),
        ),
    ),
  ),

【问题讨论】：

您好。发布您的容器的父级。您还可以分享当前正在发生的事情的屏幕截图。还需要更好地解释您想要实现的不同目标。

标签： flutter grid-layout

【解决方案1】：

将您的Text 包裹在ClipRRect 中

Container(
  width: 100,
  height: 100, // height should be equal to width
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(50), // half of the width
    image: DecorationImage(),
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(50), // same as the Container
    child: Text(),
  ),
);

【讨论】：

我认为这不是 OP 面临的问题。

【解决方案2】：

如果你想增加容器的大小，我建议你先增加父小部件的大小。

但为了正确的解决方案，请提供父小部件结构。

【讨论】：