Блог

Я создаю веб-приложение с помощью flutter, в котором я хочу добавить вход в Google. Сама кнопка работает нормально, но что бы я ни пробовал, она просто занимает весь мой экран. Я попытался поместить кнопку в классе в контейнер и поместить ее в поле размера на странице, на которой я действительно хочу ее использовать, и ограничить размер самой кнопки. Это мой первый опыт работы с flutter web, поэтому мне бы очень хотелось знать, почему это происходит.

Вот мой код для кнопки:

 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 SizedBox(
      height: MediaQuery.of(context).size.height / 10,
      child: FlatButton(
          height: MediaQuery.of(context).size.height / 10,
          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;
            });
          },
          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,
                                ),
                              ))
                        ]))),
    );
  }
}
 

Просто на всякий случай, вот код для самой страницы:

 import 'package:flutter/material.dart';
import 'package:foci_dev/repo/database_repo.dart';
import 'package:foci_dev/repo/init_repo.dart';
import 'package:foci_dev/ui/google_button.dart';

class SignInPage extends StatelessWidget {
  final DatabaseRepo databaseRepo;
  final InitRepo initRepo;
  SignInPage(this.databaseRepo, this.initRepo);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[800],
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
              height: MediaQuery.of(context).size.height / 5,
              width: MediaQuery.of(context).size.height / 5,
              child: Column(
                children: [
                  Image(image: AssetImage('lib/assets/icon.png')),
                  Container(
                      height: MediaQuery.of(context).size.height / 10,
                      child: ButtonTheme(
                          height: 20,
                          child:
                              GoogleButton(this.databaseRepo, this.initRepo))),
                ],
              )),
        ],
      ),
    );
  }
}
 

Большое вам спасибо за вашу помощь, я действительно не знаю, что делать.