I want to add background color in futter application that is extracted from image like shown in above picture. That there is centered image containing different colours and in background colour is set(negotiate white buttons).
I have used PaletteGenerator in my code. but as output it shows white background.
class TempState extends State<Temp> {
var paletteGenerator;
@override
Widget build(BuildContext context) {
return FutureBuilder<PaletteGenerator>(
future: _updatePaletteGenerator(), // async work
builder:
(BuildContext context, AsyncSnapshot<PaletteGenerator> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return const Center(child: CircularProgressIndicator());
default:
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
// Color color=new Color(snapshot.data.dominantColor.color);
// var face = snapshot.data?.paletteColors;
var face = snapshot.data?.paletteColors
.map((paletteColor) => paletteColor.bodyTextColor)
.toList() ?? [Colors.redAccent];
return Scaffold(
body: Container(
child: ShaderMask(
shaderCallback: (Rect rect) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: face,
).createShader(rect);
}),
),
);
// return Text('color: ${face.runtimeType.toString()}', style: TextStyle(fontSize: 15),);
}
}
});
}
Future<PaletteGenerator> _updatePaletteGenerator() async {
paletteGenerator = await PaletteGenerator.fromImageProvider(
Image.asset("assets/images/2.png").image,
);
return paletteGenerator;
}
}
