Jun

Flutter Material Color Picker

Flutter Material Color Picker:

In this tutorial, we are going to study about Fluter material color picker to use colors in your application whenever required. Flutter Material Color picker is a Flutter widget, used to customize the colors in Flutter app. By default, Material Color picker is a Material Colors, but you can define your own customized colors for the design and requirement of your app.

By using CircleColor widget we can display colors in your app. Example, you can set the color picker in a dialog and display the selected color in a ListTile, for settings to pick the colors from the display list.

Using Flutter Material Color Picker:

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
flutter_material_color_picker: ^1.0.0

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter pub get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';

Adding Basic Color in Flutter App:

To add basic color to your app by using Flutter MaterialColorPicker Use the below sample code.

MaterialColorPicker(
onColorChange: (Color color) {
// Handle color changes
},
selectedColor: Colors.red
)

Listen main color changes:

If you want to switch between two colors from the main color to new selected one then use the below sample code with Flutter materialcolorpicker. as shown below.

MaterialColorPicker(
onColorChange: (Color color) {
// Handle color changes
},
onMainColorChange: (ColorSwatch color) {
// Handle main color changes
},
selectedColor: Colors.red
)

Allowing & Disallowing Shades in Flutter MaterialColorpicker:

Use the below code allow shades with color or not. sometimes we are using shades with colors then that time we are allowing the shades with color and some we are using only colors then we are not allowing the shades. for this to do use the below sample code.

MaterialColorPicker(
allowShades: false, // default true
onMainColorChange: (ColorSwatch color) {
// Handle main color changes
},
selectedColor: Colors.red
)

Using Custom colors with Flutter Material color Picker:

use the below example code to list your custom colors to use in the app.

MaterialColorPicker(
onColorChange: (Color color) {
// Handle color changes
},
selectedColor: Colors.red,
colors: [
Colors.red,
Colors.deepOrange,
Colors.yellow,
Colors.lightGreen
],
)

Complete Example code for Flutter Material Color Picker:

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

void main() => runApp(App());

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Material Color Picker",
theme: ThemeData(primarySwatch: Colors.blue),
home: HomeScreen(),
);
}
}

class HomeScreen extends StatefulWidget {
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State {
// Use temp variable to only update color when press dialog 'submit' button
ColorSwatch _tempMainColor;
Color _tempShadeColor;
ColorSwatch _mainColor = Colors.blue;
Color _shadeColor = Colors.blue[800];

void _openDialog(String title, Widget content) {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
contentPadding: const EdgeInsets.all(6.0),
title: Text(title),
content: content,
actions: [
FlatButton(
child: Text('CANCEL'),
onPressed: Navigator.of(context).pop,
),
FlatButton(
child: Text('SUBMIT'),
onPressed: () {
Navigator.of(context).pop();
setState(() => _mainColor = _tempMainColor);
setState(() => _shadeColor = _tempShadeColor);
},
),
],
);
},
);
}

void _openColorPicker() async {
_openDialog(
"Color picker",
MaterialColorPicker(
selectedColor: _shadeColor,
onColorChange: (color) => setState(() => _tempShadeColor = color),
onMainColorChange: (color) => setState(() => _tempMainColor = color),
),
);
}

void _openMainColorPicker() async {
_openDialog(
"Main Color picker",
MaterialColorPicker(
selectedColor: _mainColor,
allowShades: false,
onMainColorChange: (color) => setState(() => _tempMainColor = color),
),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Material color picker",
style: Theme.of(context).textTheme.headline,
),
const SizedBox(height: 62.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
backgroundColor: _mainColor,
radius: 35.0,
child: const Text("MAIN"),
),
const SizedBox(width: 16.0),
CircleAvatar(
backgroundColor: _shadeColor,
radius: 35.0,
child: const Text("SHADE"),
),
],
),
const SizedBox(height: 32.0),
OutlineButton(
onPressed: _openColorPicker,
child: const Text('Show color picker'),
),
const SizedBox(height: 16.0),
OutlineButton(
onPressed: _openMainColorPicker,
child: const Text('Show main color picker'),
),
const Text('(only main color)')
],
),
);
}
}

Congratulations You Have Learned Using Material Color Picker In Flutter App….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext