飞溅在 Container/FlatButton 之外流动 - Flutter

Question

我正在尝试让启动画面与我的 Container 具有相同的形状，该 Container 的子元素是 FlatButton。

按下时，飞溅当前填充不同的形状，如下所示：

我的小部件代码如下：

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
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以使用 ClipRRect 小部件，它使用圆角剪辑底层小部件，并使用 borderRadius 属性并传递与父小部件相同的 radius 即 Container，即用ClipRRect包裹FlatButton以达到预期效果。以下示例工作代码：

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
          ),
        ),
      ),
      )
    ),

希望这能回答您的问题。

飞溅在 Container/FlatButton 之外流动 - Flutter

Splash flows outside of Container/FlatButton - Flutter

android

ios

flutter

dart

mobile-development