CODEWITHSUNDEEP
androidflutterdartflutter-layout
Vinay Shankar Dubey
Vinay Shankar Dubey

Reputation: 21

Flutter app LinearGradient Widget not going Smooth

Dev's.. I am getting an issue in my Flutter App.. When I am using LinerGradient Widget in my app on a Container Widget.. My LinearGradient not going smooth... Please Help..

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class NowPlayingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Variables
    final mySize = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
         children: [
           //Todo : First Container Background
           Container(
             height: mySize.height,
             width: mySize.width,
             color: Color(0xFF9D9D9D),
           ),
           Container(
             height: mySize.height,
             width: mySize.width,
             decoration: BoxDecoration(
               gradient: LinearGradient(
                 begin: Alignment.bottomRight,
                 end: Alignment.topLeft,
                 colors:[
                   Colors.black,
                   Colors.transparent
                 ],
               )
             ),
           ),
         ],
      ),
    );
  }
}

enter image description here

Upvotes: 1

Views: 1356

Answers (4)

steam
steam

Reputation: 11

In my case it was because I had another library installed https://rive.app flutter and that library use the same name 'LinearGradient'

so what I did was to rename the library, to something like this:

import 'package:flutter/src/painting/gradient.dart' as gradient;

gradient: const gradient.LinearGradient(
  begin: Alignment.bottomRight,
  end: Alignment.topLeft,
  ...
)

another solution is to create another widget and call it wherever want.

hope it helps

Upvotes: 0

Anoop John
Anoop John

Reputation: 21

Add dithering effect in main dart

void main() {
  Paint.enableDithering = true;
  
  runApp();
}

Upvotes: 0

Adam Linscott
Adam Linscott

Reputation: 41

There is nothing wrong with your code, you are just seeing banding which is caused by the gradient covering the whole screen.

If you create a gradient from white (#FFFFFFFF) and black (#FF000000) there will be exactly 256 shades that you will be able to see. If you have a large display each band will have multiple pixels and (depending on how good your eyes are) you will be able to see these bands. You can experiment with this by changing the color of your bottom container. Using dark green (#FF003300) will make bands more obvious and using bright red (#FFFF0000) will make them much harder to see.

The best way to fix this is to make the size of your gradient container smaller, or increase the range of the gradient. These will cause each band to take up fewer pixels and make them less noticeable.

Upvotes: 0

Rex
Rex

Reputation: 313

From my opinion it looks perfectly but if you wanna change the gradient size of particular color add 'stops' property for linear gradient

for eg:

Container(
             height: mySize.height,
             width: mySize.width,
             decoration: BoxDecoration(
               gradient: LinearGradient(
                 begin: Alignment.bottomRight,
                 end: Alignment.topLeft,
                 colors:[
                   Colors.black,
                   Colors.transparent
                 ],
                stops:[0.5,0.2],
               )
             ),
           ),

For more info: https://api.flutter.dev/flutter/painting/LinearGradient-class.html

Upvotes: 0

Related Questions