pyozer / flutter_material_color_picker Goto Github PK

att

This package is great, but it would be better if we could customize the back button.
thank

Hey, so I've noticed that selecting shades in not available when the colour selector is in an ExpansionTile. Not 100% certain if you may have noticed this when using the package, it may very well be my set up that has the issue. Thanks in advance for taking the time 😄

Here's how I've currently set it up in my project:

_colorSelector(String title, Settings prefs, String attr) {
    return ExpansionTile(
      title: Text.rich(
        TextSpan(
          text: title,
        ),
      ),
      children: <Widget>[
        _generateColor(_getColor(attr), prefs),
      ],
      trailing: CircleColor(
        color: prefs.colors[_getColor(attr)],
        circleSize: 25 * (prefs.scale / 2),
      ),
    );
  }

What generate color does :

_generateColor(int colorSetting, Settings prefs) {
    return MaterialColorPicker(
      allowShades: true,
      circleSize: 75 * (prefs.scale),
      onColorChange: (Color color) {
        prefs.themeData = ThemeData(
            primaryColor: (colorSetting == 0) ? color : prefs.colors[0],
            primarySwatch: (colorSetting == 0)
                ? MaterialColor(
                    color.value,
                    toSwatch(color.value),
                  )
                : MaterialColor(
                    prefs.colors[0].value,
                    toSwatch(prefs.colors[0].value),
                  ),
            brightness: (prefs.darkMode) ? Brightness.dark : Brightness.light,
            accentColor: (colorSetting == 1) ? color : prefs.colors[1],
            accentColorBrightness: prefs.themeData.accentColorBrightness,
            splashColor: (colorSetting == 2) ? color : prefs.colors[2]);
      },
      // onMainColorChange: (ColorSwatch color) {
      //   prefs.themeData = ThemeData(
      //       primaryColor: (colorSetting == 0) ? color : prefs.colors[0],
      //       primarySwatch: (colorSetting == 0)
      //           ? MaterialColor(
      //               color.value,
      //               toSwatch(color.value),
      //             )
      //           : MaterialColor(
      //               prefs.colors[0].value, toSwatch(prefs.colors[0].value)),
      //       brightness: (prefs.darkMode) ? Brightness.dark : Brightness.light,
      //       accentColor: (colorSetting == 1) ? color : prefs.colors[1],
      //       accentColorBrightness: prefs.themeData.accentColorBrightness,
      //       splashColor: (colorSetting == 2) ? color : prefs.colors[2]);
      // },
      selectedColor: prefs.colors[colorSetting],
    );
  }

https://github.com/Pyozer/flutter_material_color_picker/blob/master/lib/src/material_color_picker.dart#L97

I don't think is ideal behavior because onColorChange will be triggered before the specific shade Color is even selected.

For example, I want to Navigator.pop() the color onColorChange and the dialog is closed early because onColorChange is triggered _onMainColorSelected()

Do you think you could add the option for users to choose accent colors also?

When trying to place this color picker widget inside of an AlertDialog or SimpleDialog, an exception is raised.

However, be aware that since AlertDialog tries to size itself using the intrinsic dimensions of its children, widgets such as ListView, GridView, and CustomScrollView, which use lazy viewports, will not work.
-- Flutter docs

Would be great if there was support for this.

Hi, is Null safety migration on roadmap?
Thanks

Inside AlertDialog I have TypeAheadFormField (from flutter_typeahead) and MaterialColorPicker:

MaterialColorPicker(
	onMainColorChange: (ColorSwatch color) {
		this._myColor = color;
	},
	selectedColor: _myColor,
)
...
onSuggestionSelected: (validColorInt) {
	this._textController.text = 'THE TEXT IS UPDATED';

	setState(() {
		this._myColor = Color(validColorInt); // BUT NOT THE PICKER
	});
}

I want to change the picker's selected color when the user makes a selection. What do I miss?

Hello I really like your widget but I found a little problem:
Padding is missing the lower part of the widget therefore the shadows are cut

this is the part which is causing the problem:
padding: const EdgeInsets.only(left: _kContainerPadding, right: _kContainerPadding),

By adding Padding to all parts the problem is fixed
padding: const EdgeInsets.all(_kContainerPadding),

How to reduce the size of color picker(rounded one)? Should i need to wrap inside a sized box?

my code:

import 'dart:math';

import 'package:animated_theme_switcher/animated_theme_switcher.dart';
import 'package:appservice/flavors.dart';
import 'package:appservice/helper/dbhelper.dart';
import 'package:appservice/models/localappconfig.dart';
import 'package:appservice/pages/home_page.dart';
import 'package:appservice/services/createtable_services.dart';
import 'package:appservice/widgets/common_snackbar.dart';
import 'package:appservice/widgets/settings/settings_ui_data.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';
import 'package:line_awesome_flutter/line_awesome_flutter.dart';
import 'package:progress_dialog/progress_dialog.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../helper/helper.dart';
import '../sqliteProvider/userappconfig_provider.dart';
import '../style/style.dart';
import '../utils/uidata.dart';

class SettingPage extends StatefulWidget {
final String accountName;
final bool reception;

const SettingPage({Key key, this.accountName, this.reception})
: super(key: key);

@OverRide
_SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State {
ProgressDialog prDialog;
Color _shadeColor = Colors.orange[400];
Color _tempShadeColor;
ColorSwatch _tempMainColor;
ColorSwatch _mainColor = Colors.deepOrange;

@OverRide
void initState() {
super.initState();
initData();
}

@OverRide
Widget build(BuildContext context) {
// ScreenUtil.init(context, height: 896, width: 414, allowFontScaling: false);
return ThemeSwitchingArea(
child: Builder(
builder: (context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
centerTitle: true,
title: Text(
F.companyInfo.appCompanyName,
),
),
body: Column(
children: [
SizedBox(height: 30.h),
header(),
Expanded(
child: ListView(
children: [
widget.reception
? _widgetGetDataFromSazmani(context)
: SizedBox(),
_widgetThemeColor(context),
_widgetFontSize(),
_widgetLogout(context),
colorChange(),
],
),
)
],
),
);
},
),
);
}

Future initData() async {
prDialog = new ProgressDialog(context,
type: ProgressDialogType.Normal, isDismissible: false);
prDialog.style(
message: 'چند لحظه صبر نمایید ',
borderRadius: 10.0,
backgroundColor: Colors.white,
elevation: 10.0,
insetAnimCurve: Curves.easeInOut,
progressTextStyle: Style.styleTextBlack(TEXT_SIZE_22, FontWeight.w400),
messageTextStyle: Style.styleTextBlack(TEXT_SIZE_30, FontWeight.w400),
);
}

Widget header() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(width: 40.w),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Directionality(
textDirection: TextDirection.rtl, child: HomePage())),
);
},
child: Icon(
LineAwesomeIcons.arrow_right,
size: ScreenUtil().setSp(50),
),
),
profileInfo(),
themeSwitcher(),
SizedBox(width: 40.w),
],
);
}

Widget profileInfo() {
return Expanded(
child: Column(
children: [
Container(
height: 150.h,
width: 165.w,
margin: EdgeInsets.only(top: 55.h),
child: Stack(
children: [
CircleAvatar(
radius: 80,
backgroundImage: AssetImage('assets/images/admin.png'),
),
],
),
),
SizedBox(height: 40.h),
Text(widget.accountName,
style: Style.styleTextBlack(TEXT_SIZE_24, FontWeight.w700)),
SizedBox(height: 60.h),
Container(
height: 70.h,
width: 300.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Theme.of(context).accentColor,
),
child: widgetDownloadApk(),
),
SizedBox(height: 35.h),
],
),
);
}

Widget _widgetGetDataFromSazmani(BuildContext context) {
return InkWell(
onTap: () {
_getdata(context);
},
child: _widgetContent("دریافت اطلاعات پذیرش", LineAwesomeIcons.upload),
);
}

Future _getdata(BuildContext context) async {
await Helper.isOnline().then((isOnline) async {
if (isOnline) {
prDialog.show();
bool result = false;
double _netserverversion = 0;
_netserverversion = await TableService.getVersion();
DbHelper dbHelper = new DbHelper();
var map = await dbHelper.getItem('LocalAppConfig');
LocalAppConfig appConfig = new LocalAppConfig.fromMap(map);
if (appConfig != null && appConfig.version == 0) {
result = await Helper.getDataSazmaniUntilEnd(_netserverversion);
} else if (appConfig != null &&
appConfig.version != netserverversion) {
await TableService.getAlterTable().then(() async {
result = await Helper.getDataSazmaniUntilEnd(_netserverversion);
});
} else {
result = await Helper.getDataSazmaniUntilEnd(_netserverversion);
}
if (!result) if (prDialog.isShowing()) prDialog.hide();
} else
FlushbarHelper.createInformation(
context: context,
message: "عدم ارتباط با سرور ،مجددا اقدام نمایید.",
title: "توجه");
});
}

Widget widgetDownloadApk() {
return InkWell(
onTap: _launchURL,
child: Row(
children: [
SizedBox(width: 45.w),
Text(
"بروز رسانی ",
style: Style.styleTextBlack(TEXT_SIZE_24, FontWeight.w700),
),
SizedBox(width: 80.w),
Icon(
Icons.update_outlined,
size: 40.w,
),
],
),
);
}

_launchURL() async {
String url = F.companyInfo.urlDownload +
'WebApiB2BDotCore/UploadedFiles/Apk/b2bsorooshan.apk?${Random().nextInt(10000)}';
if (await canLaunch(url)) {
await launch(url);
}
}

Widget _widgetLogout(BuildContext context) {
return Container(
child: InkWell(
onTap: () {
Helper.onConfirmEasyDialog(
context,
'خروج',
'آیا از خروج از حساب کاربری اطمینان دارید؟',
_logout,
_cancel(context));
},
child: _widgetContent(
"خروج از حساب کاربری", LineAwesomeIcons.alternate_sign_out),
),
);
}

_logout() {
UserAppConfigProvider configProvider = UserAppConfigProvider();
configProvider.logOutUser(1, true).then((value) {
Helper.onExit();
});
}

_cancel(BuildContext context) => Navigator.of(context).pop(true);

Widget _widgetThemeColor(BuildContext context) {
return InkWell(
onTap: _openColorPicker,
child: _widgetContent(
" تغییر رنگ برنامه ", LineAwesomeIcons.paint_roller));
}

Widget _widgetFontSize() {
return InkWell(
onTap: () {},
child: _widgetContent(
" تغییر سایز فونت ", LineAwesomeIcons.alternate_pencil),
);
}

Widget _widgetContent(String title, IconData icon) {
return Container(
height: 90.h,
margin: EdgeInsets.symmetric(
horizontal: 60.w,
).copyWith(
bottom: 40.h,
),
padding: EdgeInsets.symmetric(
horizontal: 50.w,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Theme.of(context).backgroundColor,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title,
style: Style.styleTextBlack(TEXT_SIZE_24, FontWeight.w700)),

      Icon(
        icon,
        size: 30,
      ),
      // Spacer(),
    ],
  ),
);

}

Widget themeSwitcher() {
return ThemeSwitcher(
builder: (context) {
return AnimatedCrossFade(
duration: Duration(milliseconds: 200),
crossFadeState:
ThemeProvider.of(context).brightness == Brightness.dark
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild: GestureDetector(
onTap: () =>
ThemeSwitcher.of(context).changeTheme(theme: kLightTheme),
child: Icon(
LineAwesomeIcons.sun,
size: ScreenUtil().setSp(50),
),
),
secondChild: GestureDetector(
onTap: () =>
ThemeSwitcher.of(context).changeTheme(theme: kDarkTheme),
child: Icon(
LineAwesomeIcons.moon,
size: ScreenUtil().setSp(50),
),
),
);
},
);
}

ThemeData selectedColorTheme(BuildContext context) => ThemeData(
accentColor: _shadeColor,
appBarTheme: ThemeData.dark().appBarTheme.copyWith(color: _shadeColor),
);

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

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,
),
GestureDetector(
child: Text('SUBMIT'),
onTap: () {
Navigator.of(context).pop();
_mainColor = _tempMainColor;
_shadeColor = _tempShadeColor;
},
),
],
);
},
);
}

Widget colorChange() {
return ThemeSwitcher(
builder: (context) {
return Container(
child: RaisedButton(
child: Text(" change color "),
onPressed: () {
ThemeSwitcher.of(context).changeTheme(
theme: selectedColorTheme(context),
);
},
),
);
},
);
}
}

when i click the " change color " Button , this error " The getter 'dx' was called on null. Receiver: null Tried calling: dx " occur in debug consol
Can you help me ?????

dependencies:
flutter_material_color_picker: ^1.0.5

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

The relevant error-causing widget was:
MaterialColorPicker
When the exception was thrown, this was the stack:
#2 RenderBox.size (package:flutter/src/rendering/box.dart:1694:12)
#3 RenderBox.paintBounds (package:flutter/src/rendering/box.dart:2288:41)
#4 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:134:58)
#5 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:95:5)
#6 PaintingContext._compositeChild (package:flutter/src/rendering/object.dart:201:7)
...
The following RenderObject was being processed when the exception was fired: RenderConstrainedBox#51f51 relayoutBoundary=up3
... needs compositing
... parentData: offset=Offset(0.0, 0.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=379.4, 0.0<=h<=Infinity)
... size: MISSING
... additionalConstraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity)
RenderObject: RenderConstrainedBox#51f51 relayoutBoundary=up3
needs compositing
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=379.4, 0.0<=h<=Infinity)
size: MISSING
additionalConstraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity)
... child: RenderRepaintBoundary#deafb relayoutBoundary=up4 NEEDS-PAINT
... needs compositing
... parentData: (can use size)
... constraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity)
... layer: OffsetLayer#3e4d5 DETACHED
... engine layer: Null#007db
... offset: Offset(0.0, 0.0)
... size: MISSING
... metrics: 0.0% useful (1 bad vs 0 good)
... diagnosis: insufficient data to draw conclusion (less than five repaints)
... child: RenderCustomPaint#75049 relayoutBoundary=up5 NEEDS-PAINT
... needs compositing
... parentData: (can use size)
... constraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity)
... size: MISSING
... child: RenderRepaintBoundary#b9ef3 relayoutBoundary=up6 NEEDS-PAINT
... needs compositing
... parentData: (can use size)
... constraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity)
... size: MISSING
... usefulness ratio: no metrics collected yet (never painted)
... child: _RenderScrollSemantics#4b074 relayoutBoundary=up7 NEEDS-PAINT
... needs compositing
... parentData: (can use size)
... constraints: BoxConstraints(w=329.1, 0.0<=h<=Infinity)
... semantic boundary
... size: MISSING

It would be greate if you can add a "onBack () {}" prop for MaterialColorPicker. I need to catch when the users press the back button and from what I see there is no option. Thank you!

Hi,
I've tried to use black in the selectedColor param, but it doesn't really select anything, also when I took Colors.black to to colors list, i've got an error.

How is it possible to have black as an option?

Thanks,
Ben

There is an error with version 1.0.4.
Something to do with the elevation changes.