Skip to content

Instantly share code, notes, and snippets.

@enkr1
Forked from av/main.dart
Created January 20, 2021 02:58
Show Gist options
  • Save enkr1/e60d2ed67ae7eab9bbe3d71d6b242993 to your computer and use it in GitHub Desktop.
Save enkr1/e60d2ed67ae7eab9bbe3d71d6b242993 to your computer and use it in GitHub Desktop.
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment