Hi Guy’s Welcome to Proto Coders Point, In this Flutter Article let’s learn How to Create Neuporphism button.
Neumorphism in Flutter
Flutter Neomorphism is an UI element that is created by applying Shadows to give a Elevation effect to any Widget.
Let’s Understand neumorphism with a container, Two opposite edges, On is in front of light source while another is opposite, This create a shadow on the other end of the container.
In this Article we will give a neumorphism effect to a container making it a 3D button in flutter.
Complete Source Code – Flutter Neumorphic Button
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var darkColors = Color(0xFF000A1F);
var lightColors = Color(0xFF5A86EA);
var isPressed = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigo,
body: Center(
child: GestureDetector(
onTapUp: (val){
setState(() {
isPressed = false;
});
},
onTapDown: (val){
setState(() {
isPressed = true;
});
},
child: AnimatedContainer(
duration: Duration(milliseconds: 100),
width: 200,
height: 200,
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: darkColors,
borderRadius: BorderRadius.circular(20.0),
boxShadow: isPressed ? null : [
BoxShadow(color: Colors.white,offset: Offset(-3,-3),blurRadius: 10.0,spreadRadius: 3.0),
BoxShadow(color: darkColors,offset: Offset(3,3),blurRadius: 10.0,spreadRadius: 3.0)
],
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
isPressed ? lightColors : darkColors,
isPressed ? darkColors : lightColors
]
)
),
),
),
)
);
}
}
So, In above flutter code, we have a square shaped AnimatedContainer at the center of the screen.
In the container widget we will use decoration: property with BoxDecoration to make the normal container a neumorphism container.
In BoxDecoration, We are using:
- color: To give color to the container.
- borderRadius: To give a Circular Radius to the container.
- boxShadow: To Apply a meumorphism shadow effect to the container.
- gradient: linear gradient from topLeft to bottonRight a light & dark color gredient effect.
That make a normal container a neumorphism container & then to give a click/onTop feel I have Simply wrapped the AnimatedContainer with GestureDetector & make few changes in color when user tap by using onTapUp() & onTopDown() methods.
