Блог

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

 style: ButtonStyle(
                   backgroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) { 
       if (states.contains(MaterialState.pressed)) {
            return Colors.black;}
       return Colors.red;}))
 

Это меняет цвет с красного на черный при прикосновении.
Но я не могу найти способ изменить размер кнопки и создать закругленные края. Я знаю, как это сделать с помощью функции ElevatedButton.styleForm (), но с помощью функции styleForm() я не знаю, как заставить ее менять цвет при прикосновении. Есть ли другой способ сделать это с помощью styleForm или объединить оба стиля в одном коде?

используя свойство style, вы можете создать свою собственную фигуру.

  SizedBox(
                    height: 50,
                    child: ElevatedButton(
                        style: ButtonStyle(
                            shape: MaterialStateProperty.all<
                                    RoundedRectangleBorder>(
                                RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(18.0),
                                    side: BorderSide(color: Colors.red)))),
                        onPressed: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => SignUp()));
                        },
                        child: const Text("Sign up here")),
                  ),