gpt4 book ai didi

android - 飞溅流在Container/FlatButton外部-Flutter

转载 作者:行者123 更新时间:2023-12-03 04:53:20 25 4
gpt4 key购买 nike

我正在尝试使初始画面与我的具有FlatButton作为其子容器的容器匹配相同的形状。

按下时,飞溅当前填充为不同的形状,如下所示:

enter image description here

我的小部件代码如下:

import 'package:flutter/material.dart';

class RoundedButton extends StatelessWidget {

const RoundedButton( {this.buttonColor, this.buttonTitle, @required this.onPressed});

final Color buttonColor;
final String buttonTitle;
final Function onPressed;

@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(vertical: 16.0),
height: 42.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: buttonColor,
),
child: FlatButton(
onPressed: onPressed,
child: Text(
buttonTitle,
style: TextStyle(
color: Colors.white
),
),
),
);
}
}

最佳答案

您可以使用ClipRRect小部件,该部件将带有圆角的基础小部件裁剪,并使用borderRadius属性并传递与父小部件相同的radius,即Container,即,将FlatButtonClipRRect包装在一起,以实现所需的效果。下面的示例工作代码:

body: Container(
margin: EdgeInsets.symmetric(vertical: 16.0),
height: 42.0,
width: 200.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: FlatButton(
onPressed: () {
print('pressed');
},
child: Text(
'Send',
style: TextStyle(
color: Colors.white
),
),
),
)
),

希望这能回答您的问题。

关于android - 飞溅流在Container/FlatButton外部-Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61026309/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com