Skip to content

Instantly share code, notes, and snippets.

@korchix
Last active January 29, 2020 21:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save korchix/99531464243df9e37d80c4b78807766b to your computer and use it in GitHub Desktop.
Save korchix/99531464243df9e37d80c4b78807766b to your computer and use it in GitHub Desktop.
neumorphism Icon with Click invert
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:payment_app/constants.dart';
void main() {
//SystemChrome.setEnabledSystemUIOverlays([]);
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: mC,
body: MainCard(),
),
);
}
}
class MainCard extends StatefulWidget {
@override
_MainCardState createState() => _MainCardState();
}
class _MainCardState extends State<MainCard> {
bool firstIconClicked = false;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 80),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
firstIconClicked = !firstIconClicked;
});
},
child: NMButton(
down: firstIconClicked,
icon: Icons.arrow_back,
),
),
],
),
),
);
}
}
class NMButton extends StatelessWidget {
final bool down;
final IconData icon;
NMButton({this.down, this.icon});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
child: Icon(
icon,
size: 50,
color: down ? fCD : fCL,
),
decoration: down ? kDecoIconClicked : kDecoIconNotClicked,
);
}
}
Color mC = Colors.grey.shade100;
Color mCL = Colors.white;
Color mCD = Colors.black.withOpacity(0.075);
Color mCC = Colors.green.withOpacity(0.65);
Color fCD = Colors.grey.shade700;
Color fCL = Colors.grey;
BoxDecoration kDecoIconClicked = BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: mCD,
boxShadow: [
BoxShadow(
color: mCL,
offset: Offset(3, 3),
blurRadius: 3,
spreadRadius: -3,
),
],
);
BoxDecoration kDecoIconNotClicked = BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: mC,
boxShadow: [
BoxShadow(
color: mCD,
offset: Offset(10, 10),
blurRadius: 10,
),
BoxShadow(
color: mCL,
offset: Offset(-10, -10),
blurRadius: 10,
)
],
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment