I was inspired by a Neumorphic UI Design and wanted to see if I could do something like it in Flutter. I managed to do it with a couple drop shadows, and a gradient background. The look of the drop shadows are heavily dependent on the gradient color; meaning that if I change the color of the gradient, the emboss might not look right. I suspect even the position would be effected.
I did get something I liked, and thought I would test distributing a Flutter app. I developed on Windows, then build on macOS.
See below to see what it looks like on each OS, and the source at the end.
MacOS:
Windows:
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(title: 'Fuel Calculator', home: FormApp()));
/// Just shows the field and button.
class FormApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// title: Text('Form Sample'),
// ),
body: GreetButtonTwo());
}
}
class GreetButtonTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: RadialGradient(
radius: 1.3,
center: Alignment(-0.5, -0.5),
colors: [Colors.white, Colors.grey],
)),
child: Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.white,
blurRadius: 10.0,
spreadRadius: 7.0,
offset: Offset(-5.0, -5.0) //keep shadow centered
),
BoxShadow(
color: Colors.grey,
blurRadius: 10.0,
spreadRadius: 7.0,
offset: Offset(5.0, 5.0) //keep shadow centered
)
]),
child: ElevatedButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(
Colors.grey.shade800),
backgroundColor: MaterialStateProperty.all<Color>(
Colors.grey.shade500),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(
color: Colors.grey, width: 3)))),
child: Padding(
padding: EdgeInsets.all(10), child: Text('Greet')),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text('Greetings'),
);
},
);
}))));
}
}
Copyright © 2020, Lee Patterson