如何定义一个不四舍五入的 Flutter TextButton？

Question

现在 FlatButton 已弃用，可以用 TextButton 代替。 不过，默认的 TextButton 略微圆润。 我如何定义非圆形 TextButton 以获得与使用 FlatButton 相同的布局？

这是代码及其结果：

import 'package:flutter/material.dart';

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

class XylophoneApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.red,
                  ),
                  onPressed: () {
                    print('note1.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.orange,
                  ),
                  onPressed: () {
                    print('note2.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.yellow,
                  ),
                  onPressed: () {
                    print('note3.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.green,
                  ),
                  onPressed: () {
                    print('note4.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.teal,
                  ),
                  onPressed: () {
                    print('note5.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.blue,
                  ),
                  onPressed: () {
                    print('note6.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.purple,
                  ),
                  onPressed: () {
                    print('note7.wav');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

这是解决方案：您添加

  shape: const BeveledRectangleBorder(borderRadius: BorderRadius.zero),

到 TextButton 样式。

完整代码：

import 'package:flutter/material.dart';

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

class XylophoneApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.red,
                    shape:
                        const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
                  ),
                  onPressed: () {
                    print('note1.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.orange,
                    shape:
                        const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
                  ),
                  onPressed: () {
                    print('note2.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.yellow,
                    shape:
                        const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
                  ),
                  onPressed: () {
                    print('note3.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.green,
                    shape:
                        const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
                  ),
                  onPressed: () {
                    print('note4.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.teal,
                    shape:
                        const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
                  ),
                  onPressed: () {
                    print('note5.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.blue,
                    shape:
                        const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
                  ),
                  onPressed: () {
                    print('note6.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: const Text(''),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.purple,
                    shape:
                        const BeveledRectangleBorder(borderRadius: BorderRadius.zero),
                  ),
                  onPressed: () {
                    print('note7.wav');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}