This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// In NeumorphicContainer.build > Container > BoxDecoration | |
// ... | |
gradient: LinearGradient( | |
begin: Alignment.topLeft, | |
end: Alignment.bottomRight, | |
colors: [ | |
color.mix(Colors.white, .2), | |
color.mix(Colors.black, .1), | |
] | |
), |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// In NeumorphicContainer.build > Container > BoxShadow | |
// Mixing with white | |
color: color.mix(Colors.white, .6), | |
// ... | |
// Mixing with black | |
color: color.mix(Colors.black, .3), | |
// ... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class NeumorphicContainer extends StatelessWidget { | |
// ... | |
// New property, will store overridden color | |
// if passed from outside | |
final Color color; | |
NeumorphicContainer({ | |
Key key, | |
this.child, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class NeumorphicContainer extends StatelessWidget { | |
// ... | |
// New property, will store overridden color | |
// if passed from outside | |
final Color color; | |
NeumorphicContainer({ | |
Key key, | |
this.child, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// In NeumorphicApp.build > MaterialApp > ThemeData | |
// ... | |
backgroundColor: Colors.blueGrey.shade200, | |
scaffoldBackgroundColor: Colors.blueGrey.shade200, | |
dialogBackgroundColor: Colors.blueGrey.shade200, | |
// ... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
extension ColorUtils on Color { | |
Color mix(Color another, double amount) { | |
return Color.lerp(this, another, amount); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// In NeumorphicApp | |
// ... | |
home: Scaffold( | |
// Adding some background | |
backgroundColor: Colors.blueGrey.shade200, | |
body: Center( | |
child: NeumorphicContainer(child: Text('Neumorphic')), | |
), | |
) | |
// ... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
return Container( | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(bevel), | |
color: Colors.grey.shade200, | |
boxShadow: [ | |
BoxShadow( | |
blurRadius: bevel, | |
offset: -blurOffset, | |
color: Colors.white, | |
), |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// In NeumorphicContainer.build | |
// ... | |
return Container( | |
decoration: BoxDecoration( | |
border: Border( | |
top: BorderSide(width: bevel, color: Color(0xFFFFFFFFFF)), | |
left: BorderSide(width: bevel, color: Color(0xFFFFFFFFFF)), | |
right: BorderSide(width: bevel, color: Color(0xFFFF000000)), | |
bottom: BorderSide(width: bevel, color: Color(0xFFFF000000)), | |
), |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// In NeumorphicContainer | |
// ... | |
// New property | |
final double bevel; | |
// Also adding initializer to a constructor | |
const NeumorphicContainer({ | |
Key key, | |
this.child, |