is possible to add gradient color in color?

[hbedford]

is possible to add gradient color in color?

[henriquearthur]

Unfortunately that's not possible.

You could generate an image which contains a gradient and use fill property to fill entire screen.

flutter_native_splash:
  image: assets/images/image_with_gradient.png
  color: "42a5f5"
  fill: true

But the fill property only works for Android at the moment.

---

About adding this feature to the package:

In Android a splash screen with gradient could be done using drawable but iOS doesn't have anything similar. So in iOS we would have to use an image which contains a gradient and we also need to worry about resolutions.

I believe there are other issues which affects a larger number of people so I will not look into this right now, but I'm leaving it open as a feature request I can take a look in the future.

[lukepighetti]

I've seen reference to being able to create a PDF with a linear gradient background and using that as your image on iOS. Haven't tried it on iOS or Android unfortunately. If it's doable to generate this PDF from a gradient tag in pubspec.yaml this would be an awesome time saver for people using flutter_native_splash.

[aytunch]

@lukepighetti have you seen anybody succeding with this PDF trick since last year? We need a gradient background for the splash screen but can't find any solution atm.

[lukepighetti]

I don't have anything to show you, wish I did. IIRC I heard this from an iOS dev when I asked them about it.

[jonbhanson]

@aytunch @hbedford I will add this soon. What platforms are you using? Are you using null safety?

[aytunch]

@jonbhanson @lukepighetti thanks for the quick replies.

Are you using null safety?

this will be the question of the year for Flutter community I believe :)
For our specific case, we want to migrate to nnbd however our app is tightly dependent on flutter_map and seems like it will be a while before they support null safety. Eventually we will migrate. Here is the related issue.
We are currently supporting Android and iOS. In the future web might be added.

[jonbhanson]

I am adding this feature. It will be done by adding a background gradient image to the splash screen instead of a color. Unfortunately, there is a good bit of code involved, so I will only be adding it to the 1.x branch. That means null safety is required to use this feature.

If you are not running null safety, you can temporarily flutter upgrade, remove any packages that are not null safe from your pubspec.yaml so that you can run flutter pub get and run this package. When it is finished, restore your packages to pubspec.yaml, flutter downgrade, and you use the updated splash screen.

[aytunch]

@jonbhanson is it possible to do the same with this repos example code instead of our current project and somehow carry the required files to our existing code? I am asking this because for my case it is very hard to strip packages that are not migrated to null safety yet from the project since it is too big. Thanks

[jonbhanson]

@aytunch when you strip out all the packages, of course you will have a lot of errors show up in your code. However, I think you can still run this package from the command line without fixing any of the errors that are shown. If it doesn't work, let me know and I will give you instructions for adding a gradient manually.

[lukepighetti]

packages in dev_dependencies don't have to be migrated to null safety for projects that are null safe

[jonbhanson]

@lukepighetti how about the other way around? Null safe dev_dependencies for projects that are not null safe?

[lukepighetti]

I think that is constrained by SDK, but I could be wrong. So if you are on a null safe SDK but in a non-null safe project, I believe that works.

[jonbhanson]

@lukepighetti do you have any links to docs with this information? I did some searching but wasn't able to turn up anything.

[lukepighetti]

I don't think there is anything formally documented at this time

[aytunch]

@jonbhanson how does the background_image work under the hood? I want to display the same background png as an Image widget just after splash page is shown and I want the transition to be un-noticable. So which fit mechanism should we use? cover, fill, etc? There are many different screen aspect ratios. I would like to know how the splash png is displayed in all these screens?

[jonbhanson]

@aytunch please open a new ticket and note what platform your app will run on.