not smooth really

[bugrevealingbme]

I used the gradient in this way but it doesn't look as smooth as promised

Container(
height: AppSizes.height20,
decoration: BoxDecoration(
gradient: (themeData.brightness ==
Brightness.dark)
? SmoothGradient(
from: Color(0xFF0C3A18),
to: themeData.colorScheme.surface,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
steps: 9,
curve: Curves.linear,
)

[nikodembernat]

You have to use a different curve than .linear, e.g. Curves.easeIn:

Container(
  height: AppSizes.height20,
  decoration: BoxDecoration(
    gradient: (themeData.brightness == Brightness.dark)
        ? SmoothGradient(
            from: const Color(0xFF0C3A18),
            to: themeData.colorScheme.surface,
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            curve: Curves.easeIn,
          )
        // Something else...
        : const Gradient(),
  ),
);

When you use Curves.linear then it's effectively the default linear gradient.

You can also use custom curves by using something like curve: const Cubic(0.2, 0.6, 1, 0.95).

You can use a website like https://cubic-bezier.com to create new curves with ease.

[bugrevealingbme]

I tried all of them. Same.

…

You have to use a different curve than .linear, e.g. Curves.easeIn: Container( height: AppSizes.height20, decoration: BoxDecoration( gradient: (themeData.brightness == Brightness.dark) ? SmoothGradient( from: const Color(0xFF0C3A18), to: themeData.colorScheme.surface, begin: Alignment.topCenter, end: Alignment.bottomCenter, curve: Curves.easeIn, ) // Something else... : const Gradient(), ), ); When you use Curves.linear then it's effectively the default linear gradient — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFOOOS7O5EJF2JXEJNST6SD2YQSMFAVCNFSM6AAAAAB2XBXO4KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOOBXGUYTINJYG4> . You are receiving this because you authored the thread.Message ID: ***@***.***> *n-bernat* left a comment (nikodembernat/flutter_smooth_gradient#1) <#1 (comment)> You have to use a different curve than .linear, e.g. Curves.easeIn: Container( height: AppSizes.height20, decoration: BoxDecoration( gradient: (themeData.brightness == Brightness.dark) ? SmoothGradient( from: const Color(0xFF0C3A18), to: themeData.colorScheme.surface, begin: Alignment.topCenter, end: Alignment.bottomCenter, curve: Curves.easeIn, ) // Something else... : const Gradient(), ), ); When you use Curves.linear then it's effectively the default linear gradient — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFOOOS7O5EJF2JXEJNST6SD2YQSMFAVCNFSM6AAAAAB2XBXO4KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOOBXGUYTINJYG4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[bugrevealingbme]

This problem only applies if I make the widget size smaller than the screen. This problem should be reopen

[nikodembernat]

I will take a look

[bugrevealingbme]

thanks