Native Color Picker for Flutter

Overview

Buy Me A Coffee Donate native_color_picker

native_color_picker

A native color picker for Flutter.

Online Demo: https://rodydavis.github.io/native_color_picker/

Currently only supports web!

Getting Started

Web

Add this line to the body so that the color picker will work in safari:

<input type="color" style="visibility:hidden;" id="color-picker" />

You will receive an event for every time the color changes.

NativeColorPicker().pickColor((color) => print("New Color: $color"));

Example

import 'package:flutter/material.dart';
import 'package:native_color_picker/native_color_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Color _color = Colors.white;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _color,
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.palette),
            onPressed: () {
              NativeColorPicker().pickColor((color) {
                if (mounted)
                  setState(() {
                    _color = color;
                  });
              }, _color);
            },
          )
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
You might also like...

A highly customizable Flutter color picker.

A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Dec 14, 2022

A HSV color picker for your flutter app. RGB HSV Wheel Hue Saturation Values.

A HSV color picker for your flutter app. RGB HSV Wheel Hue Saturation Values.

flutter_hsvcolor_picker A HSV color picker for your flutter app. RGB HSV Wheel Hue Saturation Values. Getting Started Installation https://pub.dev/pac

Dec 8, 2022

A highly customizable Flutter color picker.

A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Dec 14, 2022

A simple HSV color picker without any glitz or glamour.

A simple HSV color picker without any glitz or glamour.

simple_color_picker Flutter Package A simple HSV color picker without any glitz or glamour. Sample Installation dependencies: simlpe_color_picker: a

Apr 22, 2021

A flutter date time picker inspired by flutter-cupertino-date-picker

A flutter date time picker inspired by flutter-cupertino-date-picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

Nov 30, 2021

Form builder image picker - Form builder image picker for flutter

form_builder_image_picker Field for picking image(s) from Gallery or Camera for

Jan 28, 2022

Nepali date picker - Material Style Date Picker with Bikram Sambat(Nepali) Calendar Support

Nepali date picker - Material Style Date Picker with Bikram Sambat(Nepali) Calendar Support

Nepali Date Picker + Calendar Material and Cupertino Styled Date Picker, Date Range Picker and Calendar with Bikram Sambat(Nepali) Support. Nepali Dat

Jan 3, 2023

how to Integrating facebook audience network to flutter app for banner, interstitial, rewarded, native and native banner

fb_ads_flutter_12 A new Flutter project. Getting Started Watch the complite tutorial for integrating Facebook ads into the Flutter app in our Youtube

Nov 26, 2022

Flutter native ads - Show AdMob Native Ads use PlatformView

Flutter native ads - Show AdMob Native Ads use PlatformView

flutter_native_ads Flutter plugin for AdMob Native Ads. Compatible with Android and iOS using PlatformView. Android iOS Getting Started Android Androi

Dec 20, 2022
Comments
  • Support null safety

    Support null safety

    This is a request to add support for null safety to package:native_color_picker. We depend on your awesome package, so would be great to have null safety enabled.

    Flutter 2.0 with support for null-safety was published a few days ago. 🚀

    See the migration guide for details about enabling null safety.

    opened by IchordeDionysos 0
  • Outdated docs

    Outdated docs

    The docs still use the following syntax:

    NativeColorPicker().pickerColor(callback);
    

    However, the syntax now really is the following:

    NativeColorPIcker(
      id: id,
      onChanged: callback,
    ).pickColor();
    
    opened by creativecreatorormaybenot 2
Owner
Rody Davis
Developer Advocate for @material-components at @Google
Rody Davis
Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Flutter Material Color Picker Material Color picker is a Flutter widget, that can be customizable. By default, it's Material Colors, but you can defin

Jean-Charles Moussé 70 Nov 25, 2022
Native Color Picker for Flutter

native_color_picker A native color picker for Flutter. Online Demo: https://rodydavis.github.io/native_color_picker/ Currently only supports web! Gett

Rody Davis 15 Dec 13, 2022
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Zero 201 Nov 10, 2022
Color matching game - A Crossplatform Color Matching Game made with Flutter

color_matching_game A Color Matching Game built with Flutter. It is a simple app made without adding a plug-in. Play by specifying the red, green and

Yusuke Ishimi 6 Nov 21, 2022
A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

Flutter Colorful TabBar A colorful TabBar for Flutter where each tab has a color (inspired by SmartNews app). Getting Started Add this to your package

null 8 Jun 17, 2022
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022
ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for yo

Michael S. Lopes 2 Jan 31, 2022
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

ventureli 1 Dec 8, 2021
meg4cyberc4t 11 Oct 24, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022