Flutter Question posted in
The official Flutter documentation can be found here.

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    You can approximate this effect using a box shadow on your inner container to create a gradient from more transparent to less as you move inside. First, update the background color with some small amount of transparency. Then, add a box shadow with a negative spread to cast a shadow inside the box. Stacking the semi-transparent background color with the shadow will make it more opaque as you get closer to the text.

    Try replacing kInnerDecoration with the following to get something that looks like the attached image. You may need to tweak some of these values to match your screenshot exactly.

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

    Image of button with blurred gradient interior

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search