button with shadow

button_with_shadow.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.white,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: const [
              SizedBox(height: 40),
              AppButton(),
              SizedBox(height: 40),
              AppButton(useShadow: true),
            ],
          ),
        ),
      ),
    );
  }
}

class AppButton extends StatelessWidget {
  const AppButton({
    super.key,
    this.useShadow = false,
  });
  final bool useShadow;

  static const borderColor = Color.fromRGBO(54, 53, 53, 1);
  static const backgroundColor = Color.fromRGBO(197, 222, 232, 1);
  static const shadowColor = Color.fromRGBO(35, 31, 32, 1);
  static const textColor = Color.fromRGBO(54, 53, 53, 1);

  static const borderRadius = BorderRadius.only(
    topLeft: Radius.circular(10),
    bottomLeft: Radius.circular(28),
    topRight: Radius.circular(28),
    bottomRight: Radius.circular(10),
  );

  @override
  Widget build(BuildContext context) {
    final button = FilledButton.icon(
      onPressed: () {},
      // clipBehavior: Clip.antiAliasWithSaveLayer,
      style: FilledButton.styleFrom(
        fixedSize: const Size(207, 48),
        backgroundColor: backgroundColor,
        elevation: 0,
        foregroundColor: textColor,
        shape: const RoundedRectangleBorder(
          side: BorderSide(color: shadowColor, width: 3),
          borderRadius: borderRadius,
        ),
        textStyle: const TextStyle(
          fontFamily: 'Bahij',
          fontWeight: FontWeight.w700,
          fontSize: 24,
        ),
      ),
      icon: const Icon(Icons.chevron_left_rounded, size: 32),
      label: const Text('الدرس التالي'),
    );

    if (useShadow) {
      return Directionality(
        textDirection: TextDirection.ltr,
        child: DecoratedBox(
          decoration: const BoxDecoration(
            borderRadius: borderRadius,
            boxShadow: [
              BoxShadow(
                color: shadowColor,
                offset: Offset(4, 5),
              ),
            ],
          ),
          child: button,
        ),
      );
    }

    return Directionality(textDirection: TextDirection.ltr, child: button);
  }
}