How can I generate colours from images and set it to background of screen

47 views Asked by At

enter image description here

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;
  }
}
0

There are 0 answers