英文:
how to a place half of the widget outside of another widget in flutter?
问题
I want to place the half of the badge inside the container above the three dots.
我想将徽章的一半放在容器内，位于三个点的上方。
英文:
I have a Column which has a 2 items : 1- badge and 2- container . I want to place the half of the badge inside the container , the image will be more clear ,
and here is the parts of code :
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
badges.Badge(
badgeContent:
Icon(Icons.check, color: Colors.white, size: 10),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Triggered')
),
),
Container(
width: double.infinity,
decoration: containerRadius(Colors.grey[200], 12),
margin: EdgeInsets.all(4),
child: Text('Description')
),
],
);
is there any idea how can I place half of the badge inside the container above the three dots ? thanks
答案1
得分: 2
你可以使用 Stack 小部件，确保在 Stack 上使用 clipBehavior: Clip.none,，并用定位小部件（如 Align、Positioned 小部件）包装子元素。
Stack(
clipBehavior: Clip.none,
children: [
Positioned(
right: -10, // 负值表示在外部
top: -10,
child: badges.Badge(
badgeContent:
Icon(Icons.check, color: Colors.white, size: 10),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('已触发')),
),
),
Positioned.fill(
child: Container(
margin: EdgeInsets.all(4),
child: Text('描述')),
),
],
),
注意：我已将 "Triggered" 和 "Description" 翻译成中文。
英文:
You can use Stack widget, make sure use clipBehavior: Clip.none, on Stack and wrap children with positional widget like Align, Positioned widget.
Stack(
clipBehavior: Clip.none,
children: [
Positioned(
right: -10, // negative means outside
top: -10,
child: badges.Badge(
badgeContent:
Icon(Icons.check, color: Colors.white, size: 10),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Triggered')),
),
),
Positioned.fill(
child: Container(
// decoration: containerRadius(Colors.grey[200], 12),
margin: EdgeInsets.all(4),
child: Text('Description')),
),
],
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论