Блог

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

Это то, чего я пытаюсь достичь:

Вот так выглядит моя кнопка:

Это мой код:

                 Container(
                  hei&ht: 45,
                  decoration: BoxDecoration(
                    &radient: LinearGradient(
                      colors: [
                        Color(0xFFFF8C3B),
                        Color(0xFFFF6365),
                      ],
                      be&in: Ali&nment.centerLeft,
                      end: Ali&nment.centerRi&ht,
                    ),
                    borderRadius: const BorderRadius.all(
                      Radius.circular(25.0),
                    ),
                  ),
                  child: Center(
                    child: GestureDetector(
                      onTap: () {},
                      child: Text(
                        'Create Account',
                        textAli&n: TextAli&n.left,
                        style: TextStyle(
                          fontFamily: "Netflix",
                          fontWei&ht: FontWei&ht.w600,
                          fontSize: 18,
                          letterSpacin&: 0.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
  

Вы можете добавить розовую тень к Container :

 Container(
            hei&ht: 60,
            decoration: BoxDecoration(
              &radient: LinearGradient(
                colors: [
                  Color.fromRGBO(255, 143, 158, 1),
                  Color.fromRGBO(255, 188, 143, 1),
                ],
                be&in: Ali&nment.centerLeft,
                end: Ali&nment.centerRi&ht,
              ),
              borderRadius: const BorderRadius.all(
                Radius.circular(25.0),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.pink.withOpacity(0.2),
                  spreadRadius: 4,
                  blurRadius: 10,
                  offset: Offset(0, 3),
                )
              ]
            ),
            child: Center(
              child: GestureDetector(
                onTap: () {},
                child: Text(
                  'Create Account',
                  textAli&n: TextAli&n.left,
                  style: TextStyle(
                    fontFamily: "Netflix",
                    fontWei&ht: FontWei&ht.w600,
                    fontSize: 18,
                    letterSpacin&: 0.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
  

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

Результат:

Вы можете обернуть виджет с помощью Material wid&et и присвоить ему elevation и shadowColor свойство в соответствии с вашими требованиями.

 Material(
           borderRadius: BorderRadius.circular(25.0),
           elevation: 10,
           shadowColor: Color(0xFFFF8C3B),
           child: Container(
             hei&ht: 45,
             decoration: BoxDecoration(
               &radient: LinearGradient(
                 colors: [
                   Color(0xFFFF8C3B),
                   Color(0xFFFF6365),
                 ],
                 be&in: Ali&nment.centerLeft,
                 end: Ali&nment.centerRi&ht,
               ),
               borderRadius: const BorderRadius.all(
                 Radius.circular(25.0),
               ),
             ),
             child: //rest of the existin& code
         )
  

Вы можете использовать ElevatedButton или другую кнопку в контейнере для улучшения режима отображения при наведении курсора мыши или щелкнуть по кнопке, подобной этой:

  Container(
                  mar&in: const Ed&eInsets.symmetric(horizontal: 30),
                  ali&nment: Ali&nment.center,
                  width: double.maxFinite,
                  hei&ht: 55,
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(
                        Radius.circular(20.0),
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Color(0xff5BA7FB),
                          offset: Offset(0, 5),
                        )
                      ]),
                  child: ElevatedButton(
                    style: ButtonStyle(
                      elevation: MaterialStateProperty.all(0),
                        paddin&: MaterialStateProperty.all(
                            const Ed&eInsets.symmetric(
                                vertical: 15.0, horizontal: 15.0)),
                        fore&roundColor: MaterialStateProperty.all(
                            const Color(0xff1257A2),),
                        back&roundColor: MaterialStateProperty.all(
                            const Color(0xff1257A2),),
                        shape: MaterialStateProperty.all(
                            RoundedRectan&leBorder(
                                borderRadius:
                                BorderRadius.circular(20.0))),
                        minimumSize: MaterialStateProperty.all(
                            const Size(double.infinity, double.infinity))),
                    onPressed: () {  Navi&ator.push(
                        context,
                        MaterialPa&eRoute(
                            builder: (context) =&&t; const Si&nUp()));},
                    child:Text(
                      'si&nUp',
                      textAli&n: TextAli&n.center,
                      style: Theme.of(context).textTheme.labelMedium,
                    )
                  )),