将Flutter涟漪效应约束到带有圆形边框的文本字段

Question

我一直在尝试使波纹效果在带有圆形边框的TextField中正常工作。在示例代码中，有两个文本字段，都有问题。在顶部字段中，波纹效应不限于圆形边界；它延伸到小部件的矩形边界，如下所示（请忽略绿色圆圈）：

第二个窗口小部件尝试通过用Material和ClipRRect包围该字段来解决此问题。这部分起作用，并且通常将波纹效应正确地限制在组件的边界。但是，当验证失败并显示验证错误时，裁剪会弄乱渲染效果：

在所有情况下，是否有任何方法可以使波纹效果正确地停留在文本字段的边界内？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(inputDecorationTheme: _theme()),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              _textField(),
              ClipRRect(
                borderRadius: BorderRadius.circular(40),
                child: Material(
                  child: _textField(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  InputDecorationTheme _theme() => ThemeData.light().inputDecorationTheme.copyWith(
        errorBorder: _makeRoundedInputBorder(),
        enabledBorder: _makeRoundedInputBorder(),
        focusedBorder: _makeRoundedInputBorder(),
        focusedErrorBorder: _makeRoundedInputBorder(),
      );

  OutlineInputBorder _makeRoundedInputBorder() =>
      OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(40)));

  TextFormField _textField() => TextFormField(
        validator: (value) => value.length > 5 ? "Can't have more than five characters" : null,
        autovalidate: true,
      );
}

Answer 1

我使用了borderRadius和Material的clipBehavior，它对我有用。

Material(
  borderRadius: BorderRadius.circular(10),
  clipBehavior: Clip.hardEdge,
  child: _textField(),
)