如何定義一個不四舍五入的 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');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}