具有边界半径的圆角

Question

我有下一个代码：

import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/painting.dart';

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

class XylophoneApp extends StatelessWidget {
  void playSound(int soundNumber) {
    final player = AudioCache();
    player.play('note$soundNumber.wav');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              TextButton(
                style: ButtonStyle(
                  padding: MaterialStateProperty.all<EdgeInsets>(
                      EdgeInsets.fromLTRB(0, 0, 0, 0)),
                ),
                onPressed: () {
                  playSound(1);
                },
                child: Container(
                  height: 80,
                  width: 90,
                  color: Color(0xffFF80AB),
                ),
              ),
              TextButton(
                style: ButtonStyle(
                  padding: MaterialStateProperty.all<EdgeInsets>(
                      EdgeInsets.fromLTRB(0, 0, 0, 0)),
                ),
                onPressed: () {
                  playSound(2);
                },
                child: Container(
                  height: 80,
                  width: 90,
                  color: Color(0xff880E4F),
                ),
              ),
              TextButton(...),
              TextButton(...),
              TextButton(...),
              TextButton(...),
              TextButton(...),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

.App {
  display: flex;
  align-items: center;
}

img {
  height: 300px;
  border-top-left-radius: 105px 220px;
  border-bottom-left-radius: 105px 220px;
  width: 100%
}
.txt,
.img {
  width: 100%;
}

但核心是太四舍五入。我想得到这样的东西：

如何获得预期的结果？

Answer 1

我一直在努力减少图像容器的高度。它“剪切”了图像的顶部和底部，但我认为它将对您有用。

.App {
  display: flex;
  align-items: center;
}

img {
  height: 300px;
  border-top-left-radius: 105px 220px;
  border-bottom-left-radius: 105px 220px;
  width: 100%
}
.txt,
.img {
  width: 100%;
}

.img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  overflow: hidden;
}

<div class="App">
      <div class="txt">
        test test test testtest testtest test test test test testtest testtest
        test test test test testtest testtest test test test test testtest
        testtest test test test test testtest testtest test
      </div>
      <div class="img">
        <img src="https://wallpapercave.com/wp/wp4013881.jpg" />
      </div>
    </div>