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

Posted 2023-02-23

【中文标题】按钮在颤动中占据整个屏幕

【英文标题】：Button taking up whole screen in flutter

【发布时间】：2021-03-30 10:19:48

【问题描述】：

我正在构建一个带有颤振的 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,
                        ),
                      ),
                    )
                  ],
                ),
        ),
      ),
    );
  

【参考方案1】：

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

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

 

【讨论】：

还是占满整个屏幕

现在再次检查我设置了主要返回小部件，我更新了我的答案。它对你有用

还是不行，对不起:(

你能添加完整的代码吗，意思是你添加谷歌按钮小部件的地方