flutter - 如何在 flutter 中更改按钮的大小?

标签 flutter dart

我在登录页面上有三个按钮,当我在一个按钮中键入较大的文本时,它们每个都是不同的登录选项,它本身正在改变如何使所有内容保持不变。有人可以调查一下。

这是我的代码:

child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlutterLogo(size: 150),
              SizedBox(height: 50),
              _signInButton(),
              _signInFbButton()
            ],
          ),
        ),
      ),
    );
  }

  Widget _signInButton() {


    return Container(
      child: OutlineButton(
        splashColor: Colors.grey,
        onPressed: () {
          signInWithGoogle().whenComplete(() {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) {
                  return FirstScreen();
                },
              ),
            );
          });
        },
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
        highlightElevation: 0,
        borderSide: BorderSide(color: Colors.grey),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image(image: AssetImage("Assets/google_logo.png"), height: 35.0),
                  Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Text(
                      'Sign in with Google',
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.grey,



  }
  Widget _signInFbButton() {


    return Container(
      child: OutlineButton(
        splashColor: Colors.grey,
        onPressed: () {
          signInWithGoogle().whenComplete(() {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) {
                  return FirstScreen();
                },
              ),
            );
          });
        },
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
        highlightElevation: 0,
        borderSide: BorderSide(color: Colors.grey),
        child: Container(
          child: Padding(

            padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image(image: AssetImage("Assets/facebook-logo.png"), height: 35.0),
                    Padding(
                      padding: const EdgeInsets.only(left: 10),
                      child: Text(
                        'Sign in with Google',
                        style: TextStyle(
                          fontSize: 20,
                          color: Colors.grey,

这是我想让所有按钮保持不变并且其中的文本格式正确的屏幕截图,其中包括:
enter image description here

最佳答案

您不需要我认为的专栏。所以,我删除了。这是创建尺寸自定义按钮的方法。随时更改 minWidth 以获得最佳结果。

新功能:请考虑在行内使用灵活的扩展的。如果按钮文本为多行,请减小字体大小以进行修复。

     Widget _signInButton() {
    return ButtonTheme(
      minWidth: 400.0,
      padding: EdgeInsets.all(10),
      child: OutlineButton(
          splashColor: Colors.grey,
          onPressed: () {},
          shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
          highlightElevation: 0,
          borderSide: BorderSide(color: Colors.grey),

             child:   Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Flexible(
                        flex: 1,
                        child: Image.network(
                          'https://picsum.photos/250?image=9',
                          height: 35,
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child:  Padding(
                            padding: const EdgeInsets.only(left: 10),
                            child: Text('Sign in with Facebook',
                                style: TextStyle(
                                    fontSize: 20, color: Colors.grey))),
                      )

                    ])
              ),
    );
  }

关于flutter - 如何在 flutter 中更改按钮的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59472953/

相关文章:

flutter - 更改应用程序语言后,showTimePicker 对话框会出现 24 小时抖动

dart - Polymer + dart2js:输出太大

api - 选择 flutter 中下拉按钮的初始值

flutter - 为图标添加边框抖动

flutter - 显示顶部带有图钉的交互式图像

flutter - 无法在 BuildContext 上使用扩展

flutter - easy_localization 对其他语言的键有回退值

dart - 使用百分比在堆栈中定位小部件

dart - 如何在 Dart 中创建一个 BigInt

flutter - 在执行 invokeMethod() 时如何监听异步响应?