英文:
How can I leave textButton below the Text
问题
I'm doing a project on Flutter. I'm having a hard time making this button, I'll leave the photo and the code.
Positioned(
bottom: -50,
child: Container(
width: 281,
height: 111,
decoration: BoxDecoration(
color: orangeDetails.withOpacity(0.8),
borderRadius: BorderRadius.circular(9),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 3,
blurRadius: 4,
offset: Offset(0, 2),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset(
"assets/images/metro.png",
width: 100,
),
Align(
alignment: Alignment.center,
child: Text(
"Acompanhe a rotas das linhas \n e estações do metrô \n de Recife",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w700,
),
),
),
// TextButton(
// onPressed: (){},
// child: Text("VER LINHAS"),
// style: ButtonStyle(
// foregroundColor: MaterialStateProperty.all(Colors.black),
// backgroundColor:MaterialStateProperty.all(blueDetails),
// fixedSize: MaterialStateProperty.all(const Size(95, 5)),
// shape: MaterialStateProperty.all<RoundedRectangleBorder>(
// RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(3),
// )
// )
// ),
// ),
],
),
),
);
How can I increment this TextButton in the photo? Please, can someone help me?
英文:
I'm doing a project on Flutter. I'm having a hard time making this button, I'll leave the photo and the code.enter image description here
Positioned(
bottom: -50,
child: Container(
width: 281,
height: 111,
decoration: BoxDecoration(
color: orangeDetails.withOpacity(0.8),
borderRadius: BorderRadius.circular(9),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
spreadRadius: 3,
blurRadius: 4,
offset: Offset(0, 2) // muda a posição da sombra
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset(
"assets/images/metro.png",
width: 100,
),
Align(
alignment: Alignment.center,
child: Text(
"Acompanhe a rotas das linhas \n e estações do metrô \n de Recife",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w700,
),
),
),
// TextButton(
// onPressed: (){},
// child: Text("VER LINHAS"),
// style: ButtonStyle(
// foregroundColor: MaterialStateProperty.all(Colors.black),
// backgroundColor:MaterialStateProperty.all(blueDetails),
// fixedSize: MaterialStateProperty.all(const Size(95, 5)),
// shape: MaterialStateProperty.all<RoundedRectangleBorder>(
// RoundedRectangleBorder(
// borderRadius: BorderRadius.circular(3),
// )
// )
// ),
// ),
],
),
),
),´
How can I increment this textButton of the photo? Pls, someone can help me??
答案1
得分: 1
不要担心,我们在开始学习Flutter时也和你一样 看一下我的图片,你会明白如何分析布局:
Row(children: [
Image... // 在这里插入你的图片
Expanded( // 扩展右侧的剩余空间
child: Column(
mainAxisSize: MainAxisSize.min, // 最小化列的大小,如果没有这个代码,布局会出问题
children: [
Text // 在这里插入你的文本
TextButton // 在这里插入你的文本按钮
]
)
)
])
英文:
Don't worry, we same as you when we start learning Flutter Take a look as my picture, you would understand how to analyze the layout:
Row(children: [
Image... // your image here
Expanded( // expand rest of right space
child: Column(
mainAxisSize: MainAxisSize.min, //minimize the size of column, if don't have this code, layout will be broken
children: [
Text // your text here,
TextButton // your text button here
]
)
)
])
答案2
得分: 0
为了将Text下面的textButton留在下方,您可以使用Row而不是Column。祝您有美好的一天。
英文:
in order to leave the textButton below the Text , you can use Row instead of Column.
Have a nice day.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论