flutter_dominant_color_container 1.0.0 copy "flutter_dominant_color_container: ^1.0.0" to clipboard
flutter_dominant_color_container: ^1.0.0 copied to clipboard

The Dominant Color Container is a custom Flutter widget that dynamically extracts the dominant color from an image and applies it as the background color of a container. This widget enhances UI design [...]

example/lib/main.dart

import 'package:flutter_dominant_color_container/flutter_dominant_color_container.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Dominant Color Container'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: FlutterDominantColorContainer(
        imageSource:
            'https://images.pexels.com/photos/10939109/pexels-photo-10939109.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
        imageType: ImageType.others,
        loadingBuilder: const Text('Loading.....'),
        errorWidget: const Text('Error......'),
        colorOpacity: 1,
        child: Center(
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.network(
                'https://images.pexels.com/photos/10939109/pexels-photo-10939109.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
                width: MediaQuery.of(context).size.width * .5,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
8
likes
130
points
115
downloads

Publisher

unverified uploader

Weekly Downloads

The Dominant Color Container is a custom Flutter widget that dynamically extracts the dominant color from an image and applies it as the background color of a container. This widget enhances UI design by automatically adapting to the primary color scheme of images, making it ideal for creating visually cohesive layouts.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_svg, http, image, palette_generator, path_provider, xml

More

Packages that depend on flutter_dominant_color_container