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

Question

Now that FlatButton is deprecated, it can be replaced by a TextButton. Though, the default TextButton is slightly rounded. How can I define non rounded TextButton's in order to obtain the same layout than using FlatButton's?

Here's the code and its result:

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

Here's the solution: you add

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

to the TextButton style.

Full code:

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