Skip to content

Instantly share code, notes, and snippets.

@av
Created Jan 13, 2020
Embed
What would you like to do?
Flutter: neu
import 'package:flutter/material.dart';
void main() => runApp(NeumorphicApp());
class NeumorphicApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Neumorphic App',
theme: ThemeData(
primarySwatch: Colors.blue,
backgroundColor: Colors.blueGrey.shade200,
scaffoldBackgroundColor: Colors.blueGrey.shade200,
dialogBackgroundColor: Colors.blueGrey.shade200,
),
home: Scaffold(
body: Center(
child: NeumorphicContainer(
child: Text(
'Space',
style: Typography.blackCupertino.display2,
),
),
),
),
);
}
}
class NeumorphicContainer extends StatefulWidget {
final Widget child;
final double bevel;
final Offset blurOffset;
final Color color;
NeumorphicContainer({
Key key,
this.child,
this.bevel = 10.0,
this.color,
}) : this.blurOffset = Offset(bevel / 2, bevel / 2),
super(key: key);
@override
_NeumorphicContainerState createState() => _NeumorphicContainerState();
}
class _NeumorphicContainerState extends State<NeumorphicContainer> {
bool _isPressed = false;
void _onPointerDown(PointerDownEvent event) {
setState(() {
_isPressed = true;
});
}
void _onPointerUp(PointerUpEvent event) {
setState(() {
_isPressed = false;
});
}
@override
Widget build(BuildContext context) {
final color = this.widget.color ?? Theme.of(context).backgroundColor;
return Listener(
onPointerDown: _onPointerDown,
onPointerUp: _onPointerUp,
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
padding: const EdgeInsets.all(24.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(widget.bevel * 10),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
_isPressed ? color : color.mix(Colors.black, .1),
_isPressed ? color.mix(Colors.black, .05) : color,
_isPressed ? color.mix(Colors.black, .05) : color,
color.mix(Colors.white, _isPressed ? .2 : .5),
],
stops: [
0.0,
.3,
.6,
1.0,
]),
boxShadow: _isPressed ? null : [
BoxShadow(
blurRadius: widget.bevel,
offset: -widget.blurOffset,
color: color.mix(Colors.white, .6),
),
BoxShadow(
blurRadius: widget.bevel,
offset: widget.blurOffset,
color: color.mix(Colors.black, .3),
)
],
),
child: widget.child,
),
);
}
}
extension ColorUtils on Color {
Color mix(Color another, double amount) {
return Color.lerp(this, another, amount);
}
}
@bharathraj-e

This comment has been minimized.

Copy link

@bharathraj-e bharathraj-e commented Jan 17, 2020

cool !
why don't you publish as a package in pub.dev

@av

This comment has been minimized.

Copy link
Owner Author

@av av commented Jan 19, 2020

@JonathanMonga

This comment has been minimized.

Copy link

@JonathanMonga JonathanMonga commented Jan 29, 2020

thanks for your work!

@bharathraj-e

This comment has been minimized.

Copy link

@bharathraj-e bharathraj-e commented Jan 31, 2020

Sege Shkurko actually done that before I got my hands on libraryzing the article!

Please, check it out at:
https://medium.com/@serge_shkurko/i-was-very-inspired-by-your-decision-and-wrote-a-small-package-indicating-you-as-the-author-and-7efc5e0e62ab

Pub:
https://pub.dev/packages/neumorphic

ok!

@tieorange

This comment has been minimized.

Copy link

@tieorange tieorange commented Feb 8, 2020

Example without extension methods
For those who don't use Flutter's master channel yet

import 'package:flutter/material.dart';

class NeumorphicContainer extends StatefulWidget {
  final Widget child;
  final double bevel;
  final Offset blurOffset;
  final Color color;

  NeumorphicContainer({
    Key key,
    this.child,
    this.bevel = 10.0,
    this.color,
  })  : this.blurOffset = Offset(bevel / 2, bevel / 2),
        super(key: key);

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

class _NeumorphicContainerState extends State<NeumorphicContainer> {
  bool _isPressed = false;

  void _onPointerDown(PointerDownEvent event) {
    setState(() {
      _isPressed = true;
    });
  }

  void _onPointerUp(PointerUpEvent event) {
    setState(() {
      _isPressed = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    final color = this.widget.color ?? Theme.of(context).backgroundColor;

    return Listener(
      onPointerDown: _onPointerDown,
      onPointerUp: _onPointerUp,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 150),
        padding: const EdgeInsets.all(24.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(widget.bevel * 10),
          gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [
            _isPressed ? color : mix(Colors.black, .1, color),
            _isPressed ? mix(Colors.black, .05, color) : color,
            _isPressed ? mix(Colors.black, .05, color) : color,
            mix(Colors.white, _isPressed ? .2 : .5, color),
          ], stops: [
            0.0,
            .3,
            .6,
            1.0,
          ]),
          boxShadow: _isPressed
              ? null
              : [
                  BoxShadow(
                    blurRadius: widget.bevel,
                    offset: -widget.blurOffset,
                    color: mix(Colors.white, .6, color),
                  ),
                  BoxShadow(
                    blurRadius: widget.bevel,
                    offset: widget.blurOffset,
                    color: mix(Colors.black, .3, color),
                  )
                ],
        ),
        child: widget.child,
      ),
    );
  }
}

Color mix(Color another, double amount, Color currentColor) {
  return Color.lerp(currentColor, another, amount);
}

@av

This comment has been minimized.

Copy link
Owner Author

@av av commented Feb 10, 2020

Thanks for sharing this @tieorange!
Will be useful for people still having SDK constrained to versions <=2.5!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment