CODEWITHSUNDEEP
flutterdartflutter-layout
Tuan
Tuan

Reputation: 2433

LinearGradient with multiple stops

I am having an idea about drawing a LinearGradient with only 2 colors but with 3 stops, i.e. 2 colors on the 2 sides but the neutral is not in the middle, it can be left or right (stops between 0 -> 1).

I know stops needs to be the same length as colors from flutter site.

The stops list, if specified, must have the same length as colors.

My idea is create a combined color and add to middle of colors, now im able to use 3 stops. But color transition look not smooth as i expected. Below is my code.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(title: const Text('Custom stops')),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [colorLeft, Color.alphaBlend(colorLeft, colorRight), colorRight],
            stops: [0, 0.7, 1],
          ),
        ),
      ),
    ),
  );
}

Is there any other way to do it. The result should look like this but with smoother color transitions. I appreciate any helpful ideas, thanks.

enter image description here

Upvotes: 0

Views: 1222

Answers (1)

Dev
Dev

Reputation: 6786

Try lerp example https://dartpad.dev/?id=4916732360a976a5e4cb33a915a64c86

colors: [colorLeft, Color.lerp(colorLeft, colorRight,0.25)??colorLeft, colorRight],

Adjust settings to suit your need. Read at https://api.flutter.dev/flutter/dart-ui/Color/lerp.html

Upvotes: 2

Related Questions