flutter中的按鈕占據整個屏幕

Question

我正在使用 flutter 構建一個 web 應用程序，我想在其中添加 google 登錄。按鈕本身工作正常，但無論我嘗試什么，它都會占用我的整個屏幕。 我嘗試將 class 中的按鈕放入容器中，然后將其放入我真正想要使用它的頁面上的容器中。 這是我第一次使用 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()
      );