Flutter embossed button test

Download macOS

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:

Source

// 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'),
                          );
                        },
                      );
                    }))));
  }
}

(0) Like (0) Dislike