Как создать эффект внутренней тени того же цвета, что и граница кнопки, созданной с помощью контейнеров? Кнопка имеет рамку двух цветов, как показано на следующем изображении.
Я встречал несколько пакетов, которые могут добиться такого эффекта, но я предпочитаю реализовать его без использования каких-либо пакетов.
вот мой код:
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,
),
),
],
),
),
);
}
}
Вы можете аппроксимировать этот эффект, используя тень блока на внутреннем контейнере, чтобы создать градиент от более прозрачного к менее прозрачному при перемещении внутрь. Сначала обновите цвет фона, добавив немного прозрачности. Затем добавьте тень блока с помощью негатива 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.