Extract color palette from an image in Flutter.

Image_color_picker.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:palette_generator/palette_generator.dart';

void main() => runApp(const MyApp());

// need to change
const String _imagePath = 'assets/images/profiles/onboarding_1.jpg';
const String _appName = 'Color Picker';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _appName,
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  PaletteGenerator? _paletteGenerator;

  @override
  void initState() {
    super.initState();
    _generatorPalette();
  }

  // This is the responsible of the generation of palettes. 
  Future<void> _generatorPalette() async {
    _paletteGenerator = await PaletteGenerator.fromImageProvider(
      ExactAssetImage(_imagePath),
      maximumColorCount: 6,
    );
  }

  // in your app you can remove all following code except _generatorPalette() and _paletteGenerator
  @override
  Widget build(BuildContext context) {
    final backgroundColor = _paletteGenerator?.dominantColor?.color;
    final backgroundColorVibrant = _paletteGenerator?.lightMutedColor?.color;
    final onBackgroundColor = _paletteGenerator?.dominantColor?.titleTextColor;

    return Scaffold(
      backgroundColor: backgroundColorVibrant,
      appBar: AppBar(
        backgroundColor: backgroundColor,
        title: Text(
          _appName,
          style: TextStyle(
            color: onBackgroundColor,
          ),
        ),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Image.asset(
            _imagePath,
            fit: BoxFit.cover,
          ),
          if (_paletteGenerator != null)
            Container(
              width: double.maxFinite,
              color: _paletteGenerator!.colors.first.withOpacity(.2),
              alignment: Alignment.center,
              padding: const EdgeInsets.symmetric(vertical: 12),
              child: Wrap(
                spacing: 8,
                runSpacing: 8,
                children: _paletteGenerator!.colors.map((color) {
                  return Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                      color: color,
                      borderRadius: BorderRadius.circular(8),
                    ),
                  );
                }).toList(),
              ),
            ),
        ],
      ),
    );
  }
}