Блог

Главная - Вопросы по программированию - Порхание: наложение стека и чернил

Порхание: наложение стека и чернил

#flutter #stack

#порхание #стек

Вопрос:

Я использую Stack для воссоздания этого эффекта :

введите описание изображения здесь

Но по какой-то причине, используя Ink виджет для получения эффекта градиента, вот что у меня есть :

введите описание изображения здесь

Это мой код :

 Stack(
                        children: [
                          SizedBox(
                            height: 100.0,
                            width: 100.0,
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(20.0),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://images.unsplash.com/photo-1570296767266-60ccc88974a5',
                                fit: BoxFit.cover,
                                placeholder: (context, url) => MC_Shimmer(),
                              ),
                            ),
                          ),
                          Positioned(
                            right: -5.0,
                            bottom: -5.0,
                            child: SizedBox(
                              height: 30.0,
                              width: 30.0,
                              child: Ink(
                                decoration: BoxDecoration(
                                  gradient: gradient,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(5.0)),
                                ),
                                child: Icon(
                                  OMIcons.cameraAlt,
                                  color: Colors.white,
                                  size: 15.0,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),

Комментарии:

1. Я точно не знаю, сработает ли это. Но попробуйте обернуть Ink () в виджет Material.

2. Я тоже пытался, но это не сработало :/

Ответ №1:

вы можете использовать контейнер вместо чернил и можете использовать эффект градиента.

 Positioned(
      right: -5.0,
      bottom: -5.0,
      child: SizedBox(
        height: 30.0,
        width: 30.0,
        child: Container(
          decoration: BoxDecoration(
            gradient: gradient,
            borderRadius:
            BorderRadius.all(Radius.circular(5.0)),
          ),
          child: Icon(
            OMIcons.cameraAlt,
            color: Colors.white,
            size: 15.0,
          ),
        ),
      ),
    )

Комментарии:

1. Понятно, я также забыл присвоить свойству overflow значение visible. Спасибо 🙂

Ответ №2:

Я попробовал это в dart pad, все сработало нормально.

 Positioned(
                    right: -5.0,
                    bottom: -5.0,
                    child: SizedBox(
                      height: 30.0,
                      width: 30.0,
                      child: Material(
                        child: Ink(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                                colors: [Colors.pink, Colors.yellow]),
                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                          ),
                          child: Icon(
                            Icons.camera,
                            color: Colors.white,
                            size: 15.0,
                          ),
                        ),
                      ),
                    ),
                  )