Создание эффекта внутренней тени для кнопки с двухцветной рамкой во Flutter без внешних пакетов

Как создать эффект внутренней тени того же цвета, что и граница кнопки, созданной с помощью контейнеров? Кнопка имеет рамку двух цветов, как показано на следующем изображении.

Я встречал несколько пакетов, которые могут добиться такого эффекта, но я предпочитаю реализовать его без использования каких-либо пакетов.

вот мой код:

import 'package:flutter/material.dart';
import 'package:taskk/second_screen.dart';

class HomeScreen extends StatelessWidget {
HomeScreen({super.key});
final kInnerDecoration = BoxDecoration(
color: Color(0xFF18181B),
border: Border.all(color: Color(0xFF18181B)),
borderRadius: BorderRadius.circular(32),
);

final kGradientBoxDecoration = BoxDecoration(
gradient: LinearGradient(colors: [Color(0xFF2EB0CA), Color(0xFF8F56A4)]),
border: Border.all(
  color: Color(0xFF18181B),
),
borderRadius: BorderRadius.circular(32),
);
@override
Widget build(BuildContext context) {
  return Scaffold(
   body: SafeArea(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        InkWell(
          onTap: () => Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => Second(),
              )),
          child: Container(
            width: 221,
            child: Padding(
              padding: const EdgeInsets.all(2.0),
              child: Container(
                child: Center(
                    child: Text(
                  "Enter now",
                  style:
                      TextStyle(fontWeight: FontWeight.w700, fontSize: 16),
                )),
                decoration: kInnerDecoration,
              ),
            ),
            height: 43.0,
            decoration: kGradientBoxDecoration,
            ),
          ),
        ],
      ),
    ),
  );
 }
}

115
2

Ответы:

Вы можете аппроксимировать этот эффект, используя тень блока на внутреннем контейнере, чтобы создать градиент от более прозрачного к менее прозрачному при перемещении внутрь. Сначала обновите цвет фона, добавив немного прозрачности. Затем добавьте тень блока с помощью негатива spread, чтобы отбросить тень внутри блока. Если совместить полупрозрачный цвет фона с тенью, он станет более непрозрачным по мере приближения к тексту.

Попробуйте заменить kInnerDecoration на следующее, чтобы получить что-то похожее на прикрепленное изображение. Возможно, вам придется настроить некоторые из этих значений, чтобы они точно соответствовали вашему снимку экрана.

final kInnerDecoration = BoxDecoration(
  color: const Color(0x9918181B),
  borderRadius: BorderRadius.circular(32),
  boxShadow: const [
    BoxShadow(
      color: Color(0xFF18181B),
      blurRadius: 12,
      spreadRadius: -5,
    )
  ],
);


Решено

Основываясь на ответе pmitch16, мне удалось получить желаемые результаты, изменив kInnerDecoration на следующее:

 final kInnerDecoration = BoxDecoration(
color: Color(0x9918181B),
borderRadius: BorderRadius.circular(32),
boxShadow: [
  BoxShadow(
    color: Color.fromARGB(255, 10, 70, 116).withOpacity(1),
    blurRadius: 40,
    spreadRadius: -8,
  ),
  BoxShadow(
    offset: Offset(-5, 0),
    color: Color.fromARGB(255, 66, 7, 87),
    spreadRadius: -8,
    blurRadius: 40.0,
  ),
],
);

здесь я изменил значениеspreadRadius на отрицательное значение и добавил два желаемых цвета тени в список boxShadow.


Интересные вопросы для изучения

Как я могу прочитать статус принтера Boca с помощью Win32-пакета Flutter DartДля Flutter версии 3.19.2 требуется более новая версия плагина Kotlin Gradle. /android/build.gradle: ext.kotlin_version = '<последняя версия>'Распознавание лиц во Flutter с использованием Google ML KitКак сделать выбор даты и года в дизайне Купертино во флаттере?Build_runner показывает ошибку. Метод получения "macroKeyword" не определен для класса "ClassDeclaration"Правильный способ контейнеризации приложения ASP.NET Core Web APIОшибка при перечислении всех больших двоичных объектов в контейнере в операторе цикла for. Запрошенный URI не представляет какой-либо ресурс на сервереСоздание контейнера с помощью JIBSystem.Net.Http.HttpClient.SendAsync(request) останавливается через 30 секунд для метода POST внутри контейнера докеровЕсть ли какой-либо сценарий Powershell, который дает нам разрешения ACL для всех контейнеров в учетной записи хранения Gen 2?