A progress with a selector above

named NeumorphicSeekBar ?

Try to have a better design than this one ☝️

the min/max label is not part of the component !

not functional, just for showcase

try neumorphic with custom boxshape
improve it, use clippers

like : https://github.com/florent37/Flutter-ShapeOfView

not necessary this design

Use a sliders/seekbar for duration
use buttons (radio ?) for play/pause
...

please use https://pub.dev/packages/assets_audio_player

When on the app we navigate to sub level, the theme is no more available and in some case it fire exceptions.

here a sample code:

`import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: NeumorphicTheme(
usedTheme: UsedTheme.LIGHT,
theme: NeumorphicThemeData(
baseColor: Color(0xFFFFFFFF),
intensity: 0.5,
lightSource: LightSource.topLeft,
depth: 10,
),
darkTheme: NeumorphicThemeData(
baseColor: Color(0xFF3E3E3E),
intensity: 0.5,
lightSource: LightSource.topLeft,
depth: 6,
),
child: MyHomePage()),
);
}
}

class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);

Widget build(BuildContext context) {
return Scaffold(
backgroundColor: NeumorphicTheme.baseColor(context),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
NeumorphicButton(
margin: EdgeInsets.only(top: 12),
onClick: () {
NeumorphicTheme.of(context).usedTheme =
NeumorphicTheme.isUsingDark(context)
? UsedTheme.LIGHT
: UsedTheme.DARK;
},
style: NeumorphicStyle(shape: NeumorphicShape.flat),
boxShape: NeumorphicBoxShape.roundRect(
borderRadius: BorderRadius.circular(8)),
padding: const EdgeInsets.all(12.0),
child: Text(
"Toggle Theme",
style: TextStyle(color: _textColor(context)),
)),
NeumorphicButton(
margin: EdgeInsets.only(top: 12),
onClick: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return FirstLevelPage();
}));
},
style: NeumorphicStyle(shape: NeumorphicShape.flat),
boxShape: NeumorphicBoxShape.roundRect(
borderRadius: BorderRadius.circular(8)),
padding: const EdgeInsets.all(12.0),
child: Text(
"Go to child where the theme is not applyed",
style: TextStyle(color: _textColor(context)),
)),
NeumorphicButton(
margin: EdgeInsets.only(top: 12),
onClick: () {
Navigator.of(context)
.pushReplacement(MaterialPageRoute(builder: (context) {
return CrashLevelPage();
}));
},
style: NeumorphicStyle(shape: NeumorphicShape.flat),
boxShape: NeumorphicBoxShape.roundRect(
borderRadius: BorderRadius.circular(8)),
padding: const EdgeInsets.all(12.0),
child: Text(
"Go to child it crash",
style: TextStyle(color: _textColor(context)),
)),
],
),
),
);
}

Color _textColor(BuildContext context) {
if (NeumorphicTheme.isUsingDark(context)) {
return Colors.white;
} else {
return Colors.black;
}
}
}

class FirstLevelPage extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
NeumorphicRadio(
style: NeumorphicRadioStyle(selectedDepth: 4, unselectedDepth: -4),
child: Text('I'm the first level '),
),
NeumorphicButton(
child: Icon(Icons.send),
)
],
),
);
}
}

class CrashLevelPage extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
NeumorphicRadio(
child: Text('I'm the first level '),
),
NeumorphicButton(
child: Icon(Icons.send),
)
],
),
);
}
}
`

A Neumorphic Slider with 2 thumbs : min & max

multiple proposals :

NeumortphicCheckbox(
      checked: true / false
      style: NeumortphicCheckboxStyle(
            //todo
      )

Only handle EMBOSS here

NeumortphicVerticalIndicator(
      height: 200,
      width: 50,
      accent: Color(0xAAAAAA)
      style: //TODO,
      percent: 0.2 // 0 <= percent <= 1
)

NeumortphicHorizontalndicator(
      height: 50,
      width: 200,
      accent: Color(0xAAAAAA)
      style: //TODO
      percent: 0.2 // 0 <= percent <= 1
)

proposal :

NeumortphicIndicator(
      height: 50,
      width: 200,
      orientation: horizontal / vertical
      accent: Color(0xAAAAAA)
      percent: 0.2 // 0 <= percent <= 1
)

https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

Proposal :

NeumorphicThemeProvider(
      light: NeumorphicTheme(...)
      dark: NeumorphicTheme(...)
      darkMode: true / false,
      child: ...
)

In the last version 1.0.1, some variables was renamed causing a break in the existing code.

• Renamed CurrentTheme to UsedTheme in NeumorphicTheme (Dark, Light, System)
• Renamed NeumorphicTheme.getCurrentTheme(context) to NeumorphicTheme.currentTheme(context)

Can you please add a tag for such change so when we read the change log we can detect them.

Thanks.

I thought it could be cool to have an optional disabled/not enabled depth, rather than always 0 as of right now (in NeumorphicButton expecially).

I'd done it myself, but one question came in my mind: could a disabledDepth in NeumorphicStyle be the right way to do it?
And should it affect all components (which ones?), or NeumorphicButton only (in this case, an inner variable in this class could be better)?

p.s. Thanks for the great package: it becomes better and better every release comes up!

When you change any parameter with NeumorphicTheme.of(context) (e.g. the onClick function of the Audio Player Sample, or the Color Picker in the Container section), we have this wierd effect:

(every flickering is a click, it's not doing it by itselft!)

It seems the old theme/color stays for a while, but after some times, the right effect is back on track

(Spinners on android)

not designed but like these ?

Try to reproduce a elevation / emboss effect on Texts

sample :

Text(
  'Hello, world!',
  style: TextStyle(
    shadows: <Shadow>[
      Shadow(
        offset: Offset(10.0, 10.0),
        blurRadius: 3.0,
        color: Color.fromARGB(255, 0, 0, 0),
      ),
      Shadow(
        offset: Offset(10.0, 10.0),
        blurRadius: 8.0,
        color: Color.fromARGB(125, 0, 0, 255),
      ),
    ],
  ),
),

find a way to generate it to the user

• a method that generate shadows ?
• a NeumorphicText ?

add a rotation (Z) to any Neumorphic element

because : we need to rotate the lightsource on -Z

Hi, its possible to choose the color of the shadows?
For example:

Neumorphic(
            style: NeumorphicStyle(
              firstColor: Colors.white, <----
              secondColor: Colors.black, <----
            ),
            boxShape: NeumorphicBoxShape.circle(), 
            child: Icon(Icons.star_border, size: 17, color: Theme.of(context).accentColor)
)

When I use the Slider widget it looks visually find unless I slide it to the extremes on the right and left

In the middle - no issue

When at the left extreme

When at the right extreme

Happy to provide some code for this if needed :)

I am running beta, v1.15.17 and on iPhone simulator

Crate a sample of creating user form

Only handle EMBOSS here

NeumortphicSwitch(
     accent: Color(0xAAAAAA),
     value: true / false
     style: SwitchStyle(
         //find ways to handle differents styles : accent button
         //accent background, etc.
         // I / O
     )
)

value like https://api.flutter.dev/flutter/material/Switch-class.html

NeumorphicProgress(
     height: 10,
     //width from parent
     percent: 0.3,   //from 0 to 1
     style: ...
)

Only available in FLAT or EMBOSS

the bubble is not in the widget IMO

looks like this

provide ways to reproduce some borders

First of all, thank you for your work !

When I switch from portrait to landscape or from landscape to portrait, the button does not rebuild as expected until I click on it. Here are some screenshots :

• In portrait : https://imgur.com/7Vo6Yfu
• After switching from portrait to landscape : https://imgur.com/k5e6Ohg
• After clicking on the first button in landscape : https://imgur.com/kK6jeZi

The behavior is the same if I start from landscape and switch to portrait, buttons are not rebuild correctly. But if I do :

• portrait -> landscape -> portrait, without clicking, in portrait button looks as expected
• landscape -> portrait -> landscape, without clicking, in landscape button looks as expected

This bug also happens in both platforms.

I stay around if you need more infos !

Buttons that move from convex/concave/flat to emboss

T _groupValue = ...;

Widget build(BuildContext context) {
    return Row(
        children: [
            NeumorphicRadio(
                value: VALUE_1,
                groupValue: _groupValue,
                onChanged: (T value) {
                    setState(() { _groupValue = value; });
                },
            ),
            NeumorphicRadio(
                value: VALUE_2,
                groupValue: _groupValue,
                onChanged: (T value) {
                    setState(() { _groupValue = value; });
                },
            ),
        ]
    )
}

inspired from https://api.flutter.dev/flutter/material/Radio-class.html

proposals :

1. use the real TextField

TextField(
  decoration: NeumortphicDecoration(
    //TODO
  ),
);

2. create a widget

NeumortphicTextField(
      //TODO
)

Hello and thank you for your awesome work!

Just tried your package and I have an issue on web, shadow seems to be cropped.
I made a compare between your sample hosted on my computer and your sample hosted on firebase. (Flutter 1.15.17)

You can see that bottom and right side are cropped :/

Did I miss something ?

Thank you !

(dark mode)

Add Haptic to NeumorphicButton (and other elements)

https://api.flutter.dev/flutter/services/HapticFeedback/vibrate.html

add a CipRRect (if box rect)
add a ClipPath (with round) if box is .cicle

• define the scope
• fill the README.md
• fill the example/README.md
• fille the CHANGELOG.md

possible name : NeumorphicRatioButton ?

a button that have the same witdh / height

In this sample here we have a border, try to add it into the shape ?

If we specify a custom boxshape radius, this one is not correctly applied.

`NeumorphicButton(
padding: EdgeInsets.all(8),
onClick: () {

          },
          style: NeumorphicStyle(
            shape: NeumorphicShape.concave,
            depth: 5,
          ),
          boxShape: NeumorphicBoxShape.roundRect(
              borderRadius:
                  BorderRadius.only(bottomLeft: Radius.circular(12))
              // BorderRadius.only(
              //     topLeft: Radius.circular(12),
              //     bottomLeft: Radius.circular(12),
              //     topRight: Radius.circular(0),
              //     bottomRight: Radius.circular(0))
              ),
          child: Icon(
            Icons.stop,
          ),
        ),`

If we set the top left corner, this one is applied for all the borders.
if we set other corner, the button is rendered as a rectangle.

The idea is to be able to create a grouped button options.