按钮在颤动中占据整个屏幕

Question

我正在构建一个带有颤振的 web 应用程序，我想在其中添加 google 登录。按钮本身工作正常，但无论我尝试什么，它都会占用我的整个屏幕。我尝试将按钮放在容器中的类中，然后将它放在我真正想要使用它的页面上的容器中。这是我第一次使用 Flutter Web，所以我真的很想知道为什么会这样。

这是我的按钮代码：

import 'package:flutter/material.dart';
import 'package:foci_dev/pages/main_page.dart';
import 'package:foci_dev/repo/database_repo.dart';
import 'package:foci_dev/repo/init_repo.dart';
import 'package:foci_dev/service/authentication.dart';

class GoogleButton extends StatefulWidget {
  @override
  _GoogleButtonState createState() => _GoogleButtonState();

  final DatabaseRepo databaseRepo;
  final InitRepo initRepo;
  GoogleButton(this.databaseRepo, this.initRepo);
}

class _GoogleButtonState extends State<GoogleButton> {
  bool _isProcessing = false;

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
          side: BorderSide(color: Colors.blueGrey, width: 3),
        ),
        color: Colors.white,
      ),
      child: OutlineButton(
        highlightColor: Colors.blueGrey[100],
        splashColor: Colors.blueGrey[200],
        onPressed: () async {
          setState(() {
            _isProcessing = true;
          });
          await signInWithGoogle().then((result) {
            print(result);
            Navigator.of(context).pop();
            Navigator.of(context).push(
              MaterialPageRoute(
                fullscreenDialog: true,
                builder: (context) =>
                    MainPage(widget.databaseRepo, widget.initRepo),
              ),
            );
          }).catchError((error) {
            print('Registration Error: $error');
          });
          setState(() {
            _isProcessing = false;
          });
        },
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
          side: BorderSide(color: Colors.blueGrey, width: 3),
        ),
        highlightElevation: 0,
        // borderSide: BorderSide(color: Colors.blueGrey, width: 3),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: _isProcessing
              ? CircularProgressIndicator(
                  valueColor: new AlwaysStoppedAnimation<Color>(
                    Colors.blueGrey,
                  ),
                )
              : Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 20),
                      child: Text(
                        'Bejelentkezés',
                        style: TextStyle(
                          fontSize: 20,
                          color: Colors.blueGrey,
                        ),
                      ),
                    )
                  ],
                ),
        ),
      ),
    );
  }
}

Answer 1

你可以在ButtonTheme中设置你的高度，像这样

return ButtonTheme( 
        minWidth: 200.0,
         height: 200.0, 
          child:DecoratedBox()
      );