如何在颤抖的两个按钮之间留出空间?

时间:2019-12-24 18:22:36

标签: 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,

这是我要执行的操作的屏幕快照,我正在使用Google登录和Facebook登录创建登录页面

enter image description here

2 个答案:

答案 0 :(得分:1)

为什么不尝试已经拥有的东西? SizedBox实现这一目标,

_signInButton(),
 SizedBox(height: 16),//<----
_signInFbButton()

答案 1 :(得分:0)

您可以使用_signInFbButton()包装Padding小部件,并根据需要提供顶部填充。下面的工作代码:

_signInButton(),
              Padding(
              padding: EdgeInsets.only(top: 5),
              child: _signInFbButton())

enter image description here

希望这能回答您的问题。