Флаттер: проблема с увеличенной шириной кнопки - PullRequest
0 голосов
/ 05 марта 2020

У меня проблема с поднятой кнопкой на флаттере, мои коды работали без ошибок, но визуально поднятая кнопка имеет фон и занимает слишком большую ширину, я хочу от нее избавиться.

Это код:

  Widget _loginButton() {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Container(
              child: Text(
                'SUBMIT',
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w400,
                    color: Color(0xffD67219)),
              ),
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.symmetric(vertical: 10),
              margin: EdgeInsets.symmetric(
                  horizontal: MediaQuery.of(context).size.width / 3.5),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Color(0xffffffff),
                border: Border.all(
                  width: 1,
                  color: Color(0xffd67219),
                ),
                borderRadius: BorderRadius.circular(25.00),
              )),
          onPressed: validateAndSubmit,
        )
      ],
      mainAxisSize: MainAxisSize.min,
    );
  }

и это скриншот поднятой кнопки:

raised button

Ответы [ 2 ]

2 голосов
/ 05 марта 2020

Я написал этот фрагмент, который вы можете запустить на DartPad . Это то, что ты искал? Я думаю, что проблема заключалась в том, что Container был большим потомком RaisedButton, вам это совсем не нужно, вы можете определить форму и стиль кнопки в самой кнопке, нет необходимости добавлять дополнительных детей кроме текста.

Widget _loginButton() {
    return Row(
      children: <Widget>[
        RaisedButton(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25.00),
            side: BorderSide(
              color: Color(0xffd67219),
              width: 1,
            ),
          ),
          color: Color(0xffffffff),
          padding: EdgeInsets.symmetric(
            vertical: 10,
            horizontal: MediaQuery.of(context).size.width / 3.5,
          ),
          child: Text(
            'SUBMIT',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w400,
              color: Color(0xffD67219),
            ),
          ),
          onPressed: () {},
        )
      ],
      mainAxisSize: MainAxisSize.min,
    );
  }

Вот результат:

RaisedButton

0 голосов
/ 05 марта 2020

Попробуйте OutlineButton

    OutlineButton(
            shape: const StadiumBorder(),
            child: Text(
              'SUBMIT',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w400,
                  color: const Color(0xffD67219)),
            ),
            onPressed: validateAndSubmit,
          )

Если это стиль вашей кнопки в приложении. у вас должен быть конфиг в вашей теме

    accentColor: AppStyle.orange,
    buttonTheme: const ButtonThemeData(
        height: 40,
        shape: StadiumBorder(),
        buttonColor: AppStyle.orange,
        textTheme: ButtonTextTheme.accent,
      ),
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...