Растянуть границу внутри кнопки - PullRequest
Новая
       6

Растянуть границу внутри кнопки

0 голосов
/ 04 августа 2020

Я хочу сделать кнопку с двумя закругленными границами внутри друг друга. Должно получиться так

But currently it looks like this

Я попытался установить BoxDecoration в Container и попытался расширить контейнер с помощью Expanded или SizedBox.expand, но он просто не растягивается 

return FittedBox(
  child: RaisedButton(
    padding: EdgeInsets.all(2),
    onPressed: () {},
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: BorderSide(color: Colors.red, width: 3)
    ),
    child: Padding(
      padding: EdgeInsets.all(3),
      child: Expanded(
        child: Container(
          child: Text("Text"),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.blue, width: 3),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      )
    )
  )
);

Есть ли лучший способ нарисовать рамку внутри кнопки?

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Используйте GestureDetector flutter , чтобы кнопка работала, и используйте

  • Container()
  • Center()

для достижения вашего вышеупомянутого дизайна. Также читайте о BoxDecoration class . Это вам очень поможет. Остальное вы узнаете из самого кода ниже.

Код 

          GestureDetector(
            onTap: () => print('Hello'),
            child: Container(
              height: MediaQuery.of(context).size.height * 0.1,
              width: MediaQuery.of(context).size.width * 0.2,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12.0),
                // play with width to get the width of the border
                border: Border.all(color: Colors.red, width: 5.0),
                // play with blurRadius, and offset for the shadow
                boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 9.0, offset: Offset(5.0, 5.0))]
              ),
              child: Container(
                // play with margin for inside border
                margin: EdgeInsets.all(6.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12.0),
                  // play with width to get the width of the border
                  border: Border.all(color: Colors.blue, width: 5.0)
                ),
                child: Center(
                  child: Text('Text', textAlign: TextAlign.center)
                )
              )
            )
          )

Результат

Результирующее изображение

1 голос
/ 04 августа 2020

Удалите FittedBox и оберните внутреннюю Container SizedBox.expand: 

RaisedButton(
                padding: EdgeInsets.all(2),
                onPressed: () {},
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                    side: BorderSide(color: Colors.red, width: 3)),
                child: Padding(
                    padding: EdgeInsets.all(3),
                    child: SizedBox.expand(
                      child: Container(
                        child: Center(child: Text("Text")),
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.blue, width: 3),
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                    )))

Результат:

img

...