idean / flutter-neumorphic Goto Github PK
View Code? Open in Web Editor NEWA complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible
Home Page: https://pub.dev/packages/flutter_neumorphic
License: Apache License 2.0
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible
Home Page: https://pub.dev/packages/flutter_neumorphic
License: Apache License 2.0
Use a sliders/seekbar for duration
use buttons (radio ?) for play/pause
...
please use https://pub.dev/packages/assets_audio_player
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 !
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),
)
],
),
);
}
}
`
try neumorphic with custom boxshape
improve it, use clippers
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)
)
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
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.
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
add a CipRRect (if box rect)
add a ClipPath (with round) if box is .cicle
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
)
Add Haptic to NeumorphicButton (and other elements)
https://api.flutter.dev/flutter/services/HapticFeedback/vibrate.html
A Neumorphic Slider with 2 thumbs : min & max
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!
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
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
In the last version 1.0.1, some variables was renamed causing a break in the existing code.
Can you please add a tag for such change so when we read the change log we can detect them.
Thanks.
Crate a sample of creating user form
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 :
The behavior is the same if I start from landscape and switch to portrait, buttons are not rebuild correctly. But if I do :
This bug also happens in both platforms.
I stay around if you need more infos !
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.