Skip to content

Instantly share code, notes, and snippets.

@bhaskar-nair2
Last active February 14, 2020 17:51
Show Gist options
  • Save bhaskar-nair2/88bdb05f3d776b6a94c430fbd048e67f to your computer and use it in GitHub Desktop.
Save bhaskar-nair2/88bdb05f3d776b6a94c430fbd048e67f to your computer and use it in GitHub Desktop.
Flutter Neomorphic Button
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: Color.fromRGBO(231, 232, 234, 1),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 25),
child: Column(
children: <Widget>[
NeumorphicButton()
],
),
),
),
);
}
}
// Just copied and edited from my code whihc had a lot of stuff, edit it as you please all you need here is the backgroundColor of the scaffold..
class NeumorphicButton extends StatefulWidget {
NeumorphicButton({Key key}) : super(key: key);
@override
_NeumorphicButtonState createState() => _NeumorphicButtonState();
}
class _NeumorphicButtonState extends State<NeumorphicButton> {
bool _selected = false;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
// color: Color.alphaBlend(Color.fromRGBO(190, 191, 194, 1.0),
// Color.fromRGBO(255, 255, 255, 1)),
borderRadius: BorderRadius.circular(100),
// border: Border.all(color: Colors.red, width: 0.5),
boxShadow: _selected
? [
BoxShadow(
color: Colors.black26,
blurRadius: 20,
spreadRadius: 2,
offset: Offset(12, 12),
),
BoxShadow(
color: Colors.white70,
blurRadius: 20,
spreadRadius: 2,
offset: Offset(-12, -12),
),
]
: [
BoxShadow(
color: Colors.black26,
blurRadius: 30,
spreadRadius: 2,
offset: Offset(-12, -12),
),
BoxShadow(
color: Colors.white60,
blurRadius: 20,
spreadRadius: 2,
offset: Offset(12, 12),
),
]),
width: 200,
height: 200,
child: FlatButton(
materialTapTargetSize: MaterialTapTargetSize.padded,
shape: new RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100),
),
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onPressed: () {
setState(() {
_selected = !_selected;
});
},
child: Icon(
Icons.power_settings_new,
size: 40,
color: _selected ? Color.fromRGBO(69, 224, 235, 1.0) : Colors.black,
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment