Search code examples
fluttercontainers

Creating Inner Shadow Effect for Button with Two-Colored Border in Flutter Without External Packages


How can I create an inner shadow effect with the same colors as the border for a button that is created using containers? The button has two colors for the border, as shown in the following image.

Button

I came across some packages that can achieve this effect, but I prefer to implement it without using any packages.

here is my code:

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,
            ),
          ),
        ],
      ),
    ),
  );
 }
}

Solution

  • Building on pmitch16's answer, I was able to get the desired results by changing the kInnerDecoration to the following:

     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,
      ),
    ],
    );
    

    here i changed the spreadRadius to a negative a value and added the two desired shadow colors to the boxShadow list.