-
Notifications
You must be signed in to change notification settings - Fork 773
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Removed properties, classes and no backward compatible with material 2 version for flutter web #1628
Comments
Let's consider the original code: Widget _buildContent(BuildContext context) {
final theme = Theme.of(context);
final hasFinalWidth = options.width != null;
return Padding(
padding: options.padding ?? const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Row(
mainAxisSize: !hasFinalWidth ? MainAxisSize.min : MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
UtilityWidgets.maybeWidget(
enabled: hasFinalWidth,
wrapper: (child) => Expanded(child: child),
child: Text(
_valueToText[_selectedAttribute]!,
overflow: options.labelOverflow,
style: options.style ??
TextStyle(
fontSize: iconSize / 1.15,
color:
iconTheme?.iconUnselectedColor ?? theme.iconTheme.color,
),
),
),
const SizedBox(width: 3),
Icon(
Icons.arrow_drop_down,
size: iconSize / 1.15,
color: iconTheme?.iconUnselectedColor ?? theme.iconTheme.color,
)
],
),
);
} The new code: builder: (context) {
final isMaterial3 = Theme.of(context).useMaterial3;
final child = Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
_label(_selectedItem),
style: widget.options.textStyle ??
TextStyle(
fontSize: iconSize / 1.15,
),
),
Icon(
Icons.arrow_drop_down,
size: iconSize * iconButtonFactor,
),
],
);
if (!isMaterial3) {
return RawMaterialButton(
onPressed: _onDropdownButtonPressed,
child: child,
);
}
return IconButton(
onPressed: _onDropdownButtonPressed,
icon: child,
);
},
),
);
You just simply remove padding for the whole Why? Why did you remove anything if you did not know how it is working. |
I'm not removing anything this time, it just conflicts between many buttons made by PRs |
Replace with |
I already told you, there was been conflicts and I need you to re add the options but you didn't respond so I had to remove them, I can restore them but I need you to use them in the widget |
To make it clear, you did upgrade from your local branch to we did not remove them in 9.0.5 |
Well. This is a code from @override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.tightFor(width: size, height: size),
child: UtilityWidgets.maybeTooltip(
message: tooltip,
child: RawMaterialButton(
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius),
),
fillColor: fillColor,
elevation: 0,
hoverElevation: hoverElevation,
highlightElevation: hoverElevation,
onPressed: () {
onPressed?.call();
afterPressed?.call();
},
child: icon,
),
),
);
} As you may see it contains Now let's see on latest code: Widget build(BuildContext context) {
if (isFilled) {
return IconButton.filled(
padding: padding,
onPressed: onPressed,
icon: icon,
style: iconStyle,
);
}
return IconButton(
padding: padding,
onPressed: () {
onPressed?.call();
afterPressed?.call();
},
icon: icon,
style: iconFilledStyle,
);
}
Do you understand that this is not equivalent modification? You removed constraints, you removed tooltip, you removed rounded rectangle, you removed How do you suggest me to restore rounded rectangle hovering, how do you suggest me to have the buttons size? Use the addiional |
dependency: |
Are you sure? I see the parameter |
Just for experiment I added those class and what I see? Where is correct vertical alignment for all buttons? Also I see different icon looks. Look at aligment sharp icons and remain ones which looks bigger. Again breaking change without backward compability. @singerdmx versions from |
I don't know about your code sample, I test things in the example and it looks fine |
Are you kidding? How can I send you a whole project? Just create and example for yourself (on all platforms!). It is simple - just quill controlls separated by divider. P.S. The simple solution is to revert to |
I meant the code sample |
Reverting as not an option, give me second chance, I will fix the font size issue with the dropdown buttons then the styling using material 3 but I will need you to test thing on the pre release channel |
It's new material 3 behavior |
Now it's fixed, the justify min width is back |
Now I'm fixing the toolbar when multiRowsDisplay is false |
Again, I used the material 3 dropdown instead of the current one |
This issue has been fixed in the latest pre-release |
What do you mean material dropdown? Is it different than one which is avaiable for years? |
I don't know which pre-release are you talking about. Now I have the problem - my GUI is away different after changes. For example, how can I make rounded rectangle highlighting over all toggle buttons? Using |
I will change the others soon in the pre release
Let's make it clear, @singerdmx and I agreed that it should be dropdown button for the select header style as a default, I create it from scratch but I forgot that it didn't match with the font family and font size |
Please use |
Why do you think that I use Why size of icons and dropdowns in your example image is different? Why normal is away different? |
You still have |
You can customize them and decide which button you want with which size, |
That's because when I migrated to material 3, both the buttons and dropdown buttons, it was not constant for some reasons, I copied the workaround from the old code and it worked (divide the iconSize by 1.15, but then we had a PR which add iconButtonFactor), now it looks exactly the same to me right now What do you mean by the size is different? |
That's another issue, let's fix your current one All what I did I used the icon button and dropdown from material 3 and that's all, I didn't change anything else like the height |
Without the code sample unfortunately I can't help you |
If you say you Widget build(...) {
if (useMaterial3) {
return YourNewFunctionality();
} else {
return OldTestedAndWorkingFunctionality(); // But you actually changed the functionality of this
}
} |
Sorry man but I am not a freelancer and developer, and I am not a supporter of this package. I can just suggest the features and fix bugs if I have time and I have some functionality which is absent in a Quill. |
Use the |
Let me adjust the code and I will send it to you |
@MacDeveloper1 @ellet0 Now I need to upgrade the package, but it looks like there is a breaking change and it's impossible to get the same design with the new options, leading to much larger, circular buttons, with icons with inconsistent sizes, like so: Does either of you have a solution or a workaround for this issue? |
Thank you for your feedback. I understand this challenge with the transition from Material 2 to Material 3 with the changes that impact the design and user experience of the toolbar As of Flutter 3.16, Material 3 is the new standard and enabled by default, and we decided to fully adopt it to maintain code simplicity and ensure forward compatibility Support both Material 2 and 3 not only requires different options and configurations with different widgets, but it would also require extensive conditional checks, complicating the codebase and increasing the maintenance overhead we already tried to improve the source code quality in the past but that's another subject Here are a few potential workarounds
We increased the number from 8.x.x to 9.x.x after this new change, indicating it's a breaking change Consider migrating to Material 3. At some point, Material 2 might be deprecated, or it will no longer receive updates for bug fixes, improvements, and new features Feel free to ask any questions. |
Thank you for the quick reply! final iconButtonData = IconButtonData(
padding: const EdgeInsets.all(4),
splashRadius: 32,
style: ButtonStyle(
minimumSize: WidgetStateProperty.all(const Size(32, 32)),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: WidgetStateProperty.all(const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
)),
),
);
QuillToolbar.simple(
configurations: QuillSimpleToolbarConfigurations(
...
buttonOptions: QuillSimpleToolbarButtonOptions(
base: QuillToolbarBaseButtonOptions(
iconTheme: QuillIconTheme(
iconButtonUnselectedData: iconButtonData,
iconButtonSelectedData: iconButtonData,
),
iconSize: 16,
iconButtonFactor: 1,
),
selectHeaderStyleButtons:
const QuillToolbarSelectHeaderStyleButtonsOptions(
attributes: [
Attribute.header,
Attribute.h1,
Attribute.h2,
],
),
),
...
),
) Note that this issue had nothing to do with the material version of my app. I was already using Material 3 before
|
I'm glad you could restore the old look and feel, most of the new used components are the new one from Material 3, Material 2 components can still be used in Materail 3, for example the While the old component is not deprecated yet and can still be used, we used the new recommended components mentioned in the release changes of Material 3 and Flutter 3.16 We might include an option to use the old look and feel by using something similar to the code snippet you provided. One of the biggest changes in 8.x.x and 9.x.x is the customization. |
@ellet0 @singerdmx today I again update the package to version
9.0.5
and I get errors again!!!Why do you remove properties from
QuillToolbarSelectHeaderStyleDropdownButtonOptions
? I suggested my widgetQuillToolbarSelectHeaderStyleDropdownButton
as is. WhyQuillToolbarSelectAlignmentButton
does not contains propertiesshowLeftAlignment
,showCenterAlignment
,showRightAlignment
,showJustifyAlignment
if the are alway the until8.6.4
Please revert to the latest working version
8.6.4
or stop the always breaking. Please support backward compability because of your actions people could not compile their working projects.Yesterday I spent more time to force my web app working and those modifications were merged but now may modifications are already absent.
Please restore my code
QuillToolbarSelectHeaderStyleDropdownButton
because it did not useMenuAnchor
and its GUI must be similar toQuillToolbarFontFamilyButton
andQuillToolbarFontSizeButton
.The text was updated successfully, but these errors were encountered: