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

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

3 голосов
/ 28 мая 2020

Цель: Рисование границы вокруг FlatButton всякий раз, когда пользователь нажимает эту кнопку.

Другими словами: вызывается onPressed()? -> DrawBorder()

Пример использования: Окончательный пользовательский интерфейс должен позволять пользователю выбирать несколько кнопок, эти выбранные кнопки должны иметь границу, чтобы пользователь знал, что у них есть было выбрано.

Проблема: Невозможно нарисовать границу программно, не говоря уже о наличии нескольких кнопок (около 9 кнопок или около того) в одном пользовательском интерфейсе.

Screenshot showing the buttons

Код кнопки: 

 FlatButton(
   color: kWhite,
   onPressed: () {},
   child: Image.asset('assets/images/gucci.jpg'),
   shape: RoundedRectangleBorder( //Draw when user clicks on the button 
     side: BorderSide(
     color: kDarkTitleColor, width: 1),
     ),
       padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
      ),

1 Ответ

2 голосов
/ 28 мая 2020

Вы можете обернуть свою кнопку в StatefulWidget следующим образом: 

class BorderedFlatButton extends StatefulWidget {
  @override
  _BorderedFlatButtonState createState() => _BorderedFlatButtonState();
}

class _BorderedFlatButtonState extends State<BorderedFlatButton> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      color: kWhite,
      onPressed: () {
        print(isSelected);
        setState(() {
          isSelected = !isSelected;
        });
      },
      child: Image.asset('assets/images/gucci.jpg'),
      shape: RoundedRectangleBorder(
        side: BorderSide(
            color: isSelected ? kDarkTitleColor : Colors.transparent, width: 1),
      ),
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    );
  }
}

PS: Здесь я добавил переменную состояния isSelected, которая указывает, выбрана кнопка или нет.

...