无法缩小升高按钮的尺寸

Question

我正在尝试重现苹果备忘录按钮。现在，我正在尝试减小停止按钮的大小。首先，我尝试不使用 SizedBox，然后尝试使用。我得到了相同的结果。即使嵌入到 SizedBox 中，我也无法实现我想要的。 请问，有人可以告诉我我错过了什么吗？谢谢你。

Container _RecordButton(){
    return Container(
        height: 90,
        width: 90,
        decoration: BoxDecoration(
          border: Border.all(
            width: 4.0,
            color: Colors.grey,
          ),
          shape: BoxShape.circle,
        ),
      child: Padding(
          padding: EdgeInsets.all(4.0),
          child:  isRecording == false?
          _createRecordElevatedButton() : _createStopElevatedButton()),);
  }


  ElevatedButton _createRecordElevatedButton(
      {IconData icon,  Function onPressFunc}) {
    return ElevatedButton(
        onPressed: () {
          if (isRecording = false){

            setState(() {
              isRecording = true;
            });

        }},
        style: ButtonStyle(
        shape: MaterialStateProperty.all(CircleBorder()),
        padding: MaterialStateProperty.all(EdgeInsets.all(20)),
        backgroundColor: MaterialStateProperty.all(Colors.red), // <-- Button color

            /*overlayColor: MaterialStateProperty.resolveWith<Color>((states) {
          if (states.contains(MaterialState.pressed))
            return Colors.red; // <-- Splash color
        }*/));

  }

  SizedBox _createStopElevatedButton(
      {IconData icon,  Function onPressFunc}) {
    return SizedBox(
      height: 14,
      width: 14,
      child: ElevatedButton(

          onPressed: () {
           /* if (isRecording = true){

              setState(() {
                isRecording = false;
              });

            }*/
            },
          style: ButtonStyle(
            fixedSize: MaterialStateProperty.all(Size(10,10)),
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16.0),
                      side: BorderSide(color: Colors.red)
                  )
              ),

            padding: MaterialStateProperty.all(EdgeInsets.all(20)),
            backgroundColor: MaterialStateProperty.all(Colors.red), // <-- Button color

            /*overlayColor: MaterialStateProperty.resolveWith<Color>((states) {
            if (states.contains(MaterialState.pressed))
              return Colors.red; // <-- Splash color
          }*/)),
    );

  }

Answer 1

用容器包裹升高的按钮，并相应地给出高度和宽度。

 Container(
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: Colors.grey)),
              child: Container(
                  padding: EdgeInsets.all(7),
                  width: 50.0,
                  height: 50.0,
                  child: ElevatedButton(
                    onPressed: () {},
                    style: ButtonStyle(
                      fixedSize: MaterialStateProperty.all(Size(10, 10)),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10),
                              side: BorderSide(color: Colors.red))),
                      padding: MaterialStateProperty.all(EdgeInsets.all(20)),
                      backgroundColor: MaterialStateProperty.all(Colors.red),
                    ),
                    child: null,
                  )),
            ),

Answer 2

请将您的代码替换为以下代码：

class MyElevatedButton extends StatefulWidget {
  const MyElevatedButton({Key? key}) : super(key: key);

  @override
  _MyElevatedButtonState createState() => _MyElevatedButtonState();
}

class _MyElevatedButtonState extends State<MyElevatedButton> {
  bool isRecording=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: 90,
                width: 90,
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 4.0,
                    color: Colors.grey,
                  ),
                  shape: BoxShape.circle,
                ),
                child: Padding(
                    padding: EdgeInsets.all(4.0),
                    child: isRecording == false
                        ? _createRecordElevatedButton(icon:  Icons.add)
                        : _createStopElevatedButton(icon:  Icons.minimize,onPressFunc: (){})),
              ),

            ],
          ),
        ),
      ),
    );
  }

/*  Container _RecordButton() {
    return Container(
      height: 90,
      width: 90,
      decoration: BoxDecoration(
        border: Border.all(
          width: 4.0,
          color: Colors.grey,
        ),
        shape: BoxShape.circle,
      ),
      child: Padding(
          padding: EdgeInsets.all(4.0),
          child: isRecording == false
              ? _createRecordElevatedButton()
              : _createStopElevatedButton()),
    );
  }*/

  Widget _createRecordElevatedButton(
      // ignore: unused_element
      {required IconData icon,/* VoidCallback onPressFunc*/}) {
    return ElevatedButton(
        onPressed: () {
          if (isRecording = false) {
            setState(() {
              isRecording = true;
            });
          }
        },
        style: ButtonStyle(
          shape: MaterialStateProperty.all(CircleBorder()),
          padding: MaterialStateProperty.all(EdgeInsets.all(20)),
          backgroundColor:
              MaterialStateProperty.all(Colors.red), // <-- Button color

          /*overlayColor: MaterialStateProperty.resolveWith<Color>((states) {
          if (states.contains(MaterialState.pressed))
            return Colors.red; // <-- Splash color
        }*/
        ), child: Text('play'),);
  }

  // ignore: unused_element
  SizedBox _createStopElevatedButton({required IconData icon, required VoidCallback onPressFunc}) {
    return SizedBox(
      height: 14,
      width: 14,
      child: ElevatedButton(
          onPressed: () {
            /* if (isRecording = true){

              setState(() {
                isRecording = false;
              });

            }*/
          },
          style: ButtonStyle(
            fixedSize: MaterialStateProperty.all(Size(10, 10)),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16.0),
                    side: BorderSide(color: Colors.red))),

            padding: MaterialStateProperty.all(EdgeInsets.all(20)),
            backgroundColor:
                MaterialStateProperty.all(Colors.red), // <-- Button color

            /*overlayColor: MaterialStateProperty.resolveWith<Color>((states) {
            if (states.contains(MaterialState.pressed))
              return Colors.red; // <-- Splash color
          }*/
          ), child: Text('onPressed'),),
    );
  }
}

Answer 3

试试这个代码：

我的ElevatedButton

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class MyElevatedButton extends StatefulWidget {
  const MyElevatedButton({Key? key}) : super(key: key);

  @override
  _MyElevatedButtonState createState() => _MyElevatedButtonState();
}

class _MyElevatedButtonState extends State<MyElevatedButton> {
  bool isRecording=false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: 90,
                width: 90,
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 4.0,
                    color: Colors.grey,
                  ),
                  shape: BoxShape.circle,
                ),
                child: Padding(
                    padding: EdgeInsets.all(4.0),
                    child: isRecording == false
                        ? _createRecordElevatedButton() /*_createRecordElevatedButton(icon:  Icons.add,)*/
                        : _createStopElevatedButton()),
              ),

            ],
          ),
        ),
      ),
    );
  }



  Widget _createRecordElevatedButton(){
    return GestureDetector(
      onTap: (){
        setState(() {
          isRecording = true;
        });
        print('clickOnPressedButton');
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Center(child: Text('Play',style: TextStyle(fontSize: 12,color: Colors.white),)),
      ),
    );
  }

  Widget _createStopElevatedButton(){
    return GestureDetector(
      onTap: (){
        setState(() {
          isRecording = false;
        });
        print('clickOnPressedButton');
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Center(child: Text('Pause',style: TextStyle(fontSize: 12,color: Colors.white),)),
      ),
    );
  }

}

Answer 4

此代码适用于我的 Flutter 应用程序。:

ElevatedButton(
  onPressed: () {
    //action
  },
  style: ButtonStyle(
    minimumSize: MaterialStateProperty.all(Size(100, 40)), // resize
    backgroundColor: MaterialStateProperty.all(Colors.blue), // backgroundcolor belakang
    //others
  ),
  child: Text('Press Me'),
)