I'm revisiting the flutter and want to build my small test application.
I'm opting for dark mode with nice gradient contrasts.
Would like to ask how I could achieve the rainbow outline with outside blur effect in Flutter.
Apple M1 logo has a great example of what I look for. Anyone could suggest how this can be done ??
It can be done by BoxShadow inside BoxDecoration if you position the shadow well because you can put as many shadows as you can.
I just give a simple example how to do with it with 4 colors:
#override
Widget build(BuildContext context) {
return Center(
child: Container(
decoration: BoxDecoration(boxShadow: [
BoxShadow(
offset: Offset(-20, 20),
color: Colors.red,
blurRadius: 15,
spreadRadius: -10,
),
BoxShadow(
offset: Offset(-20, -20),
color: Colors.orange,
blurRadius: 15,
spreadRadius: -10,
),
BoxShadow(
offset: Offset(20, -20),
color: Colors.blue,
blurRadius: 15,
spreadRadius: -10,
),
BoxShadow(
offset: Offset(20, 20),
color: Colors.deepPurple,
blurRadius: 15,
spreadRadius: -10,
)
]),
child: Container(
width: 200,
height: 200,
color: Colors.black,
child: Center(
child: Text(
'Text',
style: TextStyle(color: Colors.white, fontSize: 40),
)),
),
),
);
}
The output should look like this:
Related
So far I can only get the design part but not implement the onPressed or clicked part. When it is pressed I want it to behave live a normal Elevated or raised button.
I can use GestureDetecter and use the onTap function, but how to animate it like its been actually pressed ?
Here is the code so far
Container(
width: 200,
height: 50,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.grey[400],
blurRadius: 20,
offset: Offset(0, 10),
),
BoxShadow(
color: Colors.white,
blurRadius: 20,
offset: Offset(0, -10),
),
],
),
child: Center(
child: Text('Button'),
),
onPressed: () {
// Show the text panel here
},
)
You can use TextButton widget wrap with your Container widget. just like this.
Container(
width: 200,
height: 50,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.grey[400]!,
blurRadius: 20,
offset: const Offset(0, 10),
),
const BoxShadow(
color: Colors.white,
blurRadius: 20,
offset: Offset(0, -10),
),
],
),
child: TextButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(
Colors.white)),
onPressed: () {
// Button tap action.
},
child: const Text('Elevated Button'),
),
)
There is a package that contains all the Neumorphism widgets in it "flutter_neumorphic"(https://pub.dev/packages/flutter_neumorphic)
First, install and import the package then you should use NeumorphicButton(there are many properties in this widget with which you can modify and get the effect you want, To learn more about it visit "flutter_neumorphic" offical website) : -
NeumorphicButton(
onPressed: () {},
child: const Text("Click me"),
),
Output :-
enter image description here
I'm designing to be responsive in Flutter. I want to process width auto, 100%, how do I do it? I have processed double.infinity.
Widget _bottomSubText(subtext) {
return Container(
padding: const EdgeInsets.only(top: 15),
width: 977,
height: 70,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 245, 245, 245),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: const Offset(0, 3),
)
],
),
child: Text(
subtext,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 30),
),
);
}
Use width: MediaQuery.of(context).size.width in your container.
Widget _bottomSubText(subtext) {
return Container(
padding: const EdgeInsets.only(top: 15),
//Set this width, if you want to half of screen multiplied it by 0.5 and so on...
width: MediaQuery.of(context).size.width,
height: 70,
decoration: BoxDecoration(
color: const Color.fromARGB(255, 245, 245, 245),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: const Offset(0, 3),
)
],
),
child: Text(
subtext,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 30),
),
);
}
Wrap your Container by Widget call (Expanded)
https://api.flutter.dev/flutter/widgets/Expanded-class.html
I'm trying to create a Row of containers that all have a BoxShadow. The shadows are quite large and therefore span into space that's outside of the parent, so I'm using clipBehavior: Clip.none on the parent.
The problem with this is that for each Container within the row it's shadow overlaps into the previous container. I've set some bold colors below to emphasize the issue. As you can see the right-hand side of the previous Container gets the shadow from the next.
Here's my code
return SingleChildScrollView(
clipBehavior: Clip.none,
scrollDirection: Axis.horizontal,
child: Row(
children: [
_ShadowedBox(),
_ShadowedBox(),
_ShadowedBox(),
],
),
);
class _ShadowedBox extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: 144,
child: Column(
children: [
SizedBox(
width: 144,
height: 144,
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(cardRadius),
boxShadow: [
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 38.0,
spreadRadius: 0.0,
color: Colors.red,
),
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 46.0,
spreadRadius: 0.0,
color: Colors.green,
),
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 10.0,
spreadRadius: 0.0,
color: Colors.blue,
),
]
),
child: ClipRRect(
borderRadius: BorderRadius.circular(cardRadius),
child: Image.network("https://via.placeholder.com/400x400.png?text=Coming%20soon", fit: BoxFit.contain)
),
),
],
),
);
}
}
Can anyone suggest how to stop the shadow bleeding into the other containers while still being able to show the shadows not being clipped by the parent?
Okay I've tested 2 approaches to fix your issue. As Wapazz said, each of your Container is drawn separately with its own shadow so they will overlap.
Solution #1
A solution could be to apply the shadow effect to your Row widget instead of the _ShadowedBox but the shadow effect wouldn't be as precise:
Code
SingleChildScrollView(
clipBehavior: Clip.none,
scrollDirection: Axis.horizontal,
child: UnconstrainedBox(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 38.0,
spreadRadius: 0.0,
color: Colors.red,
),
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 46.0,
spreadRadius: 0.0,
color: Colors.green,
),
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 10.0,
spreadRadius: 0.0,
color: Colors.blue,
),
],
),
child: Row(
children: List<Widget>.generate(10, (_) => _ShadowedBox()),
),
),
),
),
Result
Solution #2
The other solution I've found would be to use a Stack widget with all the shadows rendered in a separate Row, so the resulting shadows have the correct shape. The issue with this method being that you need a fixed width and height for your widget:
Code
SingleChildScrollView(
clipBehavior: Clip.none,
scrollDirection: Axis.horizontal,
child: Stack(
children: [
Row(
children: List<Widget>.generate(
10,
(_) => Container(
margin: const EdgeInsets.symmetric(horizontal: 4),
width: 144,
height: 144,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(cardRadius),
boxShadow: [
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 38.0,
spreadRadius: 0.0,
color: Colors.red,
),
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 46.0,
spreadRadius: 0.0,
color: Colors.green,
),
BoxShadow(
offset: const Offset(0.0, 6.0),
blurRadius: 10.0,
spreadRadius: 0.0,
color: Colors.blue,
),
],
),
),
),
),
Row(
children: List<Widget>.generate(10, (_) => _ShadowedBox()),
),
],
),
)
Result
You can try my full test code on DartPad
I'm trying to make glow around items in list. For this I use box-shadow in item's decoration. But it is appeared above other items, not as background. How to draw boxshadow behind sibling items as well.
class ShadowItem extends StatelessWidget {
const ShadowItem({required this.isWithGlow});
final bool isWithGlow;
#override
Widget build(BuildContext context) {
return Container(
height: 100,
decoration: BoxDecoration(
boxShadow: (isWithGlow)
? [
BoxShadow(
color: Colors.blue,
blurRadius: 42.0,
spreadRadius: 0.0,
offset: Offset(
0.0,
12.0,
),
),
]
: [],
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(19),
),
),
);
}
}
you need to set margins between boxes so the shadow will not overflow on another widget.
I am using flutter_neumorphic: ^3.0.3 Package to solve your problem.
here is the code
import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
class ShadowItem extends StatelessWidget {
const ShadowItem({required this.isWithGlow});
final bool isWithGlow;
#override
Widget build(BuildContext context) {
return Container(
height: 100,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 5),
child: Neumorphic(
style: isWithGlow
? NeumorphicStyle(
shadowDarkColor: Colors.blue,
shadowLightColor: Colors.blue,
depth: 10,
shape: NeumorphicShape.convex,
lightSource: LightSource.right)
: NeumorphicStyle(
depth: 2,
shape: NeumorphicShape.convex,
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(19),
),
),
),
);
}
}
Your need is to show BoxShadow depends on the isWithGlow. so you can set grey shadow background instead of empty shadow [] and set margin for container, it will highlight your Container.
return Container(
height: 100,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
decoration: BoxDecoration(
boxShadow: (isWithGlow)
? [
BoxShadow(
color: Colors.blue,
blurRadius: 42.0,
spreadRadius: 0.0,
offset: Offset(
0.0,
12.0,
),
),
]
: [
BoxShadow(
color: Colors.grey[400]!,
blurRadius: 42.0,
spreadRadius: 0.0,
offset: Offset(
0.0,
12.0,
),
),
],
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(19),
),
),
);
I am trying to develop shadow property for an inkwell with child of svg image.
This is what I trying to get done:,
And, this is what I am getting:
Can I get help with this? Here is my code:
new InkWell(
onTap: _googleSignIn,
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Hexcolor('#e9f1fe'),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Hexcolor('#C5D6F2'),
offset: Offset(6.0, 6.0),
blurRadius: 8.0,
spreadRadius: 1.0),
BoxShadow(
color: Colors.white,
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0),
]),
child: SvgPicture.asset('assets/icon/google.svg',fit: BoxFit.fill,),
)),
Try change offset
offset: Offset(0.0, 0.0),