Neumorphic / Skeuomorphic Container

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Neumorphic Container',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Neumorphic Container'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[200],
      appBar: AppBar(
        title: Text(widget.title),
        elevation: 0.0,
        backgroundColor: Colors.blueGrey[800],
      ),
      body: Center(
        child: NeumorphicContainer(
          width: 150.0,
          height: 150.0,
          color: Colors.blueGrey[100],
          borderRadius: BorderRadius.circular(15.0),
        ),
      ),
    );
  }
}

class NeumorphicContainer extends StatefulWidget {
  const NeumorphicContainer({
    Key key,
    this.child,
    this.color,
    this.blurOffset,
    this.bevel,
    this.enablePressEffect,
    this.borderRadius,
    this.width,
    this.height,
  }) : super(key: key);

  final  Widget child;
  final Color color;
  final Offset blurOffset;
  final double bevel;
  final bool enablePressEffect;
  final BorderRadius borderRadius;
  final double width;
  final double height;

  @override
  _NeumorphicContainerState createState() => _NeumorphicContainerState();
}

class _NeumorphicContainerState extends State<NeumorphicContainer> {
  @override
  Widget build(BuildContext context) {
    bool _enablePressEffect = widget.enablePressEffect ?? false;
    Offset _blurOffset = widget.blurOffset ?? Offset(5.0/2, 5.0/2);
    double _bevel = widget.bevel ?? 5.0;
    BorderRadius _borderRadius = widget.borderRadius ?? BorderRadius.circular(_bevel * 10);
    Color _color = widget.color ?? Theme.of(context).backgroundColor;

    return Container(
      width: widget.width,
      height: widget.height,
      child: widget.child,
      decoration: BoxDecoration(
        borderRadius: _borderRadius,
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            _enablePressEffect ? _color : _color.mix(Colors.black, .1),
            _enablePressEffect ? _color.mix(Colors.black, .05) : _color,
            _enablePressEffect ? _color.mix(Colors.black, .05) : _color,
            _color.mix(Colors.white, _enablePressEffect ? .1 : .5),
          ],
          stops: [
            0.0,
            .3,
            .6,
            1.0,
          ],
        ),
        boxShadow: _enablePressEffect
            ? [
          BoxShadow(
            blurRadius: _bevel / 2,
            offset: _blurOffset,
            color: _color.mix(Colors.white, .6),
          ),
          BoxShadow(
            blurRadius: _bevel / 2,
            offset: -_blurOffset,
            color: _color.mix(Colors.black, .3),
          ),
        ]
            : [
          BoxShadow(
            blurRadius: _bevel / 2,
            offset: -_blurOffset,
            color: _color.mix(Colors.white, .6),
          ),
          BoxShadow(
            blurRadius: _bevel / 2,
            offset: _blurOffset,
            color: _color.mix(Colors.black, .3),
          )
        ],
      ),
    );
  }
}

extension ColorUtils on Color {
  Color mix(Color another, double amount) {
    return Color.lerp(this, another, amount);
  }
}